how do i update the html when a button is clicked (change image when button is clicked)-CodePudding

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 >
                <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 >
        <div >
          <div >
            <h2>client showcase</h2>
            <br />
            <div ></div>
            <div id="controls">
              <button >
                <img src="left.jpg" alt="previous client" />
              </button>
              <button >
                <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

CodePudding user response：

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 >
        <div >
          <div >
            <h2>client showcase</h2>
            <br >
            <div >
              <!-- 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 >
                <img src="left.jpg" alt="previous client">
              </button>
              <button >
                <img src="right.jpg" alt="next client">
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

CodePudding user response：

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