Нажать(утопить) кнопку при нажатии на нее Javascript

214
12 декабря 2018, 03:30

Прошу прощения за, возможно, простой вопрос. Как зажать кнопку используя обработчик событий onclick(без использования JQuery):

<input type="submit" onclick="ClickFunction()">
<script>
    function ClickFunction() {
        ...
    }
</script>

И можно ли по нажатию кнопки подменить класс кнопки? Для примера используем Bootstrap:

<input type="submit" class="btn btn-info btn-lg" onclick="ClickFunction()">

По нажатию кнопки заменяем класс на class="btn btn-info btn-lg active", что делает кнопку активной. Спасибо!

UPD

    <script> 
        function clickFunction(btn) { 
            btn.classList.add("active"); 
        } 
    </script> 
 
    <input type="submit" class="btn btn-info btn-lg" style="width: 19.5%" name="column" value="Today" 
                           onclick="clickFunction(this)"> 
 
    <style> 
        .active { 
            border-style: inset; 
        } 
    </style>

Кнопка не зажимается, и "Selector active is never used"

Answer 1

function ClickFunction(btn) { 
  btn.classList.add("active"); 
}
.active { 
  border-style: inset; 
}
<input type="submit" onclick="ClickFunction(this)">

Update

Кнопка не зажимается, ...

Все это (но главное - кнопка с type="submit") находится внутри тега form. По нажатию кнопки вызывается функция ClickFunction, но сразу вслед за этим (и очень быстро) происходит отправка формы и перезагрузка страницы, которая опять приходит с сервера с ненажатой кнопкой. Если Вам это не нужно, используйте:

<input type="button" onclick="ClickFunction(this)" value="Submit">

Update 2

С submit форма улетает, но не зажимается клавиша. С button форма не улетает, но клавиша зажимается.

Добавьте в кнопку атрибут name="Submit" и проверяйте на сервере, что элемент в данных запроса по ключу "Submit" равен "Submit". Если это условие выполняется, выводите в кнопку атрибут class="active".

<input type="submit" name="Submit" value="Submit">

В этом случае onclick="ClickFunction(this)" - не нужен.

Update 3

у каждой кнопки есть name="column" и разное value, которое уже хранится в сессии по ключу column="value". Нужно как-то достучаться до кнопки с value="something" и добавить в нее класс active и проделывать эту проверку после каждого запроса.

Перед закрывающим </body> выведите:

<script>
  var btn = document.querySelector("input[name='column'][value='something']");
  if (btn)
    btn.classList.add("active");
</script>

Вместо something выведите значение которое пришло с запросом по ключу column.

Answer 2

можно сделать это без js, с помощью css псевдокласса active, т.е. даже класс у кнопки не нужно менять.

.class:active{
style
}
READ ALSO
Как убрать анимацию нажатия кнопки Javascript

Как убрать анимацию нажатия кнопки Javascript

Кнопка реализована при помощи Bootstrap классов

235
Горизонтальное меню: Ширина иконок

Горизонтальное меню: Ширина иконок

Хочу создать аналогичное меню с иконками от fontawesome Сделал я все через divЕдинственная проблема которая у меня создалась это ширина каждого...

209
блок прыгает при загрузке

блок прыгает при загрузке

Помогите найти причину того, что блок при загрузке на мобильной версии прыгаетСначала он влево, а потом перемещается в центр

202
Плавный скроллинг к якорю со слешем

Плавный скроллинг к якорю со слешем

У меня возникла следующая проблема: не могу настроить плавный скроллинг к якорю со слешемУ меня сайт состоит из двух страниц, три пункта меню...

177