时间戳

首页 > 解决方案 > 如何将 Javascript 函数的计算结果显示到 HTML 上？

javascript - 如何将 Javascript 函数的计算结果显示到 HTML 上？

问题描述

我无法让我的脚本进行简单的计算，并将它们显示到 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;
}

标签： javascripthtml

解决方案

有一些问题

  • 您正在使用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>

推荐阅读