There is a simple code: http://jsbin.com/yulaturibe/edit?html,js,console,output

Js

// Функция отрисовки 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 from 1 line:

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

Question 2:

  1. Why the updated val1 value is not displayed on the page, but increases in the console? And how to make it so that the page is increased?

  2. How in this case to rewrite the script to get rid of global variables val1 and val2?

  • one
    Why the updated value of val1 is not displayed on the page - because you called Draw only once. The markup code is not connected in any way; the markup is always changed only manually. - Grundy
  • @Grundy exactly, changed that if the click were again Draw was called, but now some kind of incomprehensible cant increases only 1 time, the error console does not write jsbin.com/zuzokegige/edit?html,js,output - fosh4455
  • I do not see the definition of the variable left - Grundy
  • @Grundy ok, why does it increase for the first time? - fosh4455
  • and, everything, I found your left :-D in it, just everything and the problem :-) you add an element to the page many times, and a handler for clicking on it only once. here it works once. At the same time, the old element is erased, and you don’t add a new processor - Grundy

1 answer 1

  1. It does not change because you do not change innerHTML on click.

  2. So, for example.

     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>

Fulfillment only by pressing the left and smaller code. On the left every time you need to re-hang onclick because we overwrite the left and onclick disappears

 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(); 
 <div id="text"></div>

  • Layout cannot be changed, there must be only 1 final block, in which the entire output occurs. If you remove the div with id = left, then it will also increase 1 time to 2 and stop - fosh4455
  • @ fosh4455 And what then is the variable left in your code? - Dantessss
  • This id is left id, but it is generated inside JS in Draw () - fosh4455
  • @ fosh4455 This code works exactly by clicking on the block with id = "left" - Dantessss