CODEWITHSUNDEEP
javascripthtmldom
Peter24
Peter24

Reputation: 71

How do I change the image source?

I have 8 numbers and when I click on one of the numbers, it should change the image source link to the specified picture link. I works if I don't click on the "next" button. If I click the "next" button first and click on the numbers later, the picture won't change. Do I write anything wrong in the addeventlistener?

Below are the html code of numbers and the "next" button

<div class="image-viewer__display">
  <img
    src="https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF"
    id="display">
  <div class="image-viewer__display-source-wrapper">
    <span><a
        href="https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF"
        target="_blank">
        https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF</a>
    </span>
  </div>
</div>
<div class="image-viewer__button"><img src="./images/next.png" id="next" /></div>
<div class="page">
  <div class="order" data-value="1">1</div>
  <div class="order" data-value="2">2</div>
  <div class="order" data-value="3">3</div>
  <div class="order" data-value="4">4</div>
  <div class="order" data-value="5">5</div>
  <div class="order" data-value="6">6</div>
  <div class="order" data-value="7">7</div>
  <div class="order" data-value="8">8</div>
</div>

this is js code

function rr(){
    index = url.indexOf(element.getAttribute('src'))
    //back.style.backgroundImage = "url('./images/loading.gif')"
    if(index === 0){
        console.log(1)
        element.src = "./images/loading.gif"
        element.onload = function() {element.setAttribute('src', url[index+1]);}
        show[0].innerHTML = "<span><a href=" + url[index+1] + " target=\"_blank\" >"  + url[index+1] + "</a>"+ "</span>"
        left.classList.remove('disabled')
        left.addEventListener("click", ll)
    }else if(index !== url.length-2 && index !== url.length-1){
        // element.innerHTML = "<img src=" + url[index+1] + ">"
        console.log(2)
        element.src = "./images/loading.gif"
        element.onload = function() {element.setAttribute('src', url[index+1]);}
        //element.setAttribute('src', url[index+1])
        show[0].innerHTML = "<span><a href=" + url[index+1] + " target=\"_blank\" >"  + url[index+1] + "</a>"+ "</span>"
    }else if(index === url.length-2){
        console.log(3)
        element.src = "./images/loading.gif"
        element.onload = function() {element.setAttribute('src', url[index+1]);}
        //element.setAttribute('src', url[index+1])
        show[0].innerHTML = "<span><a href=" + url[index+1] + " target=\"_blank\" >"  + url[index+1] + "</a>"+ "</span>"
        right.classList.add('disabled')
        right.removeEventListener("click", rr)
    }else {
        console.log(4)
        right.classList.add('disabled')
        right.removeEventListener("click", rr)
    }
}
    for (var i = 0; i < order.length; i += 1) {
        const element = document.querySelector('#display')
        order[i].addEventListener('click', function (e) {
        value = e.target.getAttribute('data-value')
          console.log(value);
          element.setAttribute('src', url[value-1])
          show[0].innerHTML = "<span><a href=" + url[value-1] + " target=\"_blank\" >"  + url[value-1] + "</a>"+ "</span>" 
          if(value === '1'){
            console.log(20)
            left.classList.add('disabled')
            right.classList.remove('disabled')
        }else if(value === (url.length).toString()){
            console.log(66)
            right.classList.add('disabled')
            left.classList.remove('disabled')
        }else{
            console.log(33)
            left.classList.remove('disabled')
            right.classList.remove('disabled')
            
        }
        right.addEventListener("click", rr)
        left.addEventListener("click", ll)
        })
    }

Upvotes: 0

Views: 92

Answers (1)

wasif
wasif

Reputation: 15518

Try this:

document.getElementById("display").setAttribute("src", url[value-1]);

Upvotes: 1

Related Questions