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;
}

multiply is not multiplyInt, also it does not expect any arguments ... — Jonas Wilms
– Jonas Wilms, Commented Mar 31, 2019 at 10:18

Maheer Ali · Accepted Answer · 2019-03-31 10:20:44Z

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 getElementsById 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>

Giorgi Kulijanishvili · Accepted Answer · 2019-03-31 10:18:44Z

0

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

answered Mar 31, 2019 at 10:18

Giorgi Kulijanishvili

114 bronze badges

1 Comment

Olaf Willner Over a year ago

I just changed that, but it still doesn't work, I'm not getting the output displayed. Thanks though

Collectives™ on Stack Overflow

How to display calculations from Javascript function onto HTML?

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