1

I have a problem with JS not changing the HTML in the 3rd function could anyone tell me why or tell me how to change this code to work?

               

function chosen() {
                    var x = document.getElementById("a").value;
                    if(x == 1) {
                        document.getElementById("aa").innerHTML = "Acura years arent available right now";
                        document.getElementById("ab").innerHTML = "";
                    } else if(x == 3) {
                        document.getElementById("aa").innerHTML = "<div class='input-group mb-3'><div class='input-group-prepend'><label class='input-group-text' for='inputGroupSelect01'>Year</label></div><select class='custom-select' id='b' id='inputGroupSelect01' oninput='Year()'><option selected disabled>Year</option><option value='1'>1987</option></select></div>";   
                    }
                        }
                function Year() {
                    var y = document.getElementById("b").value;
                    var x = document.getElementById("a").value;
                    if(y == 1) {
                        if(x == 3) {
                           document.getElementById("ab").innerHTML = "<div class='input-group mb-3'><div class='input-group-prepend'><label class='input-group-text' for='inputGroupSelect01'>Class</label></div><select class='custom-select' id='c' id='inputGroupSelect01' oninput='l()'><option disabled selected>Select a class</option><option value='1'>190D</option></select></div>";
                        } else if(x == 1) {
                           document.getElementById("ab").innerHTML = "Unavailable";
                        }
                    }}
                function l() {
                    var z = document.getElementById("c").value;
                    var y = document.getElementbyId("b").value;
                    var x = document.getElementbyId("a").value;
                    if (x === 3 && y === 1 && z === 1) {
                        document.getElementById("ac").innerHTML = "input schematics here";
                    }
                }
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Brand</label>
  </div>
  <select class="custom-select" id="a" id="inputGroupSelect01" oninput="chosen()">
    <option selected disabled>Select Brand of car</option>
      <option value="1">Acura</option>
      <option disabled value="2">Alfa Romeo</option>
    <option value="3">Mercedes Benz</option>
    <option value="4">Toyota</option>
    <option value="5">Lexus</option>
    <option disabled value="6">Volvo</option>
    <option value="7">Fiat</option>
    <option disabled value="8">Porsche</option>
    <option value="9">BMW</option>
      <option disabled>options are limited b/c Im Lazy lol</option>
            </select></div><h6 id="aa"></h6><h6 id="ab"></h6><h6 id="ac"></h6>

Side note: I used Bootstrap 4.0 You can also find out how it works in this webpage Bigbn.oyosite.com

Improve this question
2
  • 1
    Possibly the strict comparison, try changing the === to == as you have in other areas. Commented Jul 3, 2020 at 18:37
  • There is one issue you use multiple id to element which is not right. also as said @PaulT. due to strict mode. its causing to enter inside if case Commented Jul 3, 2020 at 18:45

2 Answers 2

Reset to default
1

You had 3 problems in your code:

  1. Why did you write === instead of == in 3rd function? x, y, and z are strings so type conversion is needed. please use == instead of ===. Please read this to understand the difference between === and ==: Which equals operator (== vs ===) should be used in JavaScript comparisons?
  2. You used 2 ids in 1 element that will work but it is incorrect.
  3. You can find the main problem by going to browser dev tools. when it starts to run function l(), it makes an error. you wrote this for x and y
var y = document.getElementbyId("b").value; //It errors getElementbyId is not a function because you used lower case b in by
var x = document.getElementbyId("a").value;

You used getElementbyId instead of getElementById

In conclusion, Your code will work if you change by to By and === to ==. But using 2 ids is also incorrect but it will not make any error but it's better to change that. Hope this helped you.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This is details about strict operator. Upvoting you explained.
i used === because JSLint told me to do that
Mahan lameie, I originally used == but that did not seem to work so i instead used ===
@Bruhh111 I improved my answer and tested your code and now these changes will make your code work and it contains all of 3 major problems in the code.
0

There is one issue you use multiple id to element which is not right. also as said comment. Due to strict mode. its causing to enter inside if case

function chosen() {
  var x = document.getElementById("a").value;
  if (x == 1) {
    document.getElementById("aa").innerHTML = "Acura years arent available right now";
    document.getElementById("ab").innerHTML = "";
  } else if (x == 3) {
    document.getElementById("aa").innerHTML = "<div class='input-group mb-3'><div class='input-group-prepend'><label class='input-group-text' for='inputGroupSelect01'>Year</label></div><select class='custom-select' id='b'  oninput='Year()'><option selected disabled>Year</option><option value='1'>1987</option></select></div>";
  }
}

function Year() {
  var y = document.getElementById("b").value;
  var x = document.getElementById("a").value;
  if (y == 1) {
    if (x == 3) {
      document.getElementById("ab").innerHTML = "<div class='input-group mb-3'><div class='input-group-prepend'><label class='input-group-text' for='inputGroupSelect01'>Class</label></div><select class='custom-select' id='c'  oninput='l()'><option disabled selected>Select a class</option><option value='1'>190D</option></select></div>";
    } else if (x == 1) {
      document.getElementById("ab").innerHTML = "Unavailable";
    }
  }
}

function l() {
  var z = document.getElementById("c").value;
  //console.log(document.getElementById("a").value);
  var y = document.getElementById("b").value;
  var x = document.getElementById("a").value;
  if (x == 3 && y == 1 && z == 1) {
    var thirdElem = document.getElementById("ac");
    thirdElem.innerHTML = "input schematics here";
  }
}
<div class="input-group-prepend">
  <label class="input-group-text" for="inputGroupSelect01">Brand</label>
</div>
<select class="custom-select" id="a" oninput="chosen()">
  <option selected disabled>Select Brand of car</option>
  <option value="1">Acura</option>
  <option disabled value="2">Alfa Romeo</option>
  <option value="3">Mercedes Benz</option>
  <option value="4">Toyota</option>
  <option value="5">Lexus</option>
  <option disabled value="6">Volvo</option>
  <option value="7">Fiat</option>
  <option disabled value="8">Porsche</option>
  <option value="9">BMW</option>
  <option disabled>options are limited b/c Im Lazy lol</option>
</select>
</div>
<h6 id="aa"></h6>
<h6 id="ab"></h6>
<h6 id="ac"></h6>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.