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

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