HTML和Javascript公式输入表单[增订]

Question

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

我现在知道，询问具体的事情是令人难以接受的。现在我明白了，我不知道为什么我会想有人会为我做我的工作...

反正我对HTML/Javascript比较新，如果可能，我希望能帮助完成此工作。 ..

我需要一种方式让用户通过HTML表单输入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

为什么不这样做呢？

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

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

把它放在一个函数中，并在表单提交时调用该函数。

Answer 2

您可以在客户端做的一切：

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

不幸的是，解释你需要做的最简单的办法就是真正做到这一点...

首先，因为你没有实际提交表单数据到服务器，刚刚摆脱了<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); 
}; 

看到它在行动：DEMO

Answer 4

尽管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> 

注意，因为表单提交是不必要的，我省略了所有的表单元素的name属性，而是由他们的id属性访问输入值以下JavaScript：

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