How to display result of addition in input-CodePudding

I am trying to make a simple calculator, that adds 2 numbers together with the press of a button. I have got the HTML part done, but I have no clue how to make the button add the numbers. I have tried using the event listener, but I was probably missing something. If you could, please write the script, while explaining the most important lines of code. Thank you!

<html>
<head>
    <title>A calculator... I guess?</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div >
    <div  style="margin: 100px 200px 0 200px">
        <!-- Inputs -->
        <p>1st number</p>
        <input type="number" id="one">
        <p>2nd number</p>
        <input type="number" id="two>">
        <!-- Button -->
        <br>
        <br>
        <button id="add">Calculate</button>
        <!-- Result -->
        <p>Result</p>
        <input type="text" id="result">
    </div>
</div>
<script>
     
</script>
</body>
</html>

CodePudding user response：

<html>
<head>
    <title>A calculator... I guess?</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
  
<body>
<div >
    <div  style="margin: 100px 200px 0 200px">
        <!-- Inputs -->
        <p>1st number</p>
        <input type="number" id="one">
        <p>2nd number</p>
        <input type="number" id="two">
        <!-- Button -->
        <br>
        <br>
        <button id="add" onClick={calculate()}>Calculate</button>
        <!-- Result -->
        <p>Result</p>
        <input type="text" id="result">
    </div>
</div>
 <script>
    var elementOne =document.getElementById('one');
    var elementTwo =document.getElementById('two');
   
   function calculate(){
     one = parseInt(elementOne.value)
     two = parseInt(elementTwo.value)
     document.getElementById('result').value = one   two;
   }
</script>
</body>
</html>

CodePudding user response：

The script is very easy, are u new to JS? The script is here below with explanation as you asked for -

//create the function which will run on button click
function calculate() {
  var firstNumber = document.getElementById("one").value; //Get the value of the first input and store it in firstNumber variable  
  var secondNumber = document.getElementById("two>").value; //Get the second one's now
  firstNumber = parseInt(firstNumber); //Convert both variables from string to integer for we get variables if string datatype when getting the value from an input
  secondNumber = parseInt(secondNumber);
  var result = firstNumber   secondNumber; //Add the 2 numbers and store the result in a variable
  document.getElementById("result").value=result; //Print the "result" variable in the input you want it to get printed in
}

<html>
<head>
    <title>A calculator... I guess?</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div >
    <div  style="margin: 100px 200px 0 200px">
        <!-- Inputs -->
        <p>1st number</p>
        <input type="number" id="one">
        <p>2nd number</p>
        <input type="number" id="two>">
        <!-- Button -->
        <br>
        <br>
        <button id="add" onclick="calculate()">Calculate</button> <!--Onclick attribute determines the function to run on click of the element the attribute is in-->
        <!-- Result -->
        <p>Result</p>
        <input type="text" id="result">
    </div>
</div>
<script>
     
</script>
</body>
</html>

CodePudding user response：

I adapted your html to contain a form. Forms are used for user interaction like entering numbers.

<html lang="en">
<head>
    <title>A calculator... I guess?</title>
    <script src="AddScript.js" rel="script"></script>
</head>
<body>
<div >
    <div  style="margin: 100px 200px 0 200px">
        <form >
        <!-- Inputs -->
            <label for="one">1st number</label><br>
        <input type="number" id="one" >
            <br>
        <label for="two">2nd number</label> <br>
        <input type="number" id="two">
        <!-- Button --><br>
            <br>
        <button id="add">Calculate</button>
            <br>
            <br>
        <!-- Result -->
        <label for="result">Result</label><br>
        <input type="text" id="result">
        </form>
    </div>
</div>
</body>
</html>

and the javascript. You need to use Number() to convert the text to integers

window.onload = init


function init(){
    const button = document.getElementById("add")
    button.addEventListener("click", addTwoNumbers)
}

function addTwoNumbers(e){
    e.preventDefault()
    const one = document.getElementById("one")
    const two = document.getElementById("two")

    const totalSum =  Number(one.value)   Number(two.value)

    const result  = document.getElementById("result")
    result.value = totalSum
}