如何显示对输入的文本进行确认？

Question

我是一名学生，对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

输入框没有名为[[10. 15.] [15. 20.] [20. 25.] [25. 30.] [30. 35.] [35. 40.]] 的属性。您可能想要.text：

.value

---

您的代码将数字加到末尾，而不是在数学上加数字，因为您将其视为字符串连接而不是数字运算（例如，想想tileLetters = document.getElementById("letters").value; 时会发生什么-它给您{{ 1}}）。使它表现出您想要的样子；您需要确保同时添加的都是数字。

执行此操作的一种方法是"Hello" + " World"函数。这需要一个字符串，并将其转换为浮点数；例如"Hello World"给您parseFloat，而不是您以前的parseFloat("6")。

Answer 2

首先，为了从输入中获取值，您需要执行以下操作：

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

secret不能一直使用，因为您可以在数字上添加字母。 因此，您可以使用简单的js函数isNaN（）检查其是否为数字。 check out this

Answer 3

在Javascript中，每当您尝试对两个变量进行运算时，都应始终注意那里的类型，例如在您的总计算中，您要添加两个与concat组成的字符串而不是Sum。

还有，只要您在html控件中仅插入文本，就使用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

您在这里。输入 价格 ，然后按 数量 点击 计算 完成。希望您喜欢您所看到的内容，并且经过一番分析后，可以自行解决问题，并制作出更好的版本。祝您好运<div class="button_holder"> <button class='btn'>SEND</button> </div> 。一开始可能会令人沮丧，但请相信我，一旦您掌握了它，它就很棒了：）

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;
  
}