是javascript的初学者...在以下代码中,提交button()的逻辑不起作用“ btn.addEventListener
”。只有if部分正在执行,else部分出现一些问题还有一个查询,在其他部分中,通过div id给出的“ img”是正确的。
"if(isImgClicked.equals('img') && isDatePicked.equals('2020'))
{
window.location.replace("sample.html");
}"
<div id="img" class="swiper-slide"
style="background-image: url(./img/product.png)">
<b>product</b>
</div>
场景:如果我选择2020年n说要选择第一张图像,则应转到指定的重定向页面...当我选择2021年n同一张第一图像时,应转到另一页。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Swiper slider</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesh
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="swiper.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>welcome user!!</h3>
<h2>Select by Year & Model</h2>
<div id="picker">
<p align="center">
<b>Year:</b> <input type="text" id="datepicker">
</p>
</div>
<form align="right" name="form1" method="post" action="log_out.php">
<label class="logoutLblPos"> <input class="submit"
type="button" value="Log out" />
</label>
<div class="swiper-container">
<div class="swiper-wrapper">
<form>
<div id="img" class="swiper-slide"
style="background-image: url(./img/product.png)">
<b>product</b>
</div>
</form>
<div id="img1" class="swiper-slide"
style="background-image: url(./img/Product.png)">
<b>product</b>
</div>
<div id="img2" class="swiper-slide"
style="background-image: url(./img/product2.png)">
<b>product2</b>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="swiper.min.js"></script>
<!-- Initialize Swiper -->
<script type=text/javascript>
var swiper = new Swiper('.swiper-container', {
effect : 'coverflow',
grabCursor : true,
centeredSlides : true,
slidesPerView : 'auto',
coverflowEffect : {
rotate : 50,
stretch : 0,
depth : 100,
modifier : 1,
slideShadows : true,
},
pagination : {
el : '.swiper-pagination',
},
});
</script>
<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>
</form>
</body>
</html>
else
条件工作正常,如果在alert()
块中放置else
作为第一条语句,则会观察到此情况。
问题是您的isImgClicked
,而isDatePicked
只会是true
或false
。它们永远不会分配给您代码其余部分的任何其他内容,并且不能包含任何其他值。
因此isImgClicked.equals('img') && isDatePicked.equals('2020')
之类的条件不可能永远成立。即使它们确实具有字符串,字符串,布尔值或任何本机JavaScript类型都没有equals()
函数,因此,每次单击按钮时,此代码肯定会产生错误。确保在测试代码时都检查浏览器的JavaScript控制台。
要解决,您需要将isImgClicked
和isDatePicked
分配给有意义的值,或者需要从_picker
和其他元素中获取正确的数据。