使用< form>和<输入>元素作为JavaScript代码的输入。这是做这件事的最好方法吗？ [英] Using <form> and <input> elements as an input for JavaScript code. Is this the best way to do this?
问题描述
伙计们，
我是编程的新手，很显然，所以最近完成了一些关于HTML和Javascript的Lynda课程，我用简单的HTML页面打了一堵墙。基本上，我想要的是使用JavaScript进行基本计算，让用户使用HTML form / input 元素输入两个数字，并对JS进行基本的算术计算。由于某些原因，代码无法正常工作。为什么这些输入值没有被JS读取，有人能指出我正确的方向吗？ getElementById 是正确的方式吗？
另外，我使用console.log来放弃结果，因为我还不知道如何将它作为提交按钮下方的文本显示在HTML页面中。
HTML代码
<！DOCTYPE html>
< html>
< head>
< title>精确质量误差计算器< / title>
< / head>
< body>
< h1>精确质量误差计算器< / h1>
< p>请为每个字段输入以下值：< / p>
< form onsubmit =return calculateError（）method =post>
< p>精确的理论质量：< input id =exactMasstype =numberstep =anyname =exactMass/>< / p>
< p>准确实验质量：< input id =accurateMasstype =numberstep =anyname =accurateMass/>< / p>
< p> < input id =submitButtontype =submitname =submit1value =Calculateonclick =return calculateError（）/>< / p>
< / form>
< script type =text / javascriptsrc =ppmError.js>< / script>
< / body>
< / html>
JS代码（ppmError.js）：
function calculateError（）{
var exactMass = document.getElementById（exactMass）;
var accurateMass = document.getElementById（accurateMass）;
var ppmError =（accurateMass.value-exactMass.value）/exactMass.value*1000000;
if（isNaN（ppmError））{
console.log（Not a valid Entry！Please try again。）
} else {
console.log（ppmError）;
Satpal在评论中说，你确实应该将你的文本转换为int：
var exactMass = parseInt（document.getElementById（ exactMass）值）。
var accurateMass = parseInt（document.getElementById（accurateMass）.value）;
var ppmError =（accurateMass-exactMass）/ exactMass * 1000000;
对于您的其他问题，请在您的html中添加一个空白段落， p>
< p id =result>< / p>
而不是调用 console.log ，您可以这样做：
document.getElementById（'result'）。innerHTML = ppmError;
Folks, I am newbie to coding, obviously, so having completed few Lynda courses recently on HTML and Javascript, I have hit a wall with my simple HTML page. Basically, what I want is to do a basic calculation with JavaScript to have the user enter the two numbers using HTML form/ input elements and do a basic arithmetic calculation on JS. For some reason the code is not working. Can somebody point me to the right direction as why those input values are not being read by JS? Is getElementById the correct way?
Also, I am using the console.log to dislpay the results as I don't know yet how to have it displayed on the HTML page as a text below the submit button.
The HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Accurate Mass Error Calculator</title>
</head>
<body>
<h1> Accurate Mass Error Calculator </h1>
<p> Please enter the values below for each field:</p>
<form onsubmit="return calculateError()" method="post">
<p> Exact Theoretical Mass: <input id="exactMass" type="number" step="any" name="exactMass"/></p>
<p> Accurate Experimental Mass: <input id="accurateMass" type="number" step="any" name="accurateMass"/></p>
<p> <input id="submitButton" type="submit" name="submit1" value="Calculate" onclick="return calculateError()" /></p>
</form>
<script type="text/javascript" src="ppmError.js"></script>
</body>
</html>
The JS code(ppmError.js):
function calculateError () {
var exactMass=document.getElementById("exactMass");
var accurateMass=document.getElementById("accurateMass");
var ppmError=(accurateMass.value-exactMass.value)/exactMass.value*1000000;
if (isNaN (ppmError) ) {
console.log ("Not a valid Entry! Please try again.")
} else {
console.log(ppmError);
}
}
As Satpal said in the comment you should indeed cast your text to an int with :
var exactMass = parseInt(document.getElementById("exactMass").value);
var accurateMass = parseInt(document.getElementById("accurateMass").value);
var ppmError=(accurateMass-exactMass)/exactMass*1000000;
For your other question, in your html add an empty paragraph where you want to display your result
<p id="result"></p>
And instead of calling console.log you can do :
document.getElementById('result').innerHTML = ppmError;
这篇关于使用< form>和<输入>元素作为JavaScript代码的输入。这是做这件事的最好方法吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
