Вместо ответа появляется “[object HTMLParagraphElement][object HTMLParagraphElement]”

215

02 марта 2019, 18:50

Я новичок, создаю простой калькулятор.

Есть кнопка =, при нажатии на которую срабатывает функция rez().

<button onclick="rez()">=</button>

Сама функция выглядит так:

function rez(){
  var num1, num2, znak, result;
    num1 = document.getElementById("out");
    num2 = document.getElementById("out2");
    znak = document.getElementById("out1");
    result = num1 + num2;
    stroka = document.getElementById("out3");
    stroka.innerHTML += result;
}

И когда я нажимаю знак =, вместо того, чтобы писать ответ, появляется вот такая строка:

[object HTMLParagraphElement][object HTMLParagraphElement]

Пожалуйста, помогите решить!!! Уже 2 часа не могу решение найти!

Напишите ответ простым языком, если это возможно, а то я не сильно в этом разбираюсь))

Answer 1

function rez(){
    var num1, num2, znak, result;
    num1 = +document.getElementById("out").textContent;
    num2 = +document.getElementById("out2").textContent;
    znak = document.getElementById("out1").textContent;
    result = num1 + num2;
    stroka = document.getElementById("out3");
    stroka.innerHTML += result;
}

Answer 2

Функция getElementById возвращает html элемент.

При сложении result = num1 + num2; выбранные элементы приводятся к строке, и так как это параграфы получилось [object HTMLParagraphElement][object HTMLParagraphElement]

для решения нужно взять содержимое этих элементов: textContent, либо innerHTML и привести к числам, например используя функцию Number

В итоге получится:

num1 = Number(document.getElementById("out").innerHTML);
num2 = Number(document.getElementById("out2").innerHTML);

Answer 3

function rez(){
  var num1, num2, znak, result, stroka;
    num1 = document.getElementById("out");
    num2 = document.getElementById("out2");
    znak = document.getElementById("out1");
    result = num1 + num2;
    stroka = document.getElementById("out3");
    stroka.innerHTML += result;
}

Ты не сделал var для stroka