Question

我无法让我的脚本进行简单的计算，并将其显示在HTML文档中。本质上，我想显示该函数进行的计算，该函数采用HTML表单中的p和q变量。

我尝试了许多不同的解决方案，但仍然无法解决。我将parseInt（）添加到变量等中，但是没有运气。

这是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>

这是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

有一些问题

您使用的是onlick而不是onclick
您正在设置onclick="multiply(p,q)"，onclick="multiplyInt()"
在您的函数中，您使用的是getElement s ById，它应为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

您的按钮onclick函数名称无效。应该是multipleInt，而不是multiple（p，q）

如何显示从Javascript函数到HTML的计算？

2 个答案: