html output tag doesn't display output

Question

I have initial values displaying in the fields and want the initial total of the calculated value to display.

The total only displays once a field is modified. I am guessing because it reacts to oninput event.

Code:

<form id="form" oninput="result.value = parseInt(field1.value) + parseInt(field2.value)">
    <input type="number" name="field1" id="field1" value="600">
    <input type="number" name="field2" id="field2" value="200">
    Total <output name="result" id="result" value="document.write(this.result.value)">
    </output>
</form>

I could type 800 inside the output tag, but I want it to be dynamic.

Daniel Beck · Accepted Answer · 2018-08-18 15:39:14Z

2

Your document.write isn't doing anything useful (it's basically saying "set this attribute to the value of this attribute") and can be removed; rather than writing the value into the HTML you can just set the form field's value attribute in js.

Here I've simplified your code by removing the nonessential or nonfunctional parts, moving the javascript out of the HTML attributes, and combining the "initialize" and "update" tasks into a single function:

// these happen implicitly based on the field IDs; I'm redeclaring 
// them here just for clarity, but you could leave these next four 
// lines out and this code would still work:
var result = document.getElementById('result')
var field1 = document.getElementById('field1');
var field2 = document.getElementById('field2');
var form   = document.getElementById('form');

// update value on input:
form.oninput = function() {
  // use Number() instead of parseInt() if you want to support non-integer values here
  result.value = parseInt(field1.value) + parseInt(field2.value);  
}

// set initial value on page load by calling that function:
form.oninput()

<form id="form">
  <input type="number" id="field1" value="600">
  <input type="number" id="field2" value="200"> 
  Total <output id="result"></output>
</form>

answered Aug 18, 2018 at 15:39

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lid Over a year ago

Thanks, this worked, and looks neater than my first attempt.

zb22 · Accepted Answer · 2018-08-18 15:04:49Z

2

You can use document.getElementById() and specify the id of the input fields.

Because the value for the input fields is a string, you need to convert to those values to type Number by the Number() function.

let value1 = Number(document.getElementById('field1').value);
let value2 = Number(document.getElementById('field2').value);

result.value = value1 + value2;

<form id="form" oninput="result.value=parseInt(field1.value)+parseInt(field2.value)">
<input type="number" name="field1" id="field1" value="600">
<input type="number" name="field2" id="field2" value="200">
Total <output name="result" id="result" value="document.write(this.result.value)"></output>
</form>

You can read more info about document.getElementById() and Number()

edited Aug 18, 2018 at 15:04

answered Aug 18, 2018 at 14:55

zb22

3,2413 gold badges22 silver badges38 bronze badges

1 Comment

Lid Over a year ago

Thank you this worked. I picked the below answer because its less typing.

Collectives™ on Stack Overflow

html output tag doesn't display output

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related