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

您应该设置 HTML 个元素的 src。类似的东西:

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

Answer 2

问题是 q 变量不包含 DOM img 元素，而是包含该元素的 src。因此，当您设置 q.src 时，您实际上是在执行此操作 document.getElementById("i").src.src，这是没有意义的。您可以将 DOM 元素提取到单独的变量中。

而且 parseInt 足够聪明，所以即使你 parseInt("12.jpg") 它也会 return 数字 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"/>

img src 返回未定义

img src returning undefined

javascript

html

image

src