不确定为什么第二个if-else条件不起作用

Question

在此输入图像描述场景：即使我选择了图像和日期，代码也不起作用。此外，如果我选择2020年，比如说我选择了第一张图片，它应该转到指定的重定向页面。。。当我在同一张第一张图片上选择2021年时，它应该转到另一页。。。如果我使用else-If给出条件"2020n-img"，它不起作用。

代码："用于提交按钮">

<p align=center>
<input type="submit" value="submit" id="button">
</p>


<script type="text/javascript">
let _img = document.getElementById("img");
let _img1 = document.getElementById("img1");
let _img2 = document.getElementById("img2");
let _picker = document.getElementById("picker");
let _btn = document.getElementById("button");
let isImgClicked = false;
let isDatePicked = false;
_img.addEventListener("click", function(){
isImgClicked = true;
});
_img1.addEventListener("click", function(){
isImgClicked = true;
});
_img2.addEventListener("click", function(){
isImgClicked = true;
});
_picker.addEventListener("click", function(){
isDatePicked = true;
});
_btn.addEventListener("click", function(){
if(!isImgClicked || !isDatePicked)
{
alert("select the Year and Click the car image");
}
else 
{
if((isImgClicked == "img") && (isDatePicked == "2020"))
{
window.location.replace("sample.html");
}
else if((isImgClicked == "img") && (isDatePicked == "2019"))
{
window.location.replace("sample1.html");
}
else
{
if((isImgClicked == "img1") && (isDatePicked == "2019"))
{
window.location.replace("sample2.html");
}
else if((isImgClicked == "img1") && (isDatePicked == "2020"))
{
window.location.replace("sample3.html");
}
else
{
alert("!!!!")
}
}
}
});
</script>

对于图像：

<div class="swiper-container">
<div class="swiper-wrapper">
<form>
<div id="img" class="swiper-slide"
style="background-image: url(./img/nature.png)">
<b>nature</b>
</div>
</form>
<div id="img1" class="swiper-slide"
style="background-image: url(./img/nature1.png)">
<b>nature1</b>
</div>
<div id="img2 "class="swiper-slide"
style="background-image: url(./img/nature2.png)">
<b>nature2</b>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>

日期选择器：

<div id="picker">
<p align="center">
<b>Year:</b> <input type="text" id="datepicker">
</p>
</div>
<script>
$(function() {
$('#datepicker').datepicker({
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy',
onClose: function(dateText, inst) { 
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, 1));
}
});
$("#datepicker").focus(function () {
$(".ui-datepicker-month").hide();
$(".ui-datepicker-calendar").hide();
});
});
</script>[enter image description here][2]

Answer 1

好吧，我想我已经为您编写了很多代码。里面有很多错误。首先，您根本无法像您或我那样用字符串检查布尔值。布尔值只有true或false。正如我所解释的，这行代码是一个伪错误：

isImgClicked.equals("img1")  // This will always be false as isImgClicked is boolean only

现在，以下是我所做的，注意您已经在页面中嵌入了jquery。如果有任何疑问，请随时询问。

let _img = document.getElementById("img");
let _img1 = document.getElementById("img1");
let _img2 = document.getElementById("img2");
let _btn = document.getElementById("button");
let isImgClicked = false;
let isDatePicked = false;
/* If any event is clicked!!!! */
$(document).on('click', function(e){
clickId = e.target.id;           // Get id of clicked element
pickedDate = $('#datepicker').val();      // Get value of date picked
// If picked date value is not null, means date is picked
if(pickedDate.length > 0){
isDatePicked = true;
}
if(clickId == 'img' || clickId == 'img1' || clickId == 'img2'){
isImgClicked = true;
selectedImg = clickId;  // Get id of selected image
}
if(clickId == 'button')
{
if(!isImgClicked)
{
alert("select the Year and Click the car image");
}
else 
{
if((selectedImg == "img") && (pickedDate == "2020"))
window.location.replace("sample.html");
else if((selectedImg == "img") && (pickedDate == "2019"))
window.location.replace("sample1.html");
else if((selectedImg == "img1") && (pickedDate == "2019"))
window.location.replace("sample2.html");
else if((selectedImg == "img1") && (pickedDate == "2020"))
window.location.replace("sample3.html");
else
alert("!!!!")
}
}
});

你现在应该可以解决任何其他问题了。可能有div id的混合匹配需要查找。你可以用这个替换提交按钮的js代码，并检查错误。非常感谢。

Answer 2

是否添加了jquery和jqueryui库？如果没有，请在代码的开头(例如标题部分(复制以下行：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

此外，纠正这一行：

<div id="img2 "class="swiper-slide"

这行：

<div id="img2"class="swiper-slide"