1

Имеется некоторое количество строк кода:

var menu = new Menu({
    title: "voter",
    items: [
        "down",
        "vote",
        "up"
    ]
});

function Menu(options){
    window.div1 = document.createElement('div');
    window.spanElem1 = document.createElement('span');
    window.spanElem2 = document.createElement('span');
    window.spanElem3 = document.createElement('span');

    div1.className = options.title;
    document.body.appendChild(div1);
    spanElem1.className = options.items[0];
    spanElem1.innerHTML = "-";
    div1.appendChild(spanElem1);
    spanElem2.className = options.items[1];
    spanElem2.innerHTML = "0";
    div1.insertBefore(spanElem2, spanElem1);
    spanElem3.className = options.items[2];
    spanElem3.innerHTML = "+";
    div1.insertBefore(spanElem3, spanElem2);
};

spanElem1.onclick = function(){
    var temp = spanElem2.textContent;
    temp = Number("temp") - 1;
    spanElem2.innerHTML = String(temp);
};

spanElem3.onclick = function(){
    var temp = spanElem2.textContent;
    //console.log(temp);
    temp = Number("temp") + 1;
    spanElem2.innerHTML = String(temp);
};

spanElem2.onclick = function() {
    var temp = prompt('Введите значение: ', 0);
    spanElem2.innerHTML = temp;
   // console.log(spanElem2.textContent);
};

Menu(menu);

При нажатии на spanElem1, spanElem2, spanElem3 не работает innerHTML. В чем может быть проблема? Спасибо.

1 ответ 1

1

Проблема в самом коде.

Вначале функция Menu вызывается как конструктор, создаются необходимые спаны.

После этого, созданным спанам навешиваются обработчики.

Затем вызывается Menu(menu); элементы span создаются заново, и в консоль выводятся ошибки, так как у переданного объекта menu, нет ни свойства title, ни свойства items, поэтому при обращении options.items[0] будет исключение.

Из-за этой ошибки новые элементы не добавились в body, и но успели заменить глобальные переменные, поэтому spanElem1 на который добавился обработчик, и spanElem1 который внутри обработчика - это разные элементы. Поэтому кажется, что не срабатывает innerHTML.

Решением может быть убирание второго вызова, а также внесение добавления обработчиков внутрь функции Menu.

Еще ошибка в использовании Number: Number("temp") - всегда вернет NaN, потому что строка "temp" - это не число. Для того, чтобы передать переменную, не нужно писать кавычки вокруг ее имени.

Например:

Menu({
  title: "voter",
  items: [
    "down",
    "vote",
    "up"
  ]
});

function Menu(options) {
  var div1 = document.createElement('div');
  var spanElem1 = document.createElement('span');
  var spanElem2 = document.createElement('span');
  var spanElem3 = document.createElement('span');

  div1.className = options.title;
  document.body.appendChild(div1);
  spanElem1.className = options.items[0];
  spanElem1.innerHTML = "-";
  div1.appendChild(spanElem1);
  spanElem2.className = options.items[1];
  spanElem2.innerHTML = "0";
  div1.insertBefore(spanElem2, spanElem1);
  spanElem3.className = options.items[2];
  spanElem3.innerHTML = "+";
  div1.insertBefore(spanElem3, spanElem2);

  spanElem1.onclick = function() {
    var temp = spanElem2.textContent;
    temp = Number(temp) - 1;
    spanElem2.innerHTML = String(temp);
  };

  spanElem3.onclick = function() {
    var temp = spanElem2.textContent;
    temp = Number(temp) + 1;
    spanElem2.innerHTML = String(temp);
  };

  spanElem2.onclick = function() {
    var temp = prompt('Введите значение: ', 0);
    spanElem2.innerHTML = temp;
    // console.log(spanElem2.textContent);
  };
};

Ваш ответ

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

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