如何在JavaScriptif/Else语句和Bootstrap 4下拉菜单中使用innerHTML?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (224)

我的应用程序差不多已经完成了,当用户没有从我的两个下拉菜单中选择一个项时,我只是在合并innerHTML语句时遇到了问题。我目前知道如何使用警报来执行此操作,但当用户不进行选择时,我希望消息显示在页面本身上。我是JS的初学者-我知道这将是将innerHTML与if/etc语句结合在一起,但是我很难找到正确的方法来完成这个任务。

目标:如果用户没有从下拉菜单中选择眼睛颜色,点击提交按钮,内HTML信息应该说:“请选择一个眼色。”

否则,如果用户不从下拉菜单中选择肤色,点击Submit按钮innerHTML消息应注明“请选择一个肤色”。

否则,如果用户没有从下拉菜单中选择眼睛颜色和肤色,点击Submit按钮innerHTMl消息应该说:“请选择一个眼睛颜色和肤色。”

这是我的HTML和JS

代码:

        <h3 class="display-4" style="font-size: 1.5rem;">What is your eye color</h3>
    <div class="dropdown">
        <div class="input-group justify-content-center">
            <div class="input-group-btn">
                <button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
                    Eye Color

                </button>

                <div class="dropdown-menu" onchange="selectMenu1" aria-labelledby="dropdownMenuButton" id="eyeColor">
                    <a class="dropdown-item" href="#" data="brown" ><img src="img/brown_eye.jpg" class="rounded-circle"> Brown</a>
                    <a class="dropdown-item" href="#" data="blue" ><img src="img/blue_eye.jpg" class="rounded-circle" > Blue</a>
                    <a class="dropdown-item" href="#" data="green" ><img src="img/green_eye.jpg" class="rounded-circle" > Green</a>
                    <a class="dropdown-item" href="#" data="hazel" ><img src="img/hazel_eye.jpg" class="rounded-circle" > Hazel</a>
                </div>

            </div>
        </div>
    </div>

    <!--Drop down Item 2-->

    <h3 class="display-4" style="font-size: 1.5rem;"> What is your skin tone</h3>
    <div id="menu2" class="dropdown">
        <div class="input-group justify-content-center">
            <div class="input-group-btn">
                <button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
                    Skin Tone
                </button>

                <div class="dropdown-menu" onchange="selectMenu2"  aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#" data="fair"><img src="img/fair.jpg" class="rounded-circle" > Fair</a>
                    <a class="dropdown-item" href="#" data="light"><img src="img/light.jpg" class="rounded-circle" > Light</a>
                    <a class="dropdown-item" href="#" data="medium"><img src="img/medium.jpg" class="rounded-circle" > Medium</a>
                    <a class="dropdown-item" href="#" data="bronze"><img src="img/bronze_dark.jpg" class="rounded-circle" > Bronze</a>
                    <a class="dropdown-item" href="#" data="tan"><img src="img/tan.jpg" class="rounded-circle" > Tan</a>
                    <a class="dropdown-item" href="#" data="rich"><img src="img/dark.jpg" class="rounded-circle" > Rich</a>
                </div>

            </div>
        </div>
    </div>

    <br>

    <!--Result Button-->

    <button type="button" class="btn btn-info btn-lg active" title ="Submit" style="background-color: #3e4444;" onclick="validate()" id="demo"><i class="fas fa-arrow-circle-right fa-lg"></i></button>

<script>
function validate() {
    var eyeColor;
    var skinTone;

    if(!eyeColor){
        document.getElementById("eyeColor").innerHTML = "Please select an eye color";
    } else if (!skinTone){
        document.getElementById("skinTone").innerHTML = "Please select a skin tone";
    }

}
</script>
提问于
用户回答回答于

在你的validate()方法创建两个名为eyeColorskinTone如果没有设置它们的值,那么你的2个if语句也会验证变量是否有一个值,但是它们没有,这样就永远不会击中innerHTML。

你还需要创建一个元素,当你当前要覆盖所有子元素时,应该在其中放置消息。

例如,在Submit按钮之前创建一个Label元素。

<label id="error"></label>

你应该创建2个全局变量,并将它们设置为空字符串。

你的2项职能selectMenu1()selectMenu2()应该更新全局变量eyeColorskinTone分别与底层data属性的属性。

修改你的validate()方法如下:

function validate() {   
    if(eyeColor == ''){
        document.getElementById("error").innerHTML = "Please select an eye color";
    } else if (skinTone == ''){
        document.getElementById("error").innerHTML = "Please select a skin tone";
    }

}
用户回答回答于

你在这里所做的是覆盖你的divEyecolor的内部HTML,因此它将删除你的所有链接。若要显示错误消息,只需输入一个在你的div下面没有任何内容并覆盖他的内容。

扫码关注云+社区

领取腾讯云代金券