Не увеличивает переменную в JS?

307

02 августа 2017, 23:26

Есть простой код: http://jsbin.com/yulaturibe/edit?html,js,console,output

// Функция отрисовки
function Draw(val1, val2) {
    var Header = '<div id="left">'+val1+'</div><div id="right">'+val2+'</div>';
    return Header;
}
var val1 = 1;
var val2 = 5;
document.getElementById('text').innerHTML=Draw(val1, val2);
// Функция добавления
left.onclick = function() {
    console.log(val1);
    val1++;
    return val1;
};

HTML из 1 строки:

<div id="text"></div>

Вопроса 2:

Почему обновлённое значение val1 не отображается на странице, но в консоли увеличивается? И как сделать так что бы увеличивалось на странице?
Как в данном случае переписать скрипт что бы избавится от глобальных переменных val1 и val2?

Answer 1

Не изменяется потому что вы не изменяете innerHTML по клику.

Вот так, например.

function draw() { 
  var val1 = 1; 
  var val2 = 5; 
  var Header = '<div id="left">' + val1 + '</div><div id="right">' + val2 + '</div>'; 
  document.getElementById('text').innerHTML = Header; 
  document.getElementById('left').onclick = function() { 
    val1++; 
    var Header = '<div id="left">' + val1 + '</div><div id="right">' + val2 + '</div>'; 
    document.getElementById('text').innerHTML = Header; 
    console.log(val1); 
    return val1; 
  }; 
} 
 
draw();

<div id="left"> 
  <div id="text"></div> 
</div>

Отработка только по нажатию на left и меньший по объему код. На left каждый раз надо заново вешать onclick потому что мы перезаписываем left и onclick пропадает

function draw() { 
  var val1 = 1; 
  var val2 = 5; 
  var text = document.getElementById('text'); 
 
  text.innerHTML = '<div id="left">' + val1 + '</div><div id="right">' + val2 + '</div>'; 
  document.getElementById('left').onclick = leftPlusNum; 
 
  function leftPlusNum() { 
    val1++; 
    text.innerHTML = '<div id="left">' + val1 + '</div><div id="right">' + val2 + '</div>'; 
    document.getElementById('left').onclick = leftPlusNum; 
  }; 
} 
 
draw();