如何顯示對輸入的文本進行確認？

Question

我是一名學生，對JS非常陌生，因為這是我處理JS的第一個項目。 話雖這么說，請原諒專家們我的編碼看起來多么年輕。 我遵循了項目的指示...

我試圖弄清楚如何顯示對用戶輸入內容的確認。 我已經閱讀了前面類似的問題，但是沒有一個問題比我的編碼更基本，因此我不知道如何遵循這些示例來糾正我的問題。

另外，我無法弄清楚為什么我的總數為什么將數字並排而不是加在一起。 我已經嘗試了這些操作的許多不同變體，但無法弄清楚我做錯了什么。

有人可以幫我弄清楚如何顯示用戶輸入的內容，以及如何為用戶加總費用和稅金嗎？ 任何幫助表示贊賞。

 var tileLetters; var cost = 3; var taxes = 0.08; function confirmEntry() { tileLetters= document.getElementById("letters").text; document.getElementById("confirm").innerHTML= tileLetters; } function calculateCost() { tileLetters = document.getElementById("letters").value; var tileCount= tileLetters.length; var spaceCount= (tileLetters.split(" ").length - 1); var tax= (tileCount - spaceCount) * cost; document.getElementById("cost").innerHTML= "Subtotal $" + (tileCount - spaceCount) * cost; document.getElementById("taxes").innerHTML= "Plus taxes $" + (tileCount - spaceCount) * cost * taxes; document.getElementById("total").innerHTML= "Your total cost is $" + (tileCount - spaceCount) * cost * taxes + ((tileCount - spaceCount) * cost); } 

 <input id="letters" type="text" name="entry"><br> <button onclick="confirmEntry() + calculateCost()">Calculate Your Cost</button> <p id="confirm">You entered</p> <p id="cost">Cost</p> <p id="taxes">plus taxes</p> <p id="total">Total cost</p> 

Answer 1

輸入框沒有名為.text的屬性。 您可能想要.value ：

tileLetters = document.getElementById("letters").value;

---

您的代碼將數字加到末尾，而不是在數學上加數字，因為代碼將其視為字符串連接而不是數字運算（例如，思考執行"Hello" + " World"時會發生什么-它為您提供"Hello World" 。 使它表現出您想要的樣子； 您需要確保要添加的所有內容都是數字。

一種方法是parseFloat函數。 這需要一個字符串，並將其轉換為浮點數； 例如parseFloat("6")給您6.0而不是以前的"6" 。

Answer 2

首先，為了從輸入中獲取值，您需要執行以下操作：

function confirmEntry() {
  tileLetters= document.getElementById("letters").value;// value not text 
document.getElementById("confirm").innerHTML= tileLetters;
}

secound不能一直使用，因為您可以在數字上添加字母。 因此，您可以使用簡單的js函數isNaN（）檢查其是否為數字。 看看這個

Answer 3

在Javascript中，每當您嘗試對兩個變量進行運算時，都應始終注意那里的類型，例如在您的總計算中，您將用concat而不是Sum的字符串添加兩個數量。

而且，每當您在html控件中僅插入Text時，都使用innerText屬性而不是innerHtml

