innerHTML. В чем проблема?

220

22 апреля 2018, 19:36

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

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. В чем может быть проблема? Спасибо.

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