尝试在 javascript 中更改 src 时出现空图像

Question

I am trying to change an image and some text in javascript trough a button.I can change the text but no matter what I do if I change the image it's just an image not found icon

Here's my relevant html: `

<div class="review1">
      <img id="student" src="images\review1.png" />
      <div id="review1text">
        <h1 id="reviewnume">Alina,21</h1>
        <p id="reviewtext">
          Sunt studenta la Politehnica in Bucuresti si Pitagora.ro m-a ajutat
          foarte mult sa aprofundez cunostiintele mele de algebra.Recomand cu
          cea mai mare incredere!
        </p>
      </div>

     <i class="fa-solid fa-circle-arrow-left"></i>
      <i class="fa-solid fa-circle-arrow-right"></i>
      
    </div>

And here is my javascript:

let btnNext = document.querySelector("fa-solid fa-circle-arrow-right");
let btnprevious = document.querySelector("fa-solid.fa-circle-arrow-left");



btnNext = addEventListener("click", () => {
  document.getElementById("reviewtext").textContent =
    "Nu am reusit sa ajung la cursurile mele de algebra din cause serviciului.In orice caz,nu a fost mare pierdere deoarece Pitagora.ro m-a ajutat sa recuperez materia fara probleme";
  document.getElementById("reviewnume").textContent = "Bogdan,22";
  document.getElementById("reviewnume").style.textAlign = "center";
  document.getElementById("reviewtext").style.fontSize = "25px";
  document.getElementById("reviewtext").style.marginLeft = "20px";
  document.getElementById("student").src = "images\review2.png";
});

Again,the text on "reviewnume" and "reviewtext" changes when I click but the image from "review1" to "review2" doesn't,even though they are in the same folder

Answer 1

You are getting this error because you forgot to use the dot(.) operator when finding an element using a class name.

I mean, you did-

let btnNext = document.querySelector("fa-solid fa-circle-arrow-right");

But you should do-

let btnNext = document.querySelector(".fa-solid .fa-circle-arrow-right");
or
let btnNext = document.querySelector(".fa-circle-arrow-right");

You also used the wrong syntax for the event listener.

btnNext = addEventListener("click", () => {...});

but it should be-

btnNext.addEventListener("click", () => {...});

Here is the working demo-

 let btnNext = document.querySelector(".fa-circle-arrow-right"); let btnprevious = document.querySelector(".fa-circle-arrow-left"); btnNext.addEventListener("click", () => { document.getElementById("reviewtext").textContent = "Nu am reusit sa ajung la cursurile mele de algebra din cause serviciului.In orice caz,nu a fost mare pierdere deoarece Pitagora.ro ma ajutat sa recuperez materia fara probleme"; document.getElementById("reviewnume").textContent = "Bogdan,22"; document.getElementById("reviewnume").style.textAlign = "center"; document.getElementById("reviewtext").style.fontSize = "25px"; document.getElementById("reviewtext").style.marginLeft = "20px"; document.getElementById("student").src = "https://picsum.photos/id/237/200/300"; }); btnprevious.addEventListener("click", () => { document.getElementById("student").src = "https://picsum.photos/200/300"; });

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="review1"> <img id="student" src="https://picsum.photos/200/300" /> <div id="review1text"> <h1 id="reviewnume">Alina,21</h1> <p id="reviewtext"> Sunt studenta la Politehnica in Bucuresti si Pitagora.ro ma ajutat foarte mult sa aprofundez cunostiintele mele de algebra.Recomand cu cea mai mare incredere! </p> </div> <i class="fa-solid fa-circle-arrow-left"></i> <i class="fa-solid fa-circle-arrow-right"></i> </div>

Answer 2

Try this code

const image = document.getElementById("student");

image.setAttribute("src","images\review2.png");

If it doesn't work check the path or the type of image is png or not.

Answer 3

change document.getElementById("student").src = "images\review2.png"; to

document.getElementById("student").setAttribute('src', "images\review2.png");