無法使用JS向元素添加onclick事件
[英]Unable to add an onclick event to element using JS
問題描述
嘿，我有一個用JS創建的span元素，我希望它也有一個調用函數的onclick事件。 我指的是函數fillSlides（）和dotFunction（），但我將展示我的所有函數。
function openModal() { document.getElementById('myModal').style.display = "block"; } function closeModal() { document.getElementById('myModal').style.display = "none"; } var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function fillSlides(modalID){ var container = document.getElementsByClassName("modal-content"); var bcontainer = document.getElementById("myModal"); var dcontainer = document.createElement('dot_content'); var slides = { "1": ["Images/LS_01.jpg", "Images/LS_02.jpg", "Images/LS_03.jpg", "Images/LS_04.jpg" ], "2": ["Images/LS_05.jpg", "Images/LS_06.jpg", "Images/LS_07.jpg", "Images/LS_08.jpg" ], "3": ["Images/img1.jpg", "Images/img2.jpg", "Images/img3.jpg", "Images/2.jpg" ] }; var modal_num = modalID.getAttribute('data-modal'); //alert(slides[modal_num].length); for (var i = 0 ; i < slides[modal_num].length; i++) { var the_divs = document.createElement('div'); var s_img = document.createElement('img'); var s_dot = document.createElement('span'); the_divs.className = 'mySlides'; s_img.src = slides[modal_num][i]; the_divs.appendChild(s_img); container[0].appendChild(the_divs); dcontainer.className = 'dot-content'; dcontainer.id = 'dot_content'; s_dot.className = 'demo'; dcontainer.appendChild(s_dot); container[0].appendChild(dcontainer); s_dot.onclick = currentSlide(i); } } /* function clearSlides(){ var myNode = document.getElementById("modal_content"); while (myNode.firstChild) { myNode.removeChild(myNode.firstChild); } }*/ function clearSlides() { var myNode = document.getElementById("modal_content"); //use spread operator to convert nodelist to array for using // array methods var c = [...myNode.children]; c.forEach(function(item, index) { console.log(item) // check if the current element have a class using 'contains' if (!item.classList.contains('elbutton')) { //use remove method to remove the element item.remove(); } }) } /* function clearSlides(){ var myNode = document.getElementById("modal_content"); var childNodes = myNode.childNodes; for(var i=0; i<childNodes.length; i++){ if(childNodes[i].className === "mySlides"){ myNode.removeChild(childNodes[i]) } } } */ function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; //captionText.innerHTML = dots[slideIndex-1].alt; } function dotfunction() { var slides = document.getElementsByClassName("mySlides"); var dotfunctionadder = document.getElementsByClassName("demo"); for (var i = 0; i < slides.length; i++) { dotfunctionadder.onclick = currentSlide(i); } }
<body id="modal-2"> <h2 id="title" style="text-align:center">hellkkko</h2> <div class="row"> <div class="column"> <img id="modal-1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="1" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor"> </div> </div> <div class="row"> <div class="column"> <img id="modal-2" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="2" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor"> </div> </div> <div class="row"> <div class="column"> <img id="modal-3" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="3" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor"> </div> </div> <div id="myModal" class="modal"> <span class="close cursor" onclick="clearSlides(); closeModal();">×</span> <div class="modal-content" id="modal_content"> <a class="elbutton prev" onclick="plusSlides(-1)">❮</a> <a class="elbutton next" onclick="plusSlides(1)">❯</a> </div> </div>
我嘗試從html中的其他元素的onclick調用點函數（因為我想將其添加到的跨度是用JS創建的），但是什么也沒發生。 我該怎么辦？我在做什么錯？
1 個解決方案
解決方案1
0 2017-11-09 18:05:55
如果要在html內綁定單擊處理程序，請嘗試將腳本放在開頭部分。
以下是我用您的chanegs測試過的小提琴。
<head>
<script>
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
..........
</script>
<head>
“ https://jsfiddle.net/ajaygandhi06/smca56fv/ ”
當您將js放在head標簽中時，它可以工作。
在沒有庫或使用onclick屬性的情況下將事件添加到元素的最佳方法？
[英]Best way to add an event to an element without a library or using the onclick attribute?
無法使用javascript在onclick（）上添加新文本框並禁用元素
[英]unable to add new text box on onclick() using javascript and disable an element
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.