如何从 <input> 而不是提示中获取值？答案

【问题标题】：How to get a value from an <input> rather than a prompt?如何从 <input> 而不是提示中获取值？
【发布时间】：2018-05-22 23:43:20
【问题描述】：

我正在尝试将圆柱计算器的表面积作为初学者项目。到目前为止，我只使用了 JavaScript 来制作它，并且运行良好。

var radius = prompt("What is the radius?");
var height = prompt("What is the height?");

var answer = 6.28*radius*radius+6.28*radius*height;

alert(answer);

我正在使用prompt 来获取变量，但是有什么方法可以使用 HTML <input> 标签而不是 prompt？

【问题讨论】：

您需要了解 DOM API 和事件。
How do I get the value of text input field using JavaScript?的可能重复
Java 之于 javascript 就像 Ham 之于仓鼠一样。

标签： javascript html math tags prompt

【解决方案1】：

首先，在 html 中创建一个简单的表单。 onkeyup="calculate() 部分表示每当onkeyup 事件发生时，它都会在javascript 中触发calculate() 函数。

然后，我们使用 javascript（不是 java！）进行计算。看代码上的cmets：

function calculate(){
var radius = document.getElementById("radius").value; //we get the radius
var height = document.getElementById("height").value; //we get the height

var answer = 6.28*radius*radius+6.28*radius*height; //same line you used before
document.getElementById("answer").innerHTML = answer; //we print the answer
}

<p>Radius:</p><input id="radius" type="number" onkeyup="calculate()">
<p>Height:</p><input id="height" type="number" onkeyup="calculate()">
<p>Answer:</p><p id="answer">

【讨论】：

【解决方案2】：

在html中创建两个文本框并添加一个按钮。

点击按钮，调用一个 javaScript 函数，该函数将获取文本框的值并计算音量。

类似于Add two numbers and display result in textbox with Javascript

据我从代码中了解到，您使用的是 JavaScript，而不是 Java。

【讨论】：

【解决方案3】：

使用 HTML 和 javascript 来实现。构建一个表单，然后使用这些值。在 HTML 正文中：

<form id="area-calculate" onsubmit="calculate()">
  radius: <input type="text" id="input1" placeholder="radius">
  height: <input type="text" id="input2" placeholder="height">
  <input type="submit" value="calculate">
</form>
<div id="answerPlaceHolder"></div>
<script>
  function calculate(){
    var radius = document.getElementById("input1").value;
    var height = document.getElementById("input2").value;
    var answer = 6.28*radius*radius+6.28*radius*height;
    document.getElementById("answerPlaceHolder").innerHTML = "the answer is: "+answer;
  }
</script>

【讨论】：

【解决方案4】：

使用创建两个文本字段用于输入

<input type=“text” id=“tf1”>
<input type=“text” id=“tf2”>

使用 JavaScript 调用函数并在里面做

var v1=document.getElementById(“tf1”).value
var v2=document.getElementById(“tf2”).value

现在变量 v1 和 v2 具有文本框的值

记住在函数内部调用 JavaScript 否则它会得到加载页面后立即为空值。（在按钮上使用 onclick）

【讨论】：