How to display calculations from Javascript function onto HTML?

Question

I can't get my script to make simple calculations, and display them to the HTML doc. Essentially, I want to display the calculations made by the function, which takes the p and q variables from the HTML form.

I've tried many different solutions but I still can't fix it. I added parseInt() to my variables, etc. but with no luck.

Here is the HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RSA GUI</title>
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,400i,500,600,700&amp;subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
<script type="text/javascript" src="RSA.js"></script>
</head>
<body>
 <div class="container">
  <div class="titles">
   <h1>RSA</h1>
   <h2>Inputs</h2>
   </div>
  <form class="form">

  <div class="group">
    <input type="text" required name="data">
    <span class="bar2"></span>
    <span class="bar"></span>
    <label>Data</label>
  </div>

  <div class="group">
    <input type="number" required id="num1">
    <span class="bar2"></span>
    <span class="bar"></span>
    <label>Prime Number</label>
  </div>

  <div class="group">
    <input type="number" required id="num2">
    <span class="bar2"></span>
    <span class="bar"></span>
    <label>Second Prime Number</label>
  </div>
  <button type="button" onlick="multiplyInt()">Calculate</button>
  <p id = "output"></p>
 </form>
</div>
</body>

And here is the JS :

function multiplyInt() {
  var p = document.getElementsById("num1").value;
  var q = document.getElementsById("num2").value;
  var calc = p*q;
  document.getElementById("output").innerHTML = calc;
}

Answer 1

There are some problems

You are using onlick instead of onclick
You are setting onclick="multiply(p,q)" it should onclick="multiplyInt()"
In your function you are using getElement s ById it should be getElementById

 function multiplyInt() { var p = document.getElementById("num1").value; var q = document.getElementById("num2").value; var calc = p*q; document.getElementById("output").innerHTML = calc; }

 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>RSA GUI</title> <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,400i,500,600,700&amp;subset=latin-ext" rel="stylesheet"> <link rel="stylesheet" href="stylesheet.css"> <script type="text/javascript" src="RSA.js"></script> </head> <body> <div class="container"> <div class="titles"> <h1>RSA</h1> <h2>Inputs</h2> </div> <form class="form"> <div class="group"> <input type="text" required name="data"> <span class="bar2"></span> <span class="bar"></span> <label>Data</label> </div> <div class="group"> <input type="number" required id="num1"> <span class="bar2"></span> <span class="bar"></span> <label>Prime Number</label> </div> <div class="group"> <input type="number" required id="num2"> <span class="bar2"></span> <span class="bar"></span> <label>Second Prime Number</label> </div> <button type="button" onclick="multiplyInt()">Calculate</button> <p id = "output"></p> </form> </div> </body>

Answer 2

Your button onclick function has invalid name. It should be multiplyInt instead of multiply(p,q)

How to display calculations from Javascript function onto HTML?

Question

2 answers

solution1
1 ACCPTED 2019-03-31 10:20:44

solution2
0 2019-03-31 10:18:44

How to display calculations from Javascript function onto HTML?

Question

2 answers

solution1 1 ACCPTED 2019-03-31 10:20:44

solution2 0 2019-03-31 10:18:44

solution1
1 ACCPTED 2019-03-31 10:20:44

solution2
0 2019-03-31 10:18:44