嘗試在 javascript 中更改 src 時出現空圖像

Question

我正在嘗試通過一個按鈕更改 javascript 中的圖像和一些文本。我可以更改文本，但無論我做什么，如果我更改圖像，它只是一個圖像未找到圖標

這是我的相關 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";
});

同樣，當我單擊時，“reviewnume”和“reviewtext”上的文本會發生變化，但從“review1”到“review2”的圖像不會，即使它們在同一個文件夾中

Answer 1

您收到此錯誤是因為您在使用類名查找元素時忘記使用dot(.)運算符。

我的意思是，你確實-

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

但你應該做——

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

您還為事件偵聽器使用了錯誤的語法。

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

但它應該是——

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

這是工作演示-

 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

試試這個代碼

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

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

如果它不起作用，請檢查路徑或圖像類型是否為 png。

Answer 3

更改 document.getElementById("student").src = "images\review2.png"; 到

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