1

Есть n-ое число button'ов, создаваемых по циклу. Там же им присваивается id и функция setClass(id). Эта функция меняет цвет этой кнопки несколько раз:

/* Цикл создающий таблицу из буттонов */
button.setAttribute("id", id);
button.setAttribute("onclick", "setColorClass('"+id+"')");

function setColorClass(id)
    {
      var elem = document.getElementById(id);
      if (elem.className == "firstClass")
      {
        elem.setAttribute("class", "SecondClass");
      }
      else if (elem.className == "SecondClass")
      {
        elem.setAttribute("class", "ThirdClass");
      } etc...

Мне нужно: чтобы при клике на одну кнопку ей присваивался атрибут с порядковым номером. При клике на какую-то другую кнопку: следующий номер и так далее. Нельзя чтобы при клике на одну и тужу кнопку номера перебирались. Одна кнопка - одна и та же цифра.

введите сюда описание изображения

3
  • Создайте глобальную переменную, например var i = 1. При клике на кнопку проверяете есть ли ваш атрибут у элемента, если его нет, то создаете его со значением i, после прибавляете к i единицу(i++).
    – mix
    23 ноя 2016 в 10:03
  • не совсем понятно, что кому должно присваивать?
    – C.Raf.T
    23 ноя 2016 в 10:03
  • @C.Raf.T элементу button атрибут number: elem.setAttribute("number", number)
    – Zhi V
    23 ноя 2016 в 13:14

1 ответ 1

1

Ну если я правильно понял:

var classArray = ["firstClass", "SecondClass", "ThirdClass", "firstClass", "SecondClass", "ThirdClass"];
var xx = document.getElementById("xxx");

function setColorClass(id) {
  let elem = document.getElementById(id);
  if (!elem.hasAttribute("class")) {
    elem.setAttribute("class", classArray[0]);
    classArray.shift();
    let num = 6 - classArray.length;
    elem.setAttribute("number", num);
    elem.innerHTML = num;
  }
}
for (let i = 0; i < 6; i++) {
  let btn = document.createElement("BUTTON");
  btn.setAttribute("id", i);
  btn.setAttribute("onclick", "setColorClass('" + i + "')");
  xx.appendChild(btn);

}
button {
  width: 50px;
  height: 50px;
  color: #fff;
}
.firstClass {
  background: red;
}
.SecondClass {
  background: green;
}
.ThirdClass {
  background: blue;
}
<div id="xxx"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.