Empty image when trying to change src in javascript-CodePudding

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 >
      <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 ></i>
      <i ></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

CodePudding user response：

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 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 = "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 >
      <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 m-a ajutat
          foarte mult sa aprofundez cunostiintele mele de algebra.Recomand cu
          cea mai mare incredere!
        </p>
      </div>

     <i ></i>
      <i ></i>
      
    </div>

CodePudding user response：

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.

CodePudding user response：

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

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