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

Question

The purpose of the code is to compute for the car market value. If If Age of the Car is : 1 - then subtract 20% from the Price of the Car 2 - then subtract 35% from the Price of the Car 3 - 7 - then subtract 35% from the Price of the Car and then subtract 10% more for each year starting from the 3rd year. 8 - 10 - then the market value is fixed at 100,000.00 More than 10 years then the market value is fixed at 75,000.00.

Then it will display the name inputted and the value of the car but it doesnt seem to work. pls help

 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

You have a few errors in your code:

1. You're not getting the input from the dom at the right moment. You should get the input values before calculation, not when the script loads. This ensures that the DOM is loaded, and get the right values.

2. The age value is not calculated properly. Don't use select for numeric values. Also, read again your case price = 2 ;)

This code does what you expect:

 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

If you open your browser's development console you'll see an error indicating that you're trying to get the .value of something that is null or undefined. Because document.getElementById("price") doesn't find anything when you're executing it.

You're trying to get the values of your inputs before the user has typed anything. Before the inputs have even been rendered on the page even.

You don't want to get the values until the user has pressed the button. So move that code into the 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);

    //... the rest of your function
}

Answer 3

You need to move the first 6 lines where you are trying to get the values from input inside your calculateValue() 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) {
  ...

Simply do this and your code will work fine.

Explanation: You need to get the new values from the input boxes each time the submit button is pressed. What you have done is that you have taken the values from the input boxes only once. As you move these lines inside the function, the fresh values are taken each time the button is pressed.

Answer 4

The document.getElementById commands will execute before the HTML markup is loaded, and hence will trigger an error. You can fix it by moving the variable declarations and value-fetching into the 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...

You will want to do this anyway, since your code needs to fetch the current input values every time you click "submit".

Answer 5

Get values of your variables inside the calculate value function

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

Answer 6

Every time you click the submit you need to get the input values again, and not only when loading the page. Just move the 'var' declarations into the function:

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

Answer 7

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

The comments given by others are correct. You need to get the updated values on click of the submit button and hence all the variable will come inside the calculateValue function.

Wrap all the code in the document.ready method.