How to set paragraph to textbox text

Question

Let us say I have an HTML form, with two textboxes, I want to add the two numbers in the two textboxes and display the result in a paragraph. How can I do that?

Change paragraph according to textbox is what I can't find!

http://stackoverflow.com/questions/11961474/how-to-sum-two-numbers-from-input-tag — adeneo, Oct 06 '16 at 15:56

score 1 · Accepted Answer · answered Oct 06 '16 at 16:12

Very simple:

document.getElementById('sum').onsubmit = add;

function add(e) {
  e.preventDefault();
  var num1 = document.getElementById('num1').value;
  var num2 = document.getElementById('num2').value;
  var result = 'Result: ' + String(parseInt(num1) + parseInt(num2));
  var p = document.getElementById('result');
  p.innerHTML = result;
}

<form id="sum">
  <label for="num1">First number:</label>
  <br />
  <input type="text" id="num1" />
  <br />
  <label for="num1">Second number:</label>
  <br />
  <input type="text" id="num2" />
  <br />
  <input type="submit" value="Add" />
</form>

<p id="result">Result:</p>

In the html we have a form with 3 inputs, 2 are type text and one is type submit. and also a paragraph.

In the javascript we assign to the form's onsumbit event the function add(), in the function we prevent the default so the form wont refresh the page, then we get the 2 values that were inputed, create a string that would contain the sum of those values and set the paragraph's innerHTML to it.

score 0 · Answer 2 · answered Oct 06 '16 at 16:08

Create a calculator function and then you can fire it on keyup or you can assign it to a button if you'd like.

function calcTotal(){
  var inputs = document.getElementsByTagName('input'),
      result = 0;
  for(var i=0;i<inputs.length;i++){
    if(parseInt(inputs[i].value))
      result += parseInt(inputs[i].value);
  }
  document.getElementById('total').innerHTML = 'Total: ' + result;
}

<form>
  <input onkeyup="calcTotal()" type="text" />
  <input onkeyup="calcTotal()" type="text" />
</form>

<p id="total"></p>

score 0 · Answer 3 · answered Oct 06 '16 at 16:22

follow bellow JS code:

<html>
  <head>
        <title>Sum Two Number</title>
        <script language="javascript">
                function addNumbers()
                {
                        var val1 = parseInt(document.getElementById("value1").value);
                        var val2 = parseInt(document.getElementById("value2").value);

                        if(val1 !== "" && val2 !== "") {
                            var result = val1 + val2;
                            document.getElementById('result').innerHTML = result;  
                        }                       
                }
        </script>
  </head>
  <body>
        value1 = <input type="text" id="value1" name="value1" value="0" onkeyup="javascript:addNumbers()"/>
        value2 = <input type="text" id="value2" name="value2" value="0" onkeyup="javascript:addNumbers()"/>
        <p>Answer = <span id="result"></span></p>
  </body>
</html>

score -1 · Answer 4 · edited Oct 06 '16 at 16:08

In this example, you have a form with 2 input. When you press on a button, the value of those 2 input is added inside a paragraph.

Hope this help.

function addInputContentToParagraph() {
  var txtValue1 = document.getElementById('textbox1').value;
  var txtValue2 = document.getElementById('textbox2').value;
  
  document.getElementById('para').innerHTML = txtValue1 + ' ' + txtValue2;
}

a {
  cursor:pointer;
  border:1px solid #333;
  padding:4px;
  margin:10px;
  display:inline-block;
}

<form id="myForm" name="myForm">
  <input type="text" name="textbox1" id="textbox1" value="1">
  <input type="text" name="textbox2" id="textbox2" value="2">
</form>
<a onclick="addInputContentToParagraph();">Add Input Values to Paragraph</a>
<p id="para"></p>

How to set paragraph to textbox text

4 Answers4