单击按钮时如何更新 html（单击按钮时更改图像）

Question

I'm trying to update the html when a button is clicked.

I have tried to solve this issue for a few hours now and I don't know if I'm stupid but the images are not changing

 const slider = document.querySelector(".slider") const btn = document.querySelector(".next") const btn2 = document.querySelector(".previous") const images = ['car.jpg', `left.jpg`] window.addEventListener("load", iniliatizeSlider()) function iniliatizeSlider(){ var x = 0 cars = '' cars += `<div class="slide"> <img src="${images[x]}" alt"client"> <br><br> </div>` slider.innerHTML = cars; } btn.addEventListener("click", consoleMsg) btn2.addEventListener("click", consoleMsg2) function consoleMsg(){ x=1 } function consoleMsg2(){ x=0 }

 <section id="slider-section"> <div class="container"> <div class="subcontainer"> <div class="slider-wrapper"> <h2>client showcase</h2> <br /> <div class="slider"></div> <div id="controls"> <button class="previous"> <img src="left.jpg" alt="previous client" /> </button> <button class="next"> <img src="right.jpg" alt="next client" /> </button> </div> </div> </div> </div> </section>

I was expecting the image to change when the button was clicked but the image stayed the same but the value of x changed

Answer 1

Your initialize function is running once, when the page loads and at that point you are setting the image source to 0 and you never change it after that. You need to adjust the image source within the functions that react to button clicks. Now you do update x in those functions but nothing is ever done with x after that point.

A couple of other things... With .addEventListener() , you pass a reference to the callback function, not invoke the function, so the line should be: window.addEventListener("load", iniliatizeSlider) <-- no () after the function name.

Also, you don't need to replace the HTML on the page to update the image, you only need to update the image's src property.

See comments below:

 // Get a reference to an existing image element. // No need to recreate the <img> element. const img = document.querySelector(".slider img"); const next = document.querySelector(".next"); const prev = document.querySelector(".previous"); const images = ["https://cache.mrporter.com/content/images/cms/ycm/resource/blob/1252204/68e7f03297f41cb3ce41f15ec478f70f/image-data.jpg/w1500_q80.jpg", "https://play-lh.googleusercontent.com/VC7rta8PIK3MqmQG5c-F5CNJQ6cCv6Eb-kyBoUcQ2xj83dZVhn7YCj_GIWW8y7TnAMjU=w240-h480-rw"]; let currentIndex = 0; // Keeps track of which image is shown next.addEventListener("click", function(){ // Check to see if we're at the end of the array if(currentIndex === images.length-1){ currentIndex = 0; // Reset index } else { currentIndex++; // increase the index } img.src = images[currentIndex]; // Just update the existing image's source }); prev.addEventListener("click", function(){ // Check to see if we're at the beginning of the array if(currentIndex === 0){ currentIndex = images.length-1; // Reset index } else { currentIndex--; // decrease the index } img.src = images[currentIndex]; // Just update the existing image's source });

 img { width:50px; }

 <section id="slider-section"> <div class="container"> <div class="subcontainer"> <div class="slider-wrapper"> <h2>client showcase</h2> <br > <div class="slider"> <,-- Here. we just put a static image element with the first image we want to see: --> <img src="https.//cache.mrporter.com/content/images/cms/ycm/resource/blob/1252204/68e7f03297f41cb3ce41f15ec478f70f/image-data.jpg/w1500_q80.jpg"> </div> <div id="controls"> <button class="previous"> <img src="left.jpg" alt="previous client"> </button> <button class="next"> <img src="right.jpg" alt="next client"> </button> </div> </div> </div> </div> </section>

Answer 2

Call the function initializeSlider() on click of btn indtead of consoleMsg().