如何将innerHTML与JavaScript if/else语句和Bootstrap 4下拉菜单一起使用
我的应用程序已经差不多完成了，只是当用户没有从我的两个下拉菜单中选择一项时，我在合并innerHTML语句时遇到了问题。我目前知道如何使用提醒，但我希望当用户没有做出选择时，消息会出现在页面本身。我是JS的初学者-我知道这会将innerHTML与if/else语句结合在一起，但是我在寻找正确的方法来完成这一点上遇到了一些麻烦。
目标:如果用户在单击SUBMIT按钮时没有从下拉菜单中选择眼睛颜色，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>回答 3
Stack Overflow用户
发布于 2018-06-26 08:17:34
在深入研究之后，我找到了一种不需要更改任何代码的方法。事实上，我只需要添加更多的代码。我实际上离我的原始代码并不太远：
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>";
}}
我决定设计一下它的风格。我添加了一个包含“error”类的span，并在我的CSS中这样做：
.error {
color: #000000;
font-size: 20px;
padding-top: 6px;
padding-bottom: 5px;
}就像一种护身符！就像我希望的那样！
Stack Overflow用户
发布于 2018-06-24 05:31:02
在您的validate()方法中，您创建了两个名为eyeColor和skinTone的变量，而没有设置它们的值，而且您的两个if语句也验证了这两个变量是否具有它们没有的值，因此innerHTML永远不会被命中。
您还需要创建一个元素来放置消息，因为您当前要覆盖所有子元素。
例如，在submit按钮之前创建一个label元素。
<label id="error"></label>您应该创建两个全局变量，并将它们设置为空字符串。
var eyeColor = '';
var skinTone = '';您缺少第二个下拉菜单的id。向div元素添加id="skinTone"。
删除两个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";
}
}Stack Overflow用户
发布于 2018-06-24 05:09:02
您在这里所做的是覆盖您的div eyeColor的innerHTML，因此它将删除所有链接。要显示错误消息，只需在您的div下放置一个空的p标记，并覆盖其内容。
https://stackoverflow.com/questions/51005024
复制相似问题