Добавить значок в кнопку HTML при нажатии - PullRequest
Новая
       11

Добавить значок в кнопку HTML при нажатии

0 голосов
/ 31 января 2019

Вот моя кнопка: 

<button type="button" id="myButton" class="myButtonCSS" onclick="handleMyButtonClick()"> myButton! </button>

В моей функции handleMyButtonClick () у меня есть немного логики, но я хочу добавить значок ожидания, пока он выполняет эту логику.Я узнал, как это сделать с помощью этого кода: 

<i class="fa fa-spinner fa-spin"></i>

Если я добавлю это к моему исходному выражению кнопки, оно будет работать, но оно ВСЕГДА там.Я хочу, чтобы это отображалось только при нажатии.Я пытаюсь добавить класс «i» к кнопке в моей функции JavaScript при нажатии.Я пытался использовать .classList.add(), но, должно быть, я делаю это неправильно или полностью ошибаюсь.Как я могу это сделать?

Ответы [ 4 ]

0 голосов
/ 31 января 2019

Что вам нужно сделать, это обновить внутренний HTML-код кнопки в начале вашего метода handleMyButtonClick()

var btn = document.getElementById('myButton');
btn.innerHTML = '<i class = "fa fa-spinner fa-spin"></i> Please wait...';

Затем, когда вы закончите с логикой, сбросьте кнопку обратно в исходное состояние. 

btn.innerHTML = 'myButton!';

Посмотрите на этот полный код.Работает так, как вы хотели.

function handleMyButtonClick(){
 // Get button element
 btn = document.getElementById('myButton');
 
 // Set the spinner 
 btn.innerHTML = '<i class = "fa fa-spinner fa-spin"></i> Please wait...';
 
 // Do the work. A sample method to wait for 3 second.
 setTimeout(function(){ 
 
 console.log("work done"); 
 
 // When the work is done, reset the button to original state
 btn.innerHTML = 'myButton!';
 
 }, 3000); 
 
}
<button type="button" id="myButton" class="myButtonCSS" onclick="handleMyButtonClick()"> myButton! </button>
0 голосов
/ 31 января 2019

Я думаю, это сработает для вас, пожалуйста, проверьте 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>

<button type="button" id="myButton" class="" onclick="handleMyButtonClick()"> <span id='spin'></span>myButton! </button>

</body>
<script>
function handleMyButtonClick(){

$("#spin").addClass("fa fa-spinner fa-spin");

setTimeout(()=>{
//Do some logic 
$("#spin").removeClass("fa fa-spinner fa-spin");
},5000)
}
</script>
</html>
0 голосов
/ 31 января 2019

Спасибо за все ваши предложения, но у меня гораздо более простой ответ. 

tempButton = document.getElementById('myButton'); //snag button
tempButton.innerHTML = '<i class = "fa fa-spinner fa-spin"></i> Please wait...';

Я ОЧЕНЬ новичок в веб-программировании.Извините, я не могу объяснить вам, но эта 1 строка мгновенно меняет код моей кнопки в моей функции JavaScript при нажатии.

0 голосов
/ 31 января 2019

Поскольку javascript использует один поток, и если ваш код является синхронным, вы не сможете сразу увидеть изменение стиля.Как только выполнение метода будет завершено, он будет отображать пользовательский интерфейс с новым стилем.Так что, в вашем случае, это не покажет никакой разницы.Как вы показываете и прячетесь к концу функции.Если вы хотите показать счетчик, вы должны скрыть счетчик в setTimeout ().

Попробуйте выполнить следующее: 

<button type="button" id="myButton" class="myButtonCSS" onclick="handleMyButtonClick()">
   <i class="fa fa-spinner fa-spin"></i>

    myButton!
</button>

function handleMyButtonClick() {
    document.getElementById('myButton').classList.add('loading');

    // your logic goes here


    setTimeout(function() {
       document.getElementById('myButton').classList.remove('loading');
    }, 2000);

}

.myButtonCSS {
   position: relative;
}

.myButtonCSS .fa-spinner {
   display: none;
   position: absolute;
   left: 5px;
   top: 5px;// you can modify according to your button height and width
}

.myButtonCSS.loading .fa-spinner {
   display: inline-block;
}
...