Не получается в Div добавить значение через onclic, что я делаю не так?

Question

[William Thorn]

Здравствуйте, товарищи!
Суть скрипта следующая.
Есть 2 Div`а
Div1 - пустой, при клике суммирует свое значение со значением Div2;
Div2 - при открытии страницы и при последующих кликах на Div1 генерирует рандомное число;

Не могу понять, почему, если я передаю в getElementByID строковую переменную, а не конкретный ID, то при нажатии на Div1 не происходит его изменения, но генерация нового значения Div2 происходит.

Сам код:

window.onload = function() {
    setNextNum(); 
    var nextNum = document.getElementById("nextNumDiv").innerHTML;
 
//Функция генерации следующего числа и запись его в ячейку 2
    function setNextNum () {
        var number = Math.floor(Math.random()*9+1);
        var nextNum = document.getElementById("nextNumDiv");
        nextNum.innerHTML = number;
    }

//Функция добавления в ячейку
 function addNextNum (num){
        var stat = document.getElementById(num).innerHTML;
        stat = 1*stat+1*nextNum;
        if (stat==null) {
            stat=0;
        }
       console.log(stat);
        this.innerHTML = stat;
        setNextNum();
        nextNum = document.getElementById("nextNumDiv").innerHTML;
}
//Запуск функции добавления в Ячейку a0
    a0.onclick = function(){
        addNextNum("a0");
    }

    
}

Что самое интересное, если я прописываю всю функцию в onclick с указанием ID блока, то все прекрасно работает (см. код ниже). Но, к сожалению. мне нужно реализовать именно первый вариант.

a0.onclick = function() {
        var stat = document.getElementById("a0").innerHTML; 
        stat = 1*stat+1*nextNum;
        if (stat==null) {
            stat=0;
        }
       
        this.innerHTML = stat;
        setNextNum();
        nextNum = document.getElementById("nextNumDiv").innerHTML;
    }

Comments

[Сергей Мурзин]

Проблема не в том, что идет передача строковой переменной, а в том, что this не впопад.

// ...
       console.log(stat);
        this.innerHTML = stat;
        setNextNum();
        nextNum = document.getElementById("nextNumDiv").innerHTML;
// ...

А вообще, перечитайте учебник.
Слишком много ошибок.

Например:
Вы даете переменной stat значение document.getElementById(num).innerHTML;
var stat = document.getElementById(num).innerHTML;
и сразу ее переопределяете
stat = 1*stat+1*nextNum;
Что показывает полное непонимание базы по программирования.

Начните читать от сюда: https://learn.javascript.ru/getting-started

[William Thorn]

Сергей Мурзин: Спасибо, прочитано. Данное решение было принято, чтобы не плодить переменные, т.е. смысл следующий: получаем текущее значение, к текущему значению рибавляем рандомное число, перезаписываем значение. Возможно, это некорректно, но не должно влиять на работу скрипта.

[William Thorn]

Сергей Мурзин: Тем не менее, вы оказались правы :) Проблема была именно в This.

[Сергей Мурзин]

William Thorn: https://goo.gl/z3XyLm
Держи. Будут вопросы пиши.

Answer 1

[Максим]

document.getElementById("a0").onclick = .....

UPD: верная заметка о том, что и так будет работать.
Но я нашел другую штуку - в функции addNextNum есть обращение к this. Т.к. функция была объявлена в глобальном скоупе, то скорей всего this будет указывать на window.

Comments

[Сергей Мурзин]

id-шники видны глобально. Если, конечно, не в режиме "use strict"

[Максим]

Сергей Мурзин: да, верно

[Сергей Мурзин]

Максим: Не решился писать ответ, ответил в комментарии к вопросу.

[Максим]

Сергей Мурзин: ага, тоже обновил коммент.
Оффтоп: неудобно что на тостере не обновляются комменты как на SO. Часто можно писать двоим одно и то же

[William Thorn]

Максим: this тоже корректно отрабатывает. Н.п. такая конструкция тоже корректно работает. Насколько я понял, проблема именно в передаче значения в функцию addNextNum, т.е. getElementById не принимает значения в варианте из шапки.

//Функция добавления в ячейку

 function addNextNum(){
        var stat = document.getElementById("a0").innerHTML;
        stat = 1*stat+1*nextNum;
        if (stat==null) {
            stat=0;
        }
       console.log(stat);
        this.innerHTML = stat;
        setNextNum();
        nextNum = document.getElementById("nextNumDiv").innerHTML;
}
//Запуск функции добавления в Ячейку a0
    a0.onclick = addNextNum;
}

[William Thorn]

Разобрался, всем спасибо :)
Рабочий ,вариант:

//Функция добавления в ячейку
function addNextNum (num){
var b = document.getElementById(num);
var stat = 1*b.innerHTML+1*nextNum;
if (stat==null) {
stat=0;
}
b.innerHTML = stat;
setNextNum();
nextNum = document.getElementById("nextNumDiv").innerHTML;
}
//Запуск функции добавления в Ячейку a0
a0.onclick = function(){
addNextNum("a0");
}