[英]JavaScript ReferenceError: x is not defined
我试图建立一个网页来显示一些图像，并单击弹出时在底部显示缩略图的模态。 我引用了w3Schools来创建它并对其进行了一些修改，但现在收到了ReferenceError：控制台中未定义currentImg。 当我单击图像时，会弹出模态，但是单击箭头时图像不会改变。 请求帮助以了解该错误以及如何解决该错误。 请在下面找到我的代码。
function openModal() { document.getElementById('myModal').style.display = "block"; } function closeModal() { document.getElementById('myModal').style.display = "none"; } var slideIndex = 1; showImgs(slideIndex); function plusImg(n) { showImgs(slideIndex += n); } function plusImg(n) { showImgs(slideIndex = n); } function showImgs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > x.length) { slideIndex = 1; } if (n < 1) { slideIndex = x.length; } alert(x.length) for (i = 0; i < x.length; i++) { alert(i) x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-opacity-off", ""); } x[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " w3-opacity-off"; captionText.innerHTML = dots[slideIndex - 1].alt; }
.s4 img { height: 413px; width: 319px; margin: 0px; cursor: pointer; } #myModal span { cursor: pointer; } .w3-content { max-width: 1200px; } .w3-content .mySlides { width: 100%; } .w3-content .w3-col { padding: 5px; } .demo { width: 100%; }
<head> <title>Commander, Carrier Strike Group ELEVEN (CCSG 11) Fact Sheet</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> </head> <body> <div class="w3-container"> <div class="w3-row-padding"> <div class="w3-col s4"> <img src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page1.jpg" onclick="openModal();currentImg(1)" class="w3-hover-shadow"> <img src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page2.jpg" onclick="openModal();currentImg(2)" class="w3-hover-shadow"> <img src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page3.jpg" onclick="openModal();currentImg(3)" class="w3-hover-shadow"> <img src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page4.jpg" onclick="openModal();currentImg(4)" class="w3-hover-shadow"> <img src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page5.jpg" onclick="openModal();currentImg(5)" class="w3-hover-shadow"> </div> </div> <div id="myModal" class="w3-modal w3-black" style="display: block;"> <span class="w3-text-white w3-xxlarge w3-hover-text-grey w3-container w3-display-topright" onclick="closeModal()">×</span> <div class="w3-modal-content"> <div class="w3-content"> <img class="mySlides" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page1.jpg" style="display: block;"> <img class="mySlides" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page2.jpg" style="display: none;"> <img class="mySlides" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page3.jpg" style="display: none;"> <img class="mySlides" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page4.jpg" style="display: none;"> <img class="mySlides" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page5.jpg" style="display: none;"> <div class="w3-row w3-black w3-center"> <p id="caption">Page 1</p> <span class="w3-display-left w3-btn" onclick="plusImg(-1)"><</span> <span class="w3-display-right w3-btn" onclick="plusImg(1)">></span> </div> <div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off w3-opacity-off" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page1.jpg" onclick="currentImg(1)" alt="Page 1"> </div> <div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page2.jpg" onclick="currentImg(2)" alt="Page 2"> </div> <div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page3.jpg" onclick="currentImg(3)" alt="Page 3"> </div> <div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page4.jpg" onclick="currentImg(4)" alt="Page 4"> </div> <div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page5.jpg" onclick="currentImg(5)" alt="Page 5"> </div> </div> </div> </div> </div> </body>
您有2个名称为plusImg的函数。 只需将第二个重命名为currentImg
function plusImg(n) {
showImgs(slideIndex += n);
}
function plusImg(n) {
showImgs(slideIndex = n);
}
您的JavaScript代码中存在一些问题：
currentImg缺少功能
function currentImg(n) { console.log(n); showImgs(n); } 有重复的plusImg函数，请删除第二个
showImgs函数存在错误，请检查我的更新js代码
function openModal() { document.getElementById('myModal').style.display = "block"; } function closeModal() { document.getElementById('myModal').style.display = "none"; } var slideIndex = 1; showImgs(slideIndex); function plusImg(n) { showImgs(slideIndex += n); } function currentImg(n) { console.log(n); showImgs(n); } function showImgs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (!x.length) return; slideIndex = n; if (n > x.length) { slideIndex = 1; } if (n < 1) { slideIndex = x.length; } console.log(x.length) for (i = 0; i < x.length; i++) { console.log(i) x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-opacity-off", ""); } x[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " w3-opacity-off"; captionText.innerHTML = dots[slideIndex - 1].alt; } 顺便说一句，我将警报更改为console.log，以获得更好的调试体验。 我还添加了样式
.mySlides {display:none}
请检查。 希望以上有帮助。
Uncaught ReferenceError: x is not defined — JavaScript
[英]Uncaught ReferenceError: x is not defined — JavaScript
简单的Javascript程序：未捕获的ReferenceError：未定义x
[英]Simple Javascript program: Uncaught ReferenceError: x is not defined
简单代码：JavaScript，未捕获的 ReferenceError：(x) 未定义
[英]Simple Code: JavaScript, Uncaught ReferenceError: (x) is not defined
节点 Javascript class ReferenceError: X is not defined
[英]Node Javascript class ReferenceError: X is not defined
ReferenceError: x 未定义。 JavaScript class 中的“for x of arr”循环
[英]ReferenceError: x is not defined. "for x of arr" loop in a JavaScript class
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.