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