javascript - HTML 和 Javascript 方程式输入表单 [更新]

Question

原始问题: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。

我不是要任何人为我做我的工作，而是要帮助我。非常感谢我可以用来插入我进步的任何信息!

Answer 1

虽然 HTML5 允许编码人员自由使用 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>

请注意，由于不需要提交表单，我省略了所有表单元素的名称属性，而是在以下 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 的文本。

看直播 DEMO