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标签之外使用输入的自由，但该输入仍然是该表格的一部分，需要在＆＃34;表格中识别表格。输入的属性。使用表单之外的输入而不进行如此识别在语义上是不正确的。 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（）返回对象文字中的级别和秒数，它保持代码整洁，并避免为数据创建单独的变量。

注意，改进了＆＃34;重置＆＃34;功能;它会重置输入值并清除答案。

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

查看实时 DEMO

Answer 2

为什么不这样做？

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

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

将它放在一个函数中并在表单提交上调用该函数。

Answer 3

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

<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("answer").value = answer.toString();
}
</script>

Level: <input type="text" id="level">
<br>
Seconds: <input type="text" id="seconds">
<br>
Answer: <input type="text" id="answer" />
<br>
<button type="button" onclick="javascript:calc();">Click</button>

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

Answer 4

不幸的是，解释你需要做的最简单的方法就是实际做到这一点......

首先，由于您实际上并未将表单数据提交到服务器，因此只需删除<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();
}

最后，我们必须将click事件与该按钮挂钩。因为我是不引人注目的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);
};

查看实际操作：DEMO

HTML＆amp; Javascript方程输入表[更新]

4 个答案: