为什么我的函数不能获取变量的值？

Question

该代码的目的是计算汽车的市场价值。如果车龄是:1-那么从汽车的价格中减去20% 2-那么从汽车的价格中减去35% -7-然后从汽车的价格中减去35%，然后从第三年开始每年再减去10%。8- 10 -然后市场价值固定在100,000.00超过10年，然后市场价值固定在75,000.00。

然后，它将显示输入的名称和汽车的价值，但它似乎不工作。请帮帮忙

​

var price = document.getElementById("price").value;
var age = document.getElementById("age").value;
var condition = document.getElementById("condition").value;
var name = document.getElementById("name").value;

age = parseInt(age);
condition = parseInt(condition);

function calculateValue() {
  switch (age) {
    case 0:
      price = price - 0.20 * price;
      break;
    case 1:
      price = price - 0.35 * price;
      break;
    case 2:
      price = price - 0.35 * price - (age - 3) * .10 * price;
      break;
    case 3:
      price = 100000;
      break;
    case 4:
      price = 75000;
      break;
  }

  switch (condition) {
    case 0:
      price = price;
      break;
    case 1:
      price = price - price * .10;
      break;
  }

  document.getElementById("message").innerHTML = "Your" + name + " is valued at " + price + "today";
}

<h1>Car Market Value Calculator</h1>
<form>
  Car Brand:<input id="name" type="text" name="name" placeholder="Please input car brand" autofocus required><br> Age of Car
  <select id="age">
    <option value="0">1</option>
    <option value="1">2</option>
    <option value="2">3-7</option>
    <option value="3">8-10</option>
    <option value="4">more than 10</option>
  </select><br> Price of Car<input id="price" type="number" name="price" placeholder="minimum:300,000" min="300000"><br>
  <p>Good Condition?</p>
  Yes <input id="condition" type="radio" name="condition" value="0"> No <input id="condition" type="radio" name="condition" value="1">
  <button type="button" name="submit" onclick="calculateValue()">Submit</button>

</form>
<p id="message"></p>

​

Answer 1

您的代码中有几个错误：

，

1. ，你没有在合适的时候得到dom的输入。您应该在计算之前获得输入值，而不是在脚本加载时。这确保了DOM被加载，并获得了正确的值。
2. age的值没有正确计算。不要对数值使用select。另外，再读一遍你的case price = 2 ;)

这段代码做了您所期望的事情：

​

const calculateValue = () => {
  let age = +document.querySelector('input[name=age]').value,
      price = +document.querySelector('input[name=price]').value,
      condition = document.querySelector('input[name=condition]').checked;
  
  // depreciate based on age
  if (age==1) price*=.8
  else if (age==2) price*=.65
  else if (age>2 && age<8) price*=(.65-(age-3)*.1)
  else if (age>7 && age<11) price = 100000
  else price = 75000;
  
  // depreciate based on condition
  if (!condition) price*=.9;
  
  console.log(price);
}

<div>
  <input name="age" type="number" placeholder="age">
</div>
<div>
  <input name="price" type="number" placeholder="price">
</div>
<div>
  Good condition?
  <input name="condition" type="radio" value="true" checked>yes
  <input name="condition" type="radio" value="false">no
</div>
<button onclick="calculateValue()">Compute</button>

​

Answer 2

如果您打开浏览器的开发控制台，您将看到一个错误，指示您正在尝试获取空的或未定义的内容的.value。因为当您执行document.getElementById("price")时，它找不到任何东西。

您正在尝试在用户输入任何内容之前获取输入的值。甚至在页面上呈现输入之前。

在用户按下按钮之前，您不希望获得这些值。因此，将代码移动到函数中：

function calculateValue() {
    var price = document.getElementById("price").value;
    var age = document.getElementById("age").value;
    var condition = document.getElementById("condition").value;
    var name = document.getElementById("name").value;

    age = parseInt(age);
    condition = parseInt(condition);

    //... the rest of your function
}

Answer 3

您需要将前6行移动到试图从calculateValue()函数内的输入中获取值的位置

function calculateValue() {
  var price = document.getElementById("price").value;
  var age = document.getElementById("age").value;
  var condition = document.getElementById("condition").value;
  var name = document.getElementById("name").value;

  age = parseInt(age);
  condition = parseInt(condition);

  switch (age) {
  ...

只要这样做，你的代码就会工作得很好。

说明：每次按下submit按钮时，您都需要从输入框中获取新值。您所做的是只从输入框中获取了一次值。当您在函数中移动这些行时，每次按下按钮时都会获取新值。