使用HTML表單的JavaScript計算器

-3

我想創建一個計算器，使用JavaScript從這個HTML輸入框中獲取一個數字。使用HTML表單的JavaScript計算器

// Take form input and multiply by four

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <input placeholder="Side Length of Square"/> 
 
    </body> 
 
</html>

我怎麼能那麼中繼用戶輸入，比如5，這樣的JavaScript將採取「5」和乘以找到正方形的面積？這是我關於Stack Overflow的第一個問題，所以如果我做錯了，我表示歉意。謝謝您的幫助！

來源

2017-04-17 J. Smith

我們沒有聽到你做功課。你嘗試了什麼？ – epascarello

@J。史密斯，你應該將StackOverflow視爲最後的手段。只有在找到所有其他找到解決方案的方法都已用完後才發佈。爲了解決這個問題，谷歌的東西就像'如何將html輸入值傳遞給javascript'。很可能，對於這個問題，可能已經有一個關於SO的問題，這也將回答你的問題。請閱讀這個有用的問題在這裏問問題：https：//stackoverflow.com/help/how-to-ask – Ethilium

@Ethilium，我很抱歉，我的無知，但這是我有史以來第一次堆棧溢出問題。下一次，我會更加努力地找到其他在線資源。 –

您將使用javascript的onkeyup來計算用戶在數字中輸入的正方形區域。看看下面的代碼！

function calc(){ 
 
var val=document.getElementById("myInput").value; 
 
document.getElementById("area").innerHTML=Math.pow(val, 2); 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <input id="myInput" placeholder="Side Length of Square"onkeyup="calc()"/> 
 
    <p>Area : <span id="area"></span></p> 
 
    </body> 
 
</html>

來源

2017-04-17 18:13:29 lhavCoder

我會用「oninput」替換「onkeyup」，所以它可以立即計算出答案，並且也可以在觸摸屏上使用。 – Napuu

是的，它非常符合我的要求。除了一點不清潔的代碼，這實際上只是一個問題，因爲我有荒謬的OCD;），它是完美的！ –

請添加一些關於此代碼爲何/如何幫助OP的解釋。這將有助於提供未來觀衆可以從中學習的答案。請參閱[這個元問題及其答案]（http://meta.stackoverflow.com/q/256359/215552）瞭解更多信息。 –

首先，你需要決定你想要把你的輸出，例如引入一個新的<div>元素，其文本內容將保存計算出的邊長。

此外，您應該給您的<input>以及您的輸出<div>一個獨特的id屬性，以便您稍後可以從您的JavaScript代碼中識別它。

然後，您將在關閉</body>標記之前引入新的<script>。這保證了在執行腳本時，所有相關的HTML元素都已經被加載並添加到文檔對象模型（DOM）中，以便您的腳本可以訪問它們。

最後，您編寫一個JavaScript「輸入」事件處理程序並將其附加到<input>元素。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <input type="number" id="side-length" placeholder="Side Length of Square"> 
 
    <div id="area"></div> 
 
    <script> 
 
     let input = document.getElementById("side-length"); 
 
     let output = document.getElementById("area"); 
 
     input.addEventListener("input", function(event) { 
 
     let sideLength = input.valueAsNumber; 
 
     output.textContent = sideLength * sideLength; 
 
     }); 
 
    </script> 
 
    </body> 
 
</html>

注：以上事件處理程序計算給定邊長的正方形的面積，根據您的問題，而不是上面的代碼段的註釋。

來源

2017-04-17 18:29:23

使用HTML表單的JavaScript計算器

回答

相關問題