时间戳

首页 > 解决方案 > 为什么我的输入在浏览器中运行时没有更新？- Javascript

javascript - 为什么我的输入在浏览器中运行时没有更新？- Javascript

问题描述

我正在学习基本的 Javascript，并且正在尝试制作一个小费计算器。

我完成了大部分程序，但是当它运行我的值时，它们被困在 0 上。我通过 id 识别并确保它们是正确的名称并在控制台日志中运行它们。运行它时，警报会显示“输入有效数字”，所以我知道它没有任何反应。

我查看了类似的程序，发现即使大部分代码相似，也没有问题。这可能是一个简单的解决方案，但任何帮助将不胜感激！

var bill = document.getElementById("cost").value;
var tip = document.getElementById('tip').value;



function totalBill() {
  if (tip >= 1) {
    tip = tip / 100;
  }

  if (bill === "" || tip === 0) {
    alert("enter valid numbers")
    return;
  }
  var total = Math.round((bill * tip));
  total.toFix(2);
  document.getElementById('totalText').innerHTML = total;

}
document.getElementById("c").onclick = function() {
  totalBill();
};
body {
  font-family: Roboto;
  background: white;
  /* fallback for old browsers */
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#calculator {
  height: 350px;
  width: 360px;
  margin: 0px auto;
  background-color: yellow;
  padding: 10px;
  text-align: center;
}

input {
  font-weight: bold;
}

h1 {
  text-align: center;
  background: #B03060;
  color: white;
  margin: 0;
  padding: 10px 100px;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  border-top-left-radius: ;
  border-top-right-radius: 20px;
}

button {
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  margin: 30px auto;
  background: red;
  border-radius: 2px;
  width: 200px;
  height: 50px;
  font-size: 14px;
  color: white;
}

button:hover {
  transition: 1s;
  background: white;
  color: black;
}

#result {
  text-align: center;
}

p {
  text-align: center;
  padding-left: 20px;
}
<html lang="en" dir="ltr">
<link rel="stylesheet" href="style.css">

<body>
  <div id="contain">
    <h1>
      <meta charset="utf-8">
      <title>calculator</title>
      How much is the tip?
    </h1>

    <div id="calculator">
      <form>
        <p>How much was your meal?</p>
        <p>$<input id="cost" type="text" placeholder="Enter Cost"></p>
        <p>How much do you want to tip?</p>
        <p><input id="tip" type="text" placeholder="Enter percentage">%</p>

        <button type="button" id="c">Calculate!</button>
      </form>
    </div>
  </div>
  <div id="result">
    <sup>$</sup><span id="totalText">0.00</span>
  </div>
</body>


</html>

标签： javascripthtmlcss

解决方案

你需要.getElementById在你的函数中移动你的分配，以便每次运行函数时它们都会更新——现在你只得到.value()一次；加载页面时，这些输入为空

当您在函数中获取这些值时，它们将是字符串。要+在它们上使用类似的运算符而不会产生意外效果（将字符串连接在一起），您应该将它们转换为数字 - 您可以使用.parseFloat()保留小数或.parseInt()仅获取整数

// Assuming an input of '12.50'
document.getElementById("cost").value                 // Returns '12.50'
parseFloat(document.getElementById("cost").value)     // Returns 12.50
parseInt(document.getElementById("cost").value, 10)   // Returns 12

第二个, 10)是parseInt指定基地- 不要忘记，否则人们会讨厌你

最后，你的数学计算总支付额是错误的；它应该将小费金额添加到总数中，然后显示该值

还有其他一些小问题和不完美之处，但我将这些作为练习留给读者

function totalBill() {
  var bill = parseFloat(document.getElementById("cost").value);
  var tip = parseFloat(document.getElementById('tip').value);

  if (tip > 0) {
    tip = tip / 100;
  }

  if (bill === "" || tip === 0) {
    alert("enter valid numbers")
    return;
  }

  let total = Math.round(bill += bill * tip).toFixed(2);

  document.getElementById('totalText').innerHTML = total;

}
document.getElementById("c").onclick = function() {
  totalBill();
};
body {
  font-family: Roboto;
  background: white;
  /* fallback for old browsers */
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#calculator {
  height: 350px;
  width: 360px;
  margin: 0px auto;
  background-color: yellow;
  padding: 10px;
  text-align: center;
}

input {
  font-weight: bold;
}

h1 {
  text-align: center;
  background: #B03060;
  color: white;
  margin: 0;
  padding: 10px 100px;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  border-top-left-radius: ;
  border-top-right-radius: 20px;
}

button {
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  margin: 30px auto;
  background: red;
  border-radius: 2px;
  width: 200px;
  height: 50px;
  font-size: 14px;
  color: white;
}

button:hover {
  transition: 1s;
  background: white;
  color: black;
}

#result {
  text-align: center;
}

p {
  text-align: center;
  padding-left: 20px;
}
<div id="contain">
  <h1>How much is the tip?</h1>

  <div id="calculator">
    <form>
      <p>How much was your meal?</p>
      <p>$<input id="cost" type="text" placeholder="Enter Cost"></p>
      <p>How much do you want to tip?</p>
      <p><input id="tip" type="text" placeholder="Enter percentage">%</p>

      <button type="button" id="c">Calculate!</button>
    </form>

    <div id="result">
      <sup>$</sup><span id="totalText">0.00</span>
    </div>
  </div>
</div>

推荐阅读