Linking html <input> and <output> with JavaScript function

Question

So I have this code which basically does a simple math function but now I do not know how to link the <input> and the <output> tags with the JavaScript so that when users put a digit in <input> the script is run and the result is displayed in the <output> Any help is appreciated and please be helpful as I am still learning.

function computation(number) { 
  let newNumber = number + (1/100 * number) + 1000;
  let roundedNumber = Math.round(newNumber/100)*100;
  return roundedNumber;
}

<p>Enter Amount Here:</p>
<input type="text" name="value"></input>
<button class="button" onClick="computation()">Calculate!</button>
<p>Final Amount</p>
<div class="output">
    <output for="roundedNumber" name="finalAmount"></output>
</div>

use a script tag and in the src attribute give the path of the external JS file — Krishna Prashatt
– Krishna Prashatt, Commented Jul 4, 2018 at 10:08
@CoolJK basicaly i want when the number is input in the <input> then the script should run and the final answer should be given out in the <output> — Ally
– Ally, Commented Jul 4, 2018 at 10:12
@PaulH maybe not but the script should run when the input is made and the result should be given in the <output> — Ally
– Ally, Commented Jul 4, 2018 at 10:14

Deepesh kumar Gupta · Accepted Answer · 2018-07-04 12:59:34Z

2

Follow below simple steps. 1) Add ids to your input and output tags, just put same as name

<input type="text" name="value" id="value" />
<output for="roundedNumber" name="finalAmount" id="finalAmount"/>

2) use js document.getElementById("inputid").value

let num = document.getElementById("value").value

3) use the same way to set value. lets assume u want to show it in paragraph tag.

<p id="output"></p>
document.getElementById("output").innerHTML =newNum;

4) for active tags use .value instant of .innerHTML

answered Jul 4, 2018 at 12:59

Deepesh kumar Gupta

8962 gold badges12 silver badges31 bronze badges

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

1 Comment

Deepesh kumar Gupta Over a year ago

Please give some meaningful values to ur name and id attribute.

PaulH · Accepted Answer · 2018-07-04 11:25:55Z

1

First thing you are having number as a parameter to function but function is not getting it when you call it.So you can use

document.getElementById('id').value

to get the value. Have a look at this.

function computation() { 
  let number = document.getElementById('input1').value;
  let newNumber = number + (1/100 * number) + 1000;
  let roundedNumber = Math.round(newNumber/100) * 100;
  document.getElementById('output1').innerHTML = roundedNumber;
}

<p>Enter Amount Here:</p><br>
<input type="text" name="value1" id="input1">
<button class="button" onClick="computation()">Calculate!</button>
<p>Final Amount</p>
<div class="output">
<output for="roundedNumber" name="finalAmount" id="output1"></output>
</div>

edited Jul 4, 2018 at 11:25

PaulH

3,1392 gold badges19 silver badges34 bronze badges

answered Jul 4, 2018 at 10:24

Adesh Kumar

9804 gold badges17 silver badges37 bronze badges

1 Comment

Ally Over a year ago

That's a really nice solution although it doesn't do what I originally intended it but I think I can fix that. Thanks!

Collectives™ on Stack Overflow

Linking html <input> and <output> with JavaScript function

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