为什么我的函数无法获取变量的值？

时间：2019-02-25 12:17:32

标签： javascript html

代码的目的是为了计算汽车的市场价值。如果汽车年龄是： 1-然后从汽车价格中减去20％ 2-然后从汽车价格中减去35％ 3-7-然后从汽车价格中减去35％，然后再减去10％ 从第3年开始，每年还有更多。 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>

7 个答案:

答案 0 :(得分：1)

您的代码中有一些错误：

  1. 您没有在正确的时间从dom接收输入。您应该在计算之前获取输入值，而不是在脚本加载时获取输入值。这样可以确保DOM已加载，并获得正确的值。

  2. const a = document.createElement('a'); a.href = *link_to_file*; a.download = 'myFileName.mp4'; document.body.appendChild(a); a.click(); document.body.removeChild(a); 值计算不正确。不要将select用于数值。另外，再次阅读您的age;）

此代码符合您的期望：

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

答案 1 :(得分：0)

如果打开浏览器的开发控制台，将会看到一条错误消息，表明您试图获取.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
}

答案 2 :(得分：0)

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

只需执行此操作，您的代码即可正常工作。

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

答案 3 :(得分：0)

document.getElementById命令将在加载HTML标记之前执行，因此将触发错误。您可以通过将变量声明和值获取移入函数来对其进行修复：

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

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

答案 4 :(得分：0)

在计算值函数中获取变量的值

<!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>

答案 5 :(得分：0)

每次单击提交时，不仅在加载页面时，还需要重新获得输入值。只需将“ var”声明移至函数中即可：

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 :(得分：0)

Solution at Codepen 

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

其他人的评论是正确的。您需要单击“提交”按钮来获取更新的值，因此所有变量都将位于calculateValue函数内部。

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

相关问题
最新问题