Как выводить разные значения вычислений на javascript в html документе?

Question

[Илья Паршаков]

Здравствуйте, помогите пожалуйста разобраться.
Делаю простенький калькулятор, не могу понять как вывести значения в ячейках таблицы:

<form method="POST" action="">
<table>
<tr><td>Введите числа A:</td>
<td><input type="text"  name="a" id="a" /></td></tr>

<tr><td>Введите числа B:</td>
<td><input type="text"  name="b" id="b" /></td></tr>

<tr><td>Произведение A*B:</td>
<td name="result" id="result1"></td></tr>

<tr><td>Введите числа C:</td>
<td><input type="text"  name="c" id="c" /></td></tr>

<tr><td>Введите числа D:</td>
<td><input type="text"  name="d" id="d" /></td></tr>

<tr><td>Сумма C+D:</td>
<td name="result2" id="result"></td></tr>
</table>
<input type="button" name="button" id="button" onclick="kalk()" value="Считать" />
</form>

function  kalk(){
var n1=document.getElementById('a').value
var n2=document.getElementById('b').value
var n3=document.getElementById('c').value
var n4=document.getElementById('d').value

n1=parseFloat(n1)
n2=parseFloat(n2)
n1=parseFloat(n3)
n2=parseFloat(n4)

var r=0
    
r1=n1*n2
r2=n3+n4
    
document.getElementById("result1").value=r1
document.getElementById("result2").value=r2
}

На всякий случай https://jsfiddle.net/leep0o/31amy6xc/

Comments

[Роман Макаров]

вешать обработчики внутри html - плохая практика, т.к. читая код (js) вы и понятия не имеете, что функция kalk висит на клике.
document.querySelector('#button').onclick = kalk;

[Илья Паршаков]

Роман Макаров: Спасибо!

Answer 1

[Алексей]

Перенес ваш пример в codepen и поправил - codepen.io/anon/pen/ONOxjX?editors=1111
У вас во-первых id неправильно у второй ячейки указан, во-вторых опечатка в районе parseFloat - n1, n2, n1, n2 вместо n1, n2, n3, n4, в-третьих в конце надо innerHTML вместо value, так как это не поле ввода.
Почему-то в jsfiddle код не работает - функция не существует.
Ну и конечно выше верно заметили - это все хорошо, но не современно.

Comments

[Илья Паршаков]

А подскажите еще пожалуйста, если мне нужно значение вывести ни просто в , а после текста, то есть: Сложение -значение-. Как можно это сделать?

[Алексей]

Вариант 1: .....innerHTML = "Сложение " + n
Вариант 2: в html написать <p>Сложение <span id="result"></span></p>
, а в js коде уже ...getElementById('result').innerHTML = n;

[Илья Паршаков]

Алексей: Спасибо большое за помощь!

Answer 2

[Дмитрий Беляев]

Во-первых у второго поля результата перепутаны местами значения атрибутов name и id
Во-вторых, свойство value есть только у элементов формы, для записи в ячейку используйте innerHTML

Comments

[Алексей]

Там все серьезнее - при клике на кнопку - ReferenceError: kalk is not defined

[Дмитрий Беляев]

Алексей: да, по-хорошему надо еще добавить, что вешать обработчики через атрибуты тегов плохо, это будет уже в-третьих

[Илья Паршаков]

Спасибо большое за помощь!