JavaScript中的代码未读取输入答案

【问题标题】：Input not being read by code in JavaScriptJavaScript中的代码未读取输入
【发布时间】：2020-07-30 08:45:14
【问题描述】：

我的 JS 表单有问题。所以我正在创建一个零钱计算器，它接受两个输入值——价格和现金。当我明确地将实际值放入 JS 代码中时（就像我在 confirmValues() 之后注释掉的那些），它工作得很好。但是当我把它放在实际的输入框中时，它就不再起作用了。我的 HTML 或 JS 有什么奇怪的地方吗？谢谢！

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title> Change calculator</title>
</head>
<body>
  <form>
  How much does the item cost?  <input  type="number" id="price" name ="price"/>
  <br/> <br/>
  How much cash do you have? <input type="number" id="cash" name="cash"/><br/> <br/>
  
  <input type="button" value="Enter" onclick="confirmItems();"/>
  
</form>
<p id="confirmation"></p>
<p id ="change"></p>
</body>

 var itemCost = document.getElementById("price");
 var cash = document.getElementById("cash");
 var confirmation = document.getElementById("confirmation");

function confirmItems() {
     confirmation.innerHTML = "Your total purchase costs $" + itemCost.value + " and you have $" + cash.value + " to pay for it.";
     createConfirmationBtn();
}

function createConfirmationBtn() {
    let confirmationBtn = document.createElement("BUTTON");
    const confirmationBtnText = document.createTextNode("Confirm");
    confirmationBtn.appendChild(confirmationBtnText);
    confirmation.appendChild(confirmationBtn);
    confirmationBtn.onclick = function() {
      confirmValues();
    }
}

let changeEl = document.getElementById("change");

function confirmValues() {
  if (parseFloat(cash.value) < parseFloat(itemCost.value)) {   
    changeEl.innerHTML = "Not enough cash";
  } else if (parseFloat(cash.value) == parseFloat(itemCost.value)) {
    changeEl.innerHTML = "Your change is $0.";
  } else {
    calculateChange();
    
  }
}

// cash.value = 500;
// itemCost.value = 33.44;

let remainder = parseFloat(cash.value) - parseFloat(itemCost.value);
let finalOutput = new Array();

function calculateChange() {
  while (remainder > 0) {
    if (remainder >= 100) {
      findChange(100.00);
    } else if (remainder >= 50.00) {
      findChange(50.00);
    } else if (remainder >= 20.00) {
      findChange(20.00);
    } else if (remainder >= 10.00) {
      findChange(10.00);
    } else if(remainder >= 5.00) {
      findChange(5.00);
    } else if (remainder >= 1.00) {
      findChange(1.00);
    } else if (remainder >= 0.25) {
      findChange(0.25);
    } else if (remainder >= 0.10) {
      findChange(0.10);
    } else if (remainder >= 0.05) {
      findChange(0.05);
    } else {
      findChange(0.01);
    }
  }
   changeEl.innerHTML = finalOutput;
 }


function findChange(value) {
   //Step 1. Get number of dollar for each type of dollar 
    let dValue = parseInt(remainder / value);
   // Step 2. Storing numDValue in an array 
    finalOutput.push("[$" + value + " x" + dValue+"]");
    remainder = parseFloat(remainder - (value * dValue));
    remainder = parseFloat(remainder.toFixed(2)); 
 }

【问题讨论】：

let remainder = parseFloat(cash.value) - parseFloat(itemCost.value); 在脚本加载时执行，此时这些字段中还没有值。您需要在用户将值放入其中之后从这些字段中读取数据。
你需要把你的变量放在函数里面

标签： javascript html forms input

【解决方案1】：

您需要在需要它们的函数中包含变量，否则它们将无法获取用户输入的内容
您可以显示和隐藏确认按钮
干，不要重复自己

function confirmValues() {
  let itemCost = document.getElementById("price").value;
  let cash = document.getElementById("cash").value;

  const confirmation = document.getElementById("confirmation");
  const changeEl = document.getElementById("change");
  const confirm = document.getElementById("confirm");

  cash = isNaN(cash) || cash === "" ? 0 : +cash; // test valid input
  itemCost = isNaN(itemCost) || itemCost === "" ? 0 : +itemCost;
  if (cash < itemCost) {
    changeEl.innerHTML = "Not enough cash";
  } else {
    confirmation.innerHTML = "Your total purchase costs $" + itemCost.toFixed(2) + " and you have $" + cash.toFixed(2) + " to pay for it.";
    changeEl.innerHTML = "Your change is $" + (cash - itemCost).toFixed(2);
    confirm.classList.remove("hide");
  }
}

.hide {
  display: none;
}

<title> Change calculator</title>
<form>
  How much does the item cost? <input type="number" id="price" name="price" />
  <br/> <br/> How much cash do you have? <input type="number" id="cash" name="cash" /><br/> <br/>

  <input type="button" value="Enter" onclick="confirmValues();" />
  <input type="button" id="confirm" class="hide" value="Confirm" onclick="alert('Confirmed!')" />

</form>
<p id="confirmation"></p>
<p id="change"></p>

【讨论】：

嗨。这不是我想要的。我希望改变基于美元钞票和硬币。但感谢 DRY 和 .hide 的提示。我对这一切还很陌生，但我正在尽我所能保持我的代码尽可能干净。
我不明白你所说的I wanted the change to be based on the US Dollar bills and coins 是什么意思。我在您的原始代码中做了哪些我没有在这里做的事情？
你是这个意思？ stackoverflow.com/questions/5529934/javascript-numbers-to-words
我的意思是我希望它像收银员一样工作。假设一件商品的价格为 22.55 美元，而您有 50 美元。变化将是 27.45，是的。但如果你处理的是纸币和硬币，你会收到一张 20 美元、一张 5 美元、两张 1 美元和四分之三的钞票。
但这不是您问题的一部分，所以我们只需将 (cash - itemCost).toFixed(2) 更改为您需要的任何内容