Блог

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

  if(color.length){
            document.getElementById("button").remove();
        }
 

и с «removechild», но ни одна из этих работ у кого-нибудь есть решение?

 var color = ["green", "red", "black"];
    
function page() {
    document.body.style.backgroundColor = "grey";
    //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.length){
        document.getElementById("button").remove();
    }
}

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);
}
 

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

Чтобы проверить, совпадает ли цвет фона с последним цветом, просто сравните цвет фона элементов (вы назвали его количество) с последним элементом в массиве. И вы также должны поместить оператор if ПЕРЕД изменением цвета.

 if (Amount.style.backgroundColor == color[color.length-1]) {
Amount.remove();
 

Однако вам следует пересмотреть свое именование, поскольку это может немного запутать.
Например: Amount — это определенно неправильное имя, поскольку оно относится к выбранному элементу. Передаваемый вами параметр (a) — это сумма.

Если у вас есть какие-либо вопросы, не стесняйтесь задавать их.

 let color = ["green", "red", "purple", "blue", "black"];

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

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

}

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]);
    document.getElementById("container").appendChild(button);
  }
  set_onclick(amount);
} 

 <div id="container">
</div>