Почему JS не выводит i в input?

Question

[Isadgoose]

Подскажите, почему не выводится значение i в инпут?

https://codepen.io/anon/pen/vqxpPr

Answer 1

[dollar]

Потому что у вас две ошибки:

Первая

Вы пишите onclick="add1". Это не работает, потому что при нажатии на кнопку вычисляется выражение в кавычках. А результатом выражения "add1" является функция. Обратите внимание, не вызов функции, а просто ссылка на функцию.
Следует писать так: onclick="add1()"

А вообще хочу заметить, что такой способ создания обработчика слегка морально устарел. По сути он приравнивается к использованию функции eval, а это скверно, не стильно и не модно.
Более правильный вариант убрать атрибут onclick, а в скрипте добавить обработчик примерно так:

var button = document.querySelector("button"); //как-то получаем указатель
button.addEventListener("click", add1); //добавляем сам обработчик

Вторая

Внутри функции add1 вы увеличивает глобальную переменную на единицу.
И переменная действительно увеличивается (если первая ошибка уже исправлена).
Однако это никак не отображается на странице.
Потому что переменная и значение инпута - не одно и то же.
Исправлением будет перенос операции копирования внутрь функции:

function add1(){
  i++;
  inp1.value = i;
}

Вот теперь копирование будет происходит при каждом вызове функции, а не только при загрузке страницы.

Comments

[Isadgoose]

А допустим если будет несколько функций и во всех будут действия связанные с i, то как тогда сделать?

[Isadgoose]

И должен быть вывод конечной i

[dollar]

Isadgoose, как-то сделать. Откуда же мне знать? Это уже ваша задача, с конкретными целями и требованиями к решению. На вопрос по языку JavaScript и языку разметки HTML я ответил. А задачи на Тостере запрещены.

[Isadgoose]

dollar, Ок, благодарю

Answer 2

[Andrey Suha]

Потому что вы его не выводите, функуция выполняется но она не подставляет значение в инпут. Другими словами вам нужно переопределять значение инпут внутри функции add