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

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

目标：若用户在点击提交按钮时并没有从下拉菜单中选择眼睛颜色，HTML消息应该说“请选择眼睛颜色”

否则,， 若用户在点击提交按钮时未从下拉菜单中选择肤色，则HTML消息应显示“请选择肤色”

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

以下是我的HTML和JS代码：

你的眼睛是什么颜色
眼睛颜色
你的肤色是什么
肤色


函数验证（）{
眼色变异；
var肤色；
如果（！eyeColor）{
document.getElementById（“眼睛颜色”）.innerHTML=“请选择眼睛颜色”；
}否则，如果（！skinTone）{
document.getElementById（“skinTone”）.innerHTML=“请选择肤色”；
}
}

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

在

validate（）

方法中，您创建了两个变量，称为

eyeColor

和

skinTone

，但从未设置其值，另外，您的两个if语句验证变量是否具有它们没有的值，因此innerHTML永远不会被命中

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

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

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

您缺少第二个下拉菜单的id。将

id=“skinTone”

添加到

div

元素

删除两个

onchange

函数，因为它们不适用于

元素：

selectMenu1（）

和

selectMenu2（）

。但是，请创建一个附加函数，用于设置

eyeColor

和

skinTone

变量的值。对于下拉菜单中的每个

元素，将

href

设置为

href=“javascript:setMenuValue（this）”

修改

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";
    }

}

---

经过大量的挖掘，我找到了一种不用修改任何代码的方法。事实上，我只是需要添加更多的代码。事实上，我与我的原始代码相差不远：

HTML:

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

并补充说:

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>";
}

---

工作起来很有魅力！就像我希望的那样

如果用户没有选择眼睛颜色或肤色怎么办？如果你能在心里找到将原生HTML select与HTML5表单验证结合使用的方法，那么所有的工作都将为你完成。嗨，MPaul，我更新了我的代码，但它不起作用。我想知道我是否把我的眼睛颜色和肤色id放在了不正确的位置——它们应该在button类中吗？我害怕这样做，因为button类已经有了一个id名。我使用的是引导下拉菜单，这就是为什么会有锚定标签。通过创建应用程序和根据我的研究，我现在认为我应该使用元素来代替。切换这个恐怕会破坏我的代码。我会试试看。我已经修改了我的答案，以考虑到你的锚标签。在一个完美的语义世界中，

标记是首选，但为了不改变代码，您可以将它们作为锚定标记Hanks Paul，很抱歉，我需要这两行的帮助：您应该创建两个全局变量，并将它们设置为空字符串。您的两个函数selectMenu1（）和selectMenu2（）应分别使用所选锚元素的基础数据属性更新全局变量eyeColor和skinTone。我知道“全球”是什么意思，但我应该给他们起个名字吗？var eye=“”；var skin=“”@Alexandra我修改了我的答案，以反映您一直在使用

div

元素作为下拉菜单的容器这一事实。再一次，由于您没有使用

元素，您失去了依赖

onchange

事件的能力，因此为了避免这个问题，我只添加了一个附加函数，它将根据单击的

标记设置javascript变量。您好，Medrupaloscil，您能进一步解释一下吗？“只需放置一个…”你没有列出我应该放在分区下的内容。嗨，对不起，我刚刚编辑了它！我想说一个“p”标签。它将在div下方显示错误消息，而不是替换其内容。嗯，您在两个下拉列表中添加了两个具有相同

id

的标签元素？这不会同时在两个下拉列表中放置相同的错误消息吗？如果您的

var eyeColor

和

var skinTone

不存在，那么错误消息不会总是出现吗？

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";
    }

}

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

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

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>";
}

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