javascript - 如何将innerHTML与JavaScript if/else语句和Bootstrap 4下拉菜单一起使用

Question

我的应用程序已经基本完成，只是当用户没有从我的两个下拉菜单中选择项目时，我在合并innerHTML 语句时遇到了麻烦。我目前知道如何通过警报来执行此操作，但我希望当用户未进行选择时消息出现在页面本身上。我是 JS 的初学者 - 我知道这将把 innerHTML 与 if/else 语句结合起来，但是我在找到完成此操作的正确方法时遇到了一些麻烦。

目标:如果用户在单击“提交”按钮时未从下拉菜单中选择眼睛颜色，innerHTML 消息应显示“请选择眼睛颜色”。

否则如果， 如果用户在单击“提交”按钮时未从下拉菜单中选择肤色，innerHTML 消息应显示“请选择肤色”。

否则，如果用户在单击“提交”按钮时未从下拉菜单中选择眼睛颜色和肤色，则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>

Answer 1

在您的 validate() 中方法您创建两个名为 eyeColor 的变量和skinTone在不设置它们的值的情况下，您的两个 if 语句也会验证变量是否具有它们没有的值，因此 insideHTML 永远不会被命中。

您还需要创建一个应放置消息的元素，因为您当前要覆盖所有子元素。

例如，在提交按钮之前创建一个标签元素。

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

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

var eyeColor = '';
var skinTone = '';

您缺少第二个下拉菜单的 ID。添加id="skinTone"到div元素。

删除你的两个onchange功能，因为它们不能与 <div> 一起使用元素:selectMenu1()和selectMenu2() 。但是，请创建一个附加函数来设置 eyeColor 的值。和skinTone变量。对于每个<a>下拉菜单中的元素，设置 href至href="javascript:setMenuValue(this)" .

function setMenuValue(obj)
{
    if (obj !== undefined)
    {
        if (obj.parentElement.id == 'eyeColor')
        {
            // Update the global variable eyeColor
            eyeColor = obj.getAttribute('data');
        }
        else if (obj.parentElement.id == 'skinTone')
        {
            // Update the global variable skinTone
            skinTone = obj.getAttribute('data');
        }
    }
}

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

function validate() {   
      // Show error if the eyeColor or skinTone variables are still an empty string
      if(eyeColor == ''){
        document.getElementById("error").innerHTML = "Please select an eye color";
    } else if (skinTone == ''){
        document.getElementById("error").innerHTML = "Please select a skin tone";
    }

}