Problems with Js displaying in html

Question

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

Possibly the strict comparison, try changing the `===` to `==` as you have in other areas. — Paul T., Jul 03 '20 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 — Avinash Dalvi, Jul 03 '20 at 18:45

Mahan Lamee · Answer 1 · 2020-07-05T07:14:10.797

1

You had 3 problems in your code:

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?
You used 2 ids in 1 element that will work but it is incorrect.
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.

edited Jul 05 '20 at 07:14

answered Jul 03 '20 at 18:42

Mahan Lamee

322
3
12

This is details about strict operator. Upvoting you explained. – Avinash Dalvi Jul 03 '20 at 18:46
i used `===` because JSLint told me to do that – Jul 03 '20 at 19:27
Mahan lameie, I originally used `==` but that did not seem to work so i instead used `===` – Jul 03 '20 at 19:47
1

@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. – Mahan Lamee Jul 04 '20 at 07:42

score 0 · Accepted Answer · answered Jul 03 '20 at 18:44

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>

Problems with Js displaying in html

2 Answers2