HTML & Javascript Equation Input Form [UPDATED]

HTML & Javascript Equation Input Form [UPDATED]

本文关键字：Form UPDATED Input Equation amp Javascript HTML      更新时间：2023-09-26

原始问题：https://stackoverflow.com/questions/27855288/html-javascript-equation-input-form

我现在知道，具体要求事情是不受欢迎的。现在我看到了这一点，我不知道为什么我曾经想过有人会为我做我的工作......

无论如何，我对HTML/Javascript相对较新，如果可能的话，我希望帮助完成此操作...

我需要一种让用户通过 HTML 表单输入 2 个不同变量的方法。提交表单后，2 个变量将被放入等式中（在 JavaScript 端），并且将有一个 HTML 输出。

变量：

L = Level
S = Seconds

方程：

( 10 ( 3 + ( L * 0.5 ) ) * S ) / 60

到目前为止，这就是我想出的...

<form>
Level: <input type="text">
<br>
Seconds: <input type="text">
<br>
<input type="submit">
<form>

我所知道的只是基本的HTML。

我

不是要求任何人为我做我的工作，而是帮助我。任何我可以用来促进我的进步的信息将不胜感激！

虽然HTML5允许编码人员自由使用FORM标签之外的输入，但该输入仍然是该表单的一部分，需要在输入的"form"属性中标识表单。 在表单之外使用输入而不被识别在语义上是不正确的。OP 选择使用 FORM 是有意义的。在这种特殊情况下，无需提交即可使用该表单。 我建议以下 HTML，您可以根据需要设置样式：

<form>
  <div id="container">
   <label for="L">Level:</label><div><input id="L" type="text"></div>
   <label for="S">Seconds:</label><div><input id="S" type="text"></div>
   <label for="result">Answer: <span   id="result"></span></label>  
  </div>
  <input id="Calculate" type="button"  value="Calculate">
  <input id="reset" type="reset">  
</form>

请注意，由于表单提交是不必要的，因此我省略了所有表单元素的 name 属性，而是在以下 JavaScript 中通过其 id 属性访问输入值：

function getLevelSeconds() {
   var L = f.elements[0].value;          
   var S = f.elements[1].value;
   return { "level" : L,"seconds" : S };
}
function Calc( obj ) {
    var equation = 10 *( 3 + ( obj.level * 0.5 ) );
    equation *= obj.seconds;
    return ( equation /= 60 );
}
function focSelLevel(){
   f.elements[0].select();
   f.elements[0].focus();
}
/** START HERE **/
var d = document;
var f = d.forms[0];
var button = d.getElementById("Calculate");
var result = d.getElementById("result");
var reset  = d.getElementById("reset");
button.onclick = function() {
  var obj = getLevelSeconds();
  result.innerText = Calc( obj );
};
reset.onclick = function() {
   result.innerText = "";
   focSelLevel();
};
window.onload = function() {
  focSelLevel();
};

函数 getLevelSeconds（） 返回对象文字中的级别和秒数，以保持代码整洁并避免为数据创建单独的变量。

请注意，改进的"重置"功能;它重置输入值并清除答案。

此代码利用闭包和事件属性属性来获取用户输入并将其合并到指示的公式中。评估后，答案将变为可见，作为用户的结果 SPAN 的文本。

观看现场演示

为什么不直接这样做呢？

为您的输入分配 ID，您就可以开始了！

var L = parseFloat(document.getElementById("L").value),
    S = parseFloat(document.getElementById("S").value),
    result = ( 10 * ( 3 + ( L * 0.5 ) ) * S ) / 60;

将其放入函数中，并在表单提交时调用该函数。

您可以在客户端执行所有操作：

<script type="text/javascript">
function calc() {
    var level = document.getElementById("level");
    var levelValue = parseFloat(level.value);
    var seconds = document.getElementById("seconds");
    var secondsValue = parseFloat(seconds.value);
    var answer = (10 * (3 + (levelValue * 0.5)) * secondsValue) / 60;
    document.getElementById("answerswer").value = answer.toString();
}
</script>
Level: <input type="text" id="level">
<br>
Seconds: <input type="text" id="seconds">
<br>
Answer: <input type="text" id="answerswer" />
<br>
<button type="button" onclick="javascript:calc();">Click</button>

不要忘记包含一些错误检查代码！

不幸的是，解释你需要做什么的最简单方法是实际去做......

首先，由于您实际上并没有将表单数据提交到服务器，因此只需删除<form>元素即可。您还需要命名/标识您的输入元素，以便我们稍后在 JavaScript 中访问它们。由于我们不提交表单，因此请将提交按钮更改为简单的<button>元素以启动计算。这给我们留下了以下 HTML：

Level: <input id="calc-level" type="text">
<br>
Seconds: <input id="calc-seconds" type="text">
<br>
<button id="do-calculate" type="button">Calculate</button>
<br>
Answer: <input id="calc-answer" type="text">

现在我们需要编写一些JavaScript。首先，让我们定义一个可以解方程的函数：

function solve(level, seconds) {
    return (10 * (3 + (level * 0.5)) * seconds) / 60;
}

请注意，我不会称之为solve.我不知道你的输出代表什么，但你应该给它起一个像solveForAwesomenessIndex这样的名字，或者一些让你的求解变得显而易见的东西。

下一步是创建一个将对按钮单击做出反应的函数。它将解析输入，进行计算，并输出结果：

function handleCalculate() {
    var level = parseFloat(document.getElementById('calc-level').value);
    var seconds = parseFloat(document.getElementById('calc-seconds').value);
    var answer = solve(level, seconds);
    document.getElementById('calc-answer').value = answer.toString();
}

最后，我们必须将点击事件挂接到该按钮。因为我是低调JavaScript的支持者，所以我们不会添加任何内联事件处理程序（没有混合的HTML/JavaScript），所以我们以编程方式进行事件处理：

window.onload = function() { // when the window has loaded
    // Assign the handleCalculate method to the button's click event
    document.getElementById('do-calculate').addEventListener('click', handleCalculate);
};

查看实际操作：演示

相关文章：