Question

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

目标：如果用户在单击“提交”按钮时未从下拉菜单中选择眼睛颜色，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语句也可以验证变量是否具有不具有的值，因此innerHTML将永远不会被点击。

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

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

<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()

Answer 2

您在这里所做的是覆盖div eyeColor的innerHTML，因此它将删除所有链接。要显示错误消息，只需在您的div下放置一个p标签，其中不带任何内容，然后覆盖其内容即可。

Answer 3

经过大量的挖掘，我找到了无需更改任何代码的方法。实际上，我只需要添加更多代码即可。实际上，我与原始代码相距不远：

HTML：

<div class ="dropdown-menu" id="eyeColor">

我将此添加到了每个下拉菜单

<div class="error" id="error"></div>

然后是我的JS-

我摆脱了这个：

function validate() {
    var eyeColor;
    var skinTone;

并添加了此内容：

if (!eyeColor){
  document.getElementById("error").innerHTML = "<span class='error'>Please choose an eye color</span>";
}
else if (!skinTone){
  document.getElementById("error").innerHTML = "<span class='error'>Please choose a skin tone</span>";
}

}

我决定对它进行样式设置。我添加了一个带有“错误”类的跨度，并在CSS中完成了此操作：

.error {
  color: #000000;
  font-size: 20px;
  padding-top: 6px;
  padding-bottom: 5px;
}

像魅力一样工作！就像我希望的那样！

如何将innerHTML与JavaScript if / else语句和Bootstrap 4下拉菜单结合使用

3 个答案: