时间戳

首页 > 解决方案 > Js在html中显示的问题

javascript - Js在html中显示的问题

问题描述

我有一个问题，JS 没有改变第三个函数中的 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 中了解它是如何工作的

标签： javascripthtml

解决方案

您的代码中有 3 个问题：

  1. 为什么在第三个函数中写 === 而不是 == ？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 也是不正确的，但它不会产生任何错误，但最好改变它。希望这对您有所帮助。

推荐阅读