我已經更改了您的代碼。 嘗試運行代碼段

 var tileLetters; var cost = 3; var taxes = 0.08; function confirmEntry() { tileLetters= document.getElementById("letters").value; //value instead of text document.getElementById("confirm").innerText= tileLetters; confirm("You Entered "+tileLetters); //added confirm box here if not required remove it } function calculateCost() { tileLetters = document.getElementById("letters").value; var tileCount= tileLetters.length; var spaceCount= (tileLetters.split(" ").length - 1); var subTotal= (tileCount - spaceCount) * cost ; // Tax variable Renamed to Sub Total var tax= (tileCount - spaceCount) * cost * taxes;// Added taxes in the calculation var total = subTotal + tax; document.getElementById("cost").innerText= "Subtotal $" + subTotal; document.getElementById("taxes").innerText= "Plus taxes $" + tax; document.getElementById("total").innerText= "Your total cost is $" + total; } 

 <input id="letters" type="text" name="entry"><br> <button onclick="confirmEntry() ; calculateCost()">Calculate Your Cost</button> <p id="confirm">You entered</p> <p id="cost">Cost</p> <p id="taxes">plus taxes</p> <p id="total">Total cost</p> 

運行該代碼段並告訴它是否正常工作

Answer 4

歡迎使用JavaScript。 使用JavaScript的陷阱很少。

因為您要將計算追加到字符串，所以JavaScript假定兩個數字為字符串。 因此，為了修復您的代碼，我將它們分開了。 我正在使用變量來存儲值，並在innerHTML使用這些值。 然后我使用parseFloat()將兩個值相加。

 var tileLetters; var cost = 3; var taxes = 0.08; function confirmEntry() { tileLetters= document.getElementById("letters").text; document.getElementById("confirm").innerHTML= tileLetters; } function calculateCost() { tileLetters = document.getElementById("letters").value; var tileCount= tileLetters.length; var spaceCount= (tileLetters.split(" ").length - 1); var tax= (tileCount - spaceCount) * cost; var totalTax = tax * taxes; var totalCost = totalTax + tax; document.getElementById("cost").innerHTML= "Subtotal $" + tax; document.getElementById("taxes").innerHTML= "Plus taxes $" + totalTax; document.getElementById("total").innerHTML= "Your total cost is $" + parseFloat(totalTax + tax); // or document.getElementById("total").innerHTML + "Your total cost is $" + totalCost; } 

 <input id="letters" type="text" name="entry"><br> <button onclick="confirmEntry();calculateCost()">Calculate Your Cost</button> <p id="confirm">You entered</p> <p id="cost">Cost</p> <p id="taxes">plus taxes</p> <p id="total">Total cost</p> 

Answer 5

您在HTML中犯了一些錯誤。 這是您要尋找的：

1.如何獲取輸入框的值

要獲取輸入框的值，請使用.value引用。 例：

 function calculate() { var valueOfInputBox = document.getElementById("input-box").value; document.getElementById("result").innerHTML = valueOfInputBox; } 

 <input id="input-box" type="text"> <button onclick="calculate()">Submit</button><br> Result: <a id="result"></a> 

2.要使用輸入框的值進行計算，您需要將字符串轉換為Int或Float。

Int（Integers）用於整數（不適用於此用途），而Float用於小數。 （在這種情況下您需要什么）示例：

 function calculate() { var valueOfInputBox = document.getElementById("input-box").value; var finalValue = parseFloat(valueOfInputBox) + 5; document.getElementById("result").innerHTML = finalValue; } 

 <input type="text" id="input-box"> <button onclick="calculate()">Submit</button><br> Result: (+5) <a id="result"></a><br> Use <code>parseInt()</code> when you want to convert it to an integer instead. 

Answer 6

干得好。 輸入價格和命中數量， 計算就完成了。 希望您喜歡您所看到的內容，並且經過一番分析后，可以自行解決問題，並制作出更好的版本。 學習JavaScript祝您好運。 剛開始時可能會令人沮喪，但請相信我，一旦掌握了它就很棒了:)

 function subTotal() { var price = document.orderform.price.value; var quantity = document.orderform.quantity.value; productPrice = price * quantity; document.orderform.subtotal.value = productPrice.toFixed(2); return productPrice; } //calculateTax() takes result of subTotal function but has to refer to the result to move forward as opposed to the previous function //.toFixed() is the decimal points function calculateTax() { //var subTotal = document.orderform.subtotal.value; OR for dryer code: var subtotal = subTotal(); var stax = 0.08; tax = subtotal * stax; document.orderform.salestax.value = tax.toFixed(3); return tax; } //takes the HTML output results from the previous two functions and adds them together. function grandTotal() { var subtotal = subTotal(); var tax = calculateTax(); document.orderform.subtotal.value = subtotal.toFixed(2); document.orderform.salestax.value = tax.toFixed(2); var gtotal = subtotal + tax; document.orderform.gtotal.value = gtotal.toFixed(2); } 

 table{ border-style: solid; border-color: black; border-width: 5px; border-radius: 5px; background-color: lime; } #subBtn{ border-style: solid; border-color: black; border-width: 2px; border-radius: 5px; } #taxBtn{ border-style: solid; border-color: black; border-width: 2px; border-radius: 5px; } #gtotalBtn{ border-style: solid; border-color: black; border-width: 2px; border-radius: 5px; } h2 { color: green; letter-spacing: 0.2rem; font-family: Cursive; } 

 <center> <div class ="form"> <h2> Sales Tax Calculator</h2> <form name="orderform" id="orderform"> <table> </div> <tr><th> <label>Product: </label> </th> <th scope="row"> <div align="left"> <label><span>$</span></label> <input name="price" type="text" id="price" size="10"> </div> </th> <tr><th> <label>Quantity</label> </th> <th scope="row"> <div align="left"> <label><span>#</span></label> <input name="quantity" type="text" id="quantity" size="10"> </div> </th> <tr><th> <label>Subtotal:</label> </th> <th scope="row"> <div align="left"> <label>$</label> <input name="subtotal" type="text" id="subtotal" onFocus="this.form.elements[1].focus()" size="10"> &nbsp;&nbsp; <input name="subBtn" onClick="subTotal();" type="button" id="subBtn" value="Subtotal"> </div> </th> </tr> <tr><th> <label>Tax:</label> </th> <th scope="row"> <div align="left"> <label>$</label> <input name="salestax" type="text" id="salestax" onFocus="this.form.elements[1].focus()" size="10"> &nbsp;&nbsp; <input name="taxBtn" onClick="calculateTax();" type="button" id="taxBtn" value="Tax"> </div> </th> </tr> <tr><th> <label>Total:</label> </th> <th scope="row"> <div align="left"> <label>$</label> <input name="gtotal" type="text" id="gtotal" onFocus="this.form.elements[2].focus()" size="10"> &nbsp;&nbsp; <input name="gtotalBtn" onClick="grandTotal();" type="button" id="gtotalBtn" value="Calculate Order"> </div> </th> </tr> </table> </form> </div> </center>