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 that you have read and understand our privacy policy and code of conduct.

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