平行四邊形函數的區域，javascript

Question

<h2>Area of a Parallelogram (A = base * height)</h2> 
    <form> 
    <label class = "left">Base: </label> <input id = "parallelogramAreaBase" type = "text" class = "right" /> <br />  
    <label class = "left">Height: </label> <input id = "parallelogramAreaHeight" type = "text" class = "right" /> <br /> 
    <label class = "left">Answer: </label> <input id = "answerAreaParallelogram" type = "text" class = "right" /> <br /> 
    <input type = "submit" value = "Submit" onclick = "areaParallelogramFunction(); return false" /> 
    </form> 

function areaParallelogramFunction(base, height) 
{ 
    base = document.getElementById("parallelogramAreaBase").value; 
    height = document.getElementById("parallelogramAreaHeight").value; 
    var answer = base * height; 
    document.getElementById("answerAreaParallelogram").value = answer; 
} 

我不確定這段代碼不工作的原因。這似乎是一個簡單的程序，請幫助。

Answer 1

我知道這是一個答案塊，但我想利用這個空間，爲你提供一些學習，而不是因爲它代表解決您的問題。這個新的解決方案應該使你的正確結果更清楚（希望）。

我開始不斷改變你的HTML非常輕微：

<h2>Area of a Parallelogram (A = base * height)</h2> 
<form id="areaForm"> 
    <label class="left">Base: </label> <input name="base" type="text" class="right" /><br />  
    <label class="left">Height: </label> <input name="height" type="text" class="right" /><br /> 
    <input type="submit" value="Solve" /><br /> 
    <label class="left">Answer: </label> <input name="answer" type="text" class="right" disabled /> 
</form> 

那麼我怎麼改變？首先，您可能會注意到我在按鈕後面放置了答案。這是我的一種風格選擇，因爲答案不是表格的一部分，而是一個顯示結果的地方。也不是我加了disabled它。這是因爲用戶不應該能夠編輯答案，答案是由程序呈現的，而不是可編輯的字段。

你會注意到的另一件事是那些令人難以置信的長，描述性ID不在了，而是短名。這些名字將在JavaScript中扮演一個角色，並會讓我們的生活變得更輕鬆。另請注意，我在描述表單的表單中添加了一個id。這也適用於表單中的字段。 areaFormbase字段在這裏只有一個含義，不需要areaFormBaseValue或類似的樣式名稱。

接下來是JavaScript。

// Let's fetch the form to begin with, we'll be using it. 
// Notice the use of 'var', ALWAYS use 'var' when you 
// create a new variable. ALWAYS. 
var form = document.getElementById("areaForm"); 

// Let's add the event a much better way, mingling logic 
// (javascript) in your HTML is considered bad practice. 
form.onsubmit = function() { 
    // We chain the var statement with a comma, this is the 
    // exact same as making two seperate var statements. 
    // Now you can see we also calculate the result in this var 
    // statement. 
    var base = parseFloat(form.base.value), 
     height = parseFloat(form.height.value), 
     answer = base * height; 

    form.answer.value = answer; 

    // We return false here to prevent the form to be submitted naturally 
    return false; 
}; 

我刪除參考函數調用組成HTML - 這是現代網絡的發展令人難以接受的，是「關注點分離」的一部分。 HTML是一個定義視圖佈局的地方，CSS允許您定義視圖對用戶的顯示方式，JavaScript定義視圖如何交互或變異。所有這些數據都應該完全獨立 - 意味着沒有內聯樣式或內聯JavaScript（改用<style>和<script>標籤）。

我已經包含一些評論，所以你可以看看發生了什麼。但是評論中沒有包含的內容是訪問這些字段。注意，一旦我們獲取表單元素，我們可以簡單地通過名稱訪問這些字段。這使得該功能非常小（字符明智），這也使得閱讀和遵循更容易。

我還在parseFloat的調用中添加了一個字符串（來自type="text"字段）的值並將其轉換爲浮點數。將值轉換爲數字非常重要。這將（如果添加了更多代碼）允許您檢測是否輸入了無效輸入，並明確說明了您的代碼意圖。

最後，這裏是一個鏈接到工作Fiddle你可以玩

邊注

您的按鈕被定義爲"submit"輸入，是要迫使提交表單，點擊會忽略。你可以嘗試使它成爲"button"，然後使return false;成爲不必要的，但我希望你能回顧一下上面的內容，研究一下現代JavaScript的開發，並避免在你的HTML中嵌入所有這些垃圾所帶來的缺陷。

Answer 2

你的代碼像冠軍一樣工作。 HTML文件的結構可能存在問題，但我們無法看到它，因爲您僅發佈了片段。

W3C validator和HTML5 validator是你的朋友。

然後學習如何使用JavaScript控制檯。如果你沒有這樣做，並使用驗證器等其他測試工具，那麼你工作太辛苦了。

Answer 3

您的JavaScript需要留在<script>標籤！

<h2>Area of a Parallelogram (A = base * height)</h2> 
    <form> 
    <label class = "left">Base: </label> <input id = "parallelogramAreaBase" type = "text" class = "right" /> <br />  
    <label class = "left">Height: </label> <input id = "parallelogramAreaHeight" type = "text" class = "right" /> <br /> 
    <label class = "left">Answer: </label> <input id = "answerAreaParallelogram" type = "text" class = "right" /> <br /> 
    <input type = "submit" value = "Submit" onclick = "areaParallelogramFunction(); return false" /> 
    </form> 

<script> 
function areaParallelogramFunction(base, height) 
{ 
    base = document.getElementById("parallelogramAreaBase").value; 
    height = document.getElementById("parallelogramAreaHeight").value; 
    var answer = base * height; 
    document.getElementById("answerAreaParallelogram").value = answer; 
} 
</script>