无法使用JS向元素添加onclick事件

Question

Hey I have a span element that I am creating with JS and I want it to also have an onclick event that calls a function. 嘿，我有一个用JS创建的span元素，我希望它也有一个调用函数的onclick事件。 I am referring to the function fillSlides() and dotFunction(), but I will show all of my functions. 我指的是函数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();">&times;</span> <div class="modal-content" id="modal_content"> <a class="elbutton prev" onclick="plusSlides(-1)">&#10094;</a> <a class="elbutton next" onclick="plusSlides(1)">&#10095;</a> </div> </div>

I tried calling dot function from the onclick of a different element (because the span I want to add it to is being created with JS) within the html but nothing happened. 我尝试从html中的其他元素的onclick调用点函数（因为我想将其添加到的跨度是用JS创建的），但是什么也没发生。 How do I do this and what am I doing wrong? 我该怎么办？我在做什么错？

Answer 1

Try putting your script in the head section if you want to bind click handler inside html. 如果要在html内绑定单击处理程序，请尝试将脚本放在开头部分。

Below is the fiddle that i tested with your chanegs. 以下是我用您的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/ " “ https://jsfiddle.net/ajaygandhi06/smca56fv/ ”

It works when you put your js inside head tag. 当您将js放在head标签中时，它可以工作。

无法使用JS向元素添加onclick事件

问题描述

1 个解决方案

解决方案1
0 2017-11-09 18:05:55

无法使用JS向元素添加onclick事件

问题描述

1 个解决方案

解决方案1 0 2017-11-09 18:05:55

解决方案1
0 2017-11-09 18:05:55