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”），它也会返回12，因此您不需要执行q.slice(e+1,-4)这是很好的q.slice(e+1)

null

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()

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