Блог

Главная - Вопросы по программированию - когда я нажимаю кнопку во второй раз, мой ярлык хочет исчезнуть

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

#javascript #html #button #onclick

Вопрос:

у меня есть такая кнопка и ярлык:

 <button id="btn">Button</button>
<label  id="lbl">lbl</label>

Когда я нажимаю эту кнопку во второй раз, эта метка хочет скрыться/исчезнуть

Комментарии:

1. нет , если я нажму кнопку 2 раза, надпись моя, чтобы скрыть

2. Я добавил решение, когда вы хотите, чтобы событие срабатывало при двойном щелчке, используйте ondblclick даже из JS

3. Привет, вы хотели, чтобы он исчез при двойном щелчке или при втором щелчке (это не одно и то же).

Ответ №1:

Код :

 button = document.getElementById("btn")
label = document.getElementById("lbl")

button.addEventListener('dblclick', function(){
  label.style.display = 'none';
}) 
 <button id="btn">Button</button>
<label  id="lbl">lbl</label>

Ответ №2:

Вы можете использовать событие onclick кнопки. Добавьте jQuery и используйте приведенный ниже код.

 var cnt = 0;
$('#btn').on('click', function() {
  cnt  ;
  if(cnt == 2)
    $('#lbl').hide();
})

ИЛИ в ванильном js вы можете использовать

 var cnt = 0;
document.getElementById('btn').onclick = function() {
  cnt  ;
  if(cnt == 2)
    document.getElementById('lbl').style.display = 'none';
};

Комментарии:

1. Привет, я не понимаю, зачем им нужно начинать изучать jquery, чтобы сделать эту простую вещь.

2. @AHaworth также добавил ванильный код javascript.

Ответ №3:

решение

Используйте встроенное событие JS

В JS есть событие ondblclick, которое срабатывает только при двойном щелчке, проверьте фрагмент ниже

 function hide() {
  document.querySelector("label").style.display= "none";
} 
 <button  ondblclick="hide()" id="btn">Button</button>
<label  id="lbl">Hide me after Double clicking on button</label>

Ответ №4:

Предоставленный вами код не скрывается и не исчезает

Есть вероятность, что ваш код перезаписывается другим css.

Ответ №5:

Он разделен на 3 этапа:

  1. Установите счетчик для подсчета кликов.
  2. Добавьте кнопку прослушивания кликов и увеличьте счетчик на 1 при нажатии.
  3. Если счетчик достигает 2, измените CSS метки с display: none помощью, чтобы она исчезла

Вот чистое решение Javascript:

 var lbl = document.getElementById('lbl');
var btn = document.getElementById('btn');
var clicks = 0;

btn.addEventListener('click', (e) => {
  clicks  ;
  if (clicks === 2) lbl.style.display = 'none';
}); 
 <button id="btn">Button</button>
<label  id="lbl">lbl</label>

Ответ №6:

Попробуй это.

 let count = 0
const btn =   document.getElementById("btn");
   btn.onclick = function () {
            count  ;
       if(count === 2){
        document.querySelector("label").style.display= "none";
       }
        } 
 <button id="btn">Button</button>
<label  id="lbl">lbl</label>

Ответ №7:

Подсчитайте, сколько раз была нажата кнопка, и когда она достигнет 2, сделайте так, чтобы lbl не отображался.

Этот фрагмент добавляет прослушиватель событий к метке для достижения этой цели.

 let count = 0;
const btn = document.querySelector('#btn');
const lbl = document.querySelector('#lbl');
btn.addEventListener('click', function() {
  count  ;
  if (count == 2) {
    lbl.style.display = 'none';
  }
}); 
 <button id="btn">Button</button>
<label id="lbl">lbl</label>
Метки: ,