html中Js显示的问题

Question

我有一个问题，JS 没有更改第三个 function 中的 HTML 有人能告诉我为什么或告诉我如何更改此代码以使其工作吗？

 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>

旁注：我使用了Bootstrap 4.0您还可以在此网页 Bigbn.oyosite.com 中了解它的工作原理

Answer 1

您的代码中有 3 个问题：

1. 为什么在第三个 function 中写 === 而不是 ==？ x、y 和 z 是字符串，因此需要进行类型转换。 请使用 == 而不是 ===。 请阅读本文以了解 === 和 == 之间的区别： 在 JavaScript 比较中应该使用哪个等于运算符（== vs ===）？
2. 您在 1 个元素中使用了 2 个 ID，这将起作用，但它不正确。
3. 您可以通过浏览器开发工具找到主要问题。 当它开始运行 function l()时，它会出错。 你为x和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;

您使用了 getElement by Id 而不是 getElement By Id

总之，如果您更改by By和===更改为== ，您的代码将起作用。 但是使用 2 个 id 也是不正确的，但它不会产生任何错误，但最好改变它。 希望这对您有所帮助。

Answer 2

有一个问题是您对元素使用多个 id，这是不正确的。 也如所说的评论。 由于严格模式。 如果情况下，它会导致进入内部

 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>