img src 返回未定義

Question

我是 JS 新手，不明白為什么我的程序中的圖像沒有改變。 所有變量工作正常。 這是片段

function nextset(){
    var q = document.getElementById("i").src; //gets img src
    var w = document.getElementById("a").src; //gets img src
    var e = q.lastIndexOf("/"); 
    var r = w.lastIndexOf("/");
    var t = q.slice(0, e+1); 
    var a = parseInt(q.slice(e+1, -4));
    var b = parseInt(w.slice(r+1, -4)); 
    if (a < 23) {
        var c = (a + 2).toString();
        var d = (b + 2).toString();
        var e = ".jpg";
        var f = t.concat(c, e); //returns new img directory
        var g = t.concat(d, e); //returns new img directory
        q.src = f; //sets img
        w.src = g; //sets img
        console.log(q.src);
    }
    else {
        algo();
    }
}

所有的圖像都命名為 1.jpg、2.jpg、3.jpg、4.jpg，直到 24。這是一種非常奇怪的做法，我也知道，如果有人知道更好的方法，那就更好了。

Answer 1

問題是q變量不包含 DOM img 元素，而是該元素的 src。 因此，當您設置q.src時，您實際上是在執行此document.getElementById("i").src.src ，這沒有任何意義。 您可以在單獨的變量中提取 DOM 元素。

parseInt也足夠聰明，所以即使你做parseInt("12.jpg")它也會返回數字12 ，所以你不需要做q.slice(e + 1, -4)而這很好q.slice(e + 1)

 function nextset() { var qDOM = document.getElementById("i"); var q = document.getElementById("i").src // https://images.test.com/12.jpg var e = q.lastIndexOf("/"); // 23 var t = q.slice(0, e + 1); // https://images.test.com/ var a = parseInt(q.slice(e + 1)); // 12 if (a < 23) { var c = (a + 1).toString(); // 13 var e = ".jpg"; var f = t.concat(c, e); // https://images.test.com/13.jpg qDOM.src = f; console.log(qDOM.src); } else { algo(); } } nextset()

 <img src="https://images.test.com/12.jpg" alt="" id="i">

另外，我建議您將當前圖像索引存儲在一個變量中，然后遞增它，這將使您的任務更容易。 看看下面的代碼片段：

 const baseURL = "https://images.test.com/"; let currentImg = 1 const imgEl = document.getElementById("i"); function nextImg() { currentImg += 1; if (currentImg <= 24) { imgEl.src = baseURL + currentImg }else { // Do Something } } nextImg(); console.log(imgEl.src); nextImg(); console.log(imgEl.src); nextImg(); console.log(imgEl.src);

 <img src="https://images.test.com/1.jpg" alt="" id="i"/>

Answer 2

您應該設置 HTML 元素的src 。 像這樣的東西：

q = document.getElementById("i"); // Select just the element
  ...
q.src = f; // set the source of image