Как сделать так, чтобы JavaScript (включая функцию с массивом и возвратом) записывал в div по нажатию кнопки, не переходя на другую страницу?

Question

У меня было много проблем с этой проблемой.Когда я console.log(sum); получаю ответ, который я ищу, но когда я пытаюсь вывести ответ от нажатия кнопки и поля ввода, он не работает.Я изменил felt3.innerHTML=addnumber(ttt); на document.write(addnumber(ttt));, что заставило его работать, но оно отправляет его на другую страницу, чего я не хочу.Как я могу сделать эту работу:

<form id="form3">
  Tall:<input type="number" id="number"><br>
  <input type="button" id="button3" value="plusse"><br>
</form>
<div id="felt3"></div>

и:

var number = document.getElementById("number");

var felt3 = document.getElementById("tall3");

var form3 = document.getElementById("form3");

var button3 = document.getElementById("button3");

var sum=0;

function addnumber(x){
  var array = [];
  array.push(x);
  for (var i = 0; i < array.length; i++) {
      sum=sum+array[i];
  }
  return sum;
}

button3.onclick=function(){
  var ttt=Number(number.value);
  felt3.innerHTML=addnumber(ttt);
}

Answer 1

Если я правильно понимаю ваш вопрос, то здесь решение состоит в том, чтобы обновить аргумент, который вы передаете, на getElementById("tall3"), переписав его на document.getElementById("felt3");.

В результате этого ваш скрипт получитссылка на элемент div с идентификатором felt3.Когда ваш обработчик событий onclick будет выполнен, результат addnumber() будет присвоен innerHTML действительной ссылки felt3 DOM, как требуется:

var number = document.getElementById("number");

// Update this line to use "felt3"
var felt3 = document.getElementById("felt3"); 

var form3 = document.getElementById("form3");

var button3 = document.getElementById("button3");

var sum=0;

function addnumber(x){
  var array = [];
  array.push(x);
  for (var i = 0; i < array.length; i++) {
      sum=sum+array[i];
  }
  return sum;
}

button3.onclick=function(){
  var ttt=Number(number.value);
  
  // Seeing that felt3 is now a valid reference to 
  // a DOM node, the innerHTML of div with id felt3
  // will update when this click event is executed 
  felt3.innerHTML=addnumber(ttt);
}

<form id="form3">
  Tall:<input type="number" id="number"><br>
  <input type="button" id="button3" value="plusse"><br>
</form>
<div id="felt3"></div>