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

代码的目的是计算汽车市场价值。如果车龄为： 1-然后从汽车价格中减去20% 2-然后从汽车价格中减去35% 3-7-然后从汽车价格中减去35%，然后再减去10% 从第三年开始，每年增加一次。 8-10-那么市场价值固定在100000.00 超过10年后，市场价值固定为75000.00

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

var price=document.getElementById（“price”）.value；
var age=document.getElementById（“age”）.value；
var条件=document.getElementById（“条件”）.value；
var name=document.getElementById（“name”）.value；
年龄=parseInt（年龄）；
条件=parseInt（条件）；
函数calculateValue（）{
开关（年龄）{
案例0：
价格=价格-0.20*价格；
打破
案例1：
价格=价格-0.35*价格；
打破
案例2：
价格=价格-0.35*价格-（年龄-3）*.10*价格；
打破
案例3：
价格=100000；
打破
案例4：
价格=75000；
打破
}
开关（条件）{
案例0：
价格=价格；
打破
案例1：
价格=价格-价格*.10；
打破
}
document.getElementById（“message”）.innerHTML=“您的”+name+“今天的价值为”+price+”；
}

汽车市场价值计算器
汽车品牌：
汽车时代
1.
2.
3-7
8-10
十余

汽车价格

状况好吗

是不是
提交

如果打开浏览器的开发控制台，您将看到一个错误，表明您试图获取空值或未定义的内容的

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

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) {
        case 0:
...etc...

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

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

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

---

需要将前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) {
  ...

只要这样做，您的代码就会很好地工作

---

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

在加载HTML标记之前，将执行

文档.getElementById

命令，因此将触发错误。您可以通过将变量声明和值提取移动到函数中来修复它：

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
}

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) {
        case 0:
...etc...

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

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

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

---

无论如何，您都需要这样做，因为每次单击“提交”时，您的代码都需要获取当前的输入值。

获取calculate value函数中变量的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="Car Market Value Calculator">
        <meta name="keywords" content="calculator, car, market, value">
        <meta name="author" content=", 26/02/19">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>

        </style>

    </head>

    <body>
        <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>
    </body>

    <script>


        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);
            alert(price);
            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";
        }
        </script>

</html>

汽车市场价值计算器
汽车品牌：

车龄
1.
2.
3-7
8-10
十余


汽车价格

状况好吗

对
不
提交

函数calculateValue（）{
var price=document.getElementById（“价格”）.value；
var age=document.getElementById（“age”）.value；
var条件=document.getElementById（“条件”）.value；
var name=document.getElementById（“name”）.value；
年龄=parseInt（年龄）；
条件=parseInt（条件）；
警报（价格）；
开关（年龄）{
案例0：
价格=价格-0.20*价格；
打破
案例1：
价格=价格-0.35*价格；
打破
案例2：
价格=价格-0.35*价格-（3岁）*.10*价格；
打破
案例3：
价格=100000；
打破
案例4：
价格=75000；
打破
}
开关（条件）{
案例0：
价格=价格；
打破
案例1：
价格=价格-价格*.10；
打破
}
document.getElementById（“message”）.innerHTML=“您的”+name+“今天的价值为”+price+”；
}

每次单击“提交”按钮时，您都需要再次获取输入值，而不仅仅是在加载页面时。只需将“var”声明移动到函数中：

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
}

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) {
        case 0:
...etc...

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

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

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

别人的评论是正确的。您需要在单击submit按钮时获得更新的值，因此所有变量都将进入

calculateValue

函数

---

将所有代码包装到document.ready方法中。

您的代码中有一些错误：

您没有在适当的时候从dom获取输入。您应该在计算之前获得输入值，而不是在加载脚本时。这可以确保加载DOM并获得正确的值

age

值计算不正确。不要对数值使用“选择”。另外，请再次阅读您的

案例价格=2

；）

此代码符合您的期望：

const calculateValue=（）=>{
let age=+document.querySelector（'input[name=age]'）。值，
price=+document.querySelector（'输入[名称=价格]