javascript onclick function is not working

Question

i tried this code in vs 2017 but it is not working. i cant console the total and other text variables but i am unable to populate the results in the text box.

function myFunction1() {

  var text1 = document.getElementById("txt1").value;
  console.log(text1)
  var text2 = document.getElementById("txt2").value;
  var text3 = document.getElementById("txt3").value;
  var text4 = document.getElementById("txt4").value;
  var total1 = parseFloat(text1) + parseFloat(text2) + parseFloat(text3) + parseFloat(text4);
  console.log(total1)

  document.getElementById("txt1").innerHTML = total1;
}

<input type="text" id="txt1" />
<input type="text" id="txt2" />
<input type="text" id="txt3" />
<input type="text" id="txt4" />
<input type="text" id="total" />

<input type="submit" onclick="myFunction1()" />

What is happening when you are clicking it?Open browser console and see the error. — brk, Mar 18 '19 at 16:19
Possible duplicate of: https://stackoverflow.com/questions/7609130/set-the-value-of-an-input-field — Ludovic Feltz, Mar 18 '19 at 16:23
Possible duplicate of [Set the value of an input field](https://stackoverflow.com/questions/7609130/set-the-value-of-an-input-field) — tremor, Mar 18 '19 at 16:24

Maheer Ali · Answer 1 · 2019-03-18T16:31:55.980

1

Use value instead of innerHTML on your result input. Because input elements doesn't have innerHTML

document.getElementById("monthlyAmount").value = total1

innerHTML means HTML between starting and ending tag of element.As <input> elements doesn't have closing tag so it has no innerHTML

edited Mar 18 '19 at 16:31

answered Mar 18 '19 at 16:22

Maheer Ali

35,834
5
42
73

score 0 · Answer 2 · answered Mar 18 '19 at 16:21

0

You should use value to set the text in your input:

document.getElementById("monthlyAmount").value = total1;

answered Mar 18 '19 at 16:21

Ludovic Feltz

11,416
4
47
63

javascript onclick function is not working

2 Answers2