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

Question

我正在尝试制作圆柱体计算器的表面积作为初学者项目。到目前为止，我只使用了 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？

Answer 1

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

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

类似于

据我从代码中了解到，您正在执行 Java脚本，而不是 Java。

Answer 2

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

Answer 3

使用

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

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

使用JavaScript调用一个函数，里面do

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

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

Remember call the JavaScript inside the function else it will get empty value as soon as it loads the page.(use onclick on a button)

Answer 4

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

然后，使用java脚本（不是java！），我们计算。看代码评论：

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

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

How to get a value from an <input> rather than a prompt?

javascript

html

math

tags

prompt