CODEWITHSUNDEEP
javascripthtml
user604803
user604803

Reputation: 35

Button function call does not work?

I want a webpage that has something like this:

Welcome
[textbox] [textbox] [Multiply!]
Enter a value to multiply.

represented by this html code:

window.onload = function begin() {
  document.getElementById("demo").innerHTML = "Welcome";
}

function multiply(var1, var2) {
  document.getElementById('multiply').innerHTML = var1 * var2
}
<body onload="onload();">
  <p id='demo'> </p>

  <form>
    <input type='number' name=num1>
    <input type='number' name=num2>
    <button onclick=multiply(num1, num2)> Multiply! </button>
  </form>

  <p id='multiply'> Enter a value to multiply. </p>

</body>

Upvotes: 0

Views: 83

Answers (3)

return2
return2

Reputation: 1

<!DOCTYPE html>
  <html>
    <head>
      <title> Test </title>
    </head>

    <body>
        <form>
          <input type='number' id='num1'>
          <input type='number' id='num2'>
          <button type='button' onclick="multiply()"> Multiply! </button>
        </form>

        <p id='multiply'> Enter a value to multiply. </p>

    <script src="01_using_javascript.js"> </script>
    </body>
</html>

function multiply() {
    var numberOne = document.getElementById('num1').value;
    var numberTwo = document.getElementById('num2').value;
    var multiply = document.getElementById('multiply');
    var multipliedResult = numberOne * numberTwo;
    multiply.innerHTML = multipliedResult;
}

Upvotes: 0

Carl Binalla
Carl Binalla

Reputation: 5401

You lack " in onclick, and I changed the script. I also removed unnecessary elements. Just add them back in your codes

EDIT

I returned the <form> tag and added the type="button" attribute to prevent the form from submitting. Thanks to @Patrick Roberts and @Nick Tirrell for the information

function multiply() {
  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;
  document.getElementById('multiply').innerHTML = num1 * num2
}
<form>
  <input id="num1" type='number'>
  <input id="num2" type='number'>
  <button type="button" onclick="multiply()"> Multiply! </button>
  <p id='multiply'> Enter a value to multiply. </p>
</form>

Upvotes: 3

Ronnie Smith
Ronnie Smith

Reputation: 18585

give each input an id attribute then use that to get the value(s) to multiply, e.g. document.getElementById("my-id-1").value. Also, use a basic 

doc.getElementById("my-button").addEventListener('click', function(evt) {
    //do your thing.
});

Upvotes: 0

Related Questions