Блог

Главная - Вопросы по программированию - скрыть кнопку после третьего нажатия

скрыть кнопку после третьего нажатия

#javascript #button

#javascript #кнопка

Вопрос:

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

я пытался сделать это с:

 if (color[change > 2]){
            button.style.display = "none";
     }

но это, похоже, не work..is есть ли способ добавить это в функцию, не изменяя слишком много кода?

var color = [«зеленый», «красный», «желтый»];

 function page() {
    document.body.style.backgroundColor = "purple";
    //style page
    createButtons(10);
}
page();

function onbuttonclicked(a) {
    var Amount = document.getElementById("button"   a);
    var click = Amount.getAttribute('Color');
    var change = color.indexOf(click);
    Amount.setAttribute('style', 'background-color:'   color[change   1]);
    Amount.setAttribute('Color', color[change   1]);

    if (color[change > 2]){
        button.style.display = "none";
    }
}

function set_onclick(amount) {
    for (var a = 1; a < (amount   1); a  ) {
        document.getElementById("button"   a).setAttribute("onclick", "onbuttonclicked("   a   ")");
    }
}

function createButtons(amount) {
    for (var a = 1; a <(amount   1); a  ) {

        var button = document.createElement("button");
        button.id = "button"   a;
        button.innerHTML = "button "   a;
        button.setAttribute('Color', color[0]);
        button.setAttribute('style', 'background-color:'   color[0]);
        container.appendChild(button);
    }
    set_onclick(amount);
}

Ответ №1:

 let count = -1;
let color = ["green", "red", "yellow"];
document.querySelector('button').addEventListener('click', function() {
  if (color[  count]) {
    this.style.backgroundColor = color[count];
  } else {
    this.style.display = 'none';
  }
}); 
 <button type="button">Click me</button>

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

1. есть ли разница между var en let ?

2. @desit900 замените их, поскольку var в порядке. var — это старый способ fassion. в то время как let является стандартом ES6.

3. Есть ли также способ создать if / else в моей функции «onbuttonclicked (a)» и заставить ее скрыть кнопку таким образом?

Ответ №2:

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

 var count=0;
function onButtonClick(){
/your code here
if(count>2){
    /delete button
}
count  ;
}