img src 返回未定义答案

【问题标题】：img src returning undefinedimg src 返回未定义
【发布时间】：2021-06-29 09:18:20
【问题描述】：

我是 JS 新手，不明白为什么我的程序中的图像没有改变。所有变量工作正常。这是sn-p

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。这是一种非常奇怪的方法，我也知道，如果有人知道更好的方法，那就更好了。

【问题讨论】：

在你的代码中你开始使用q和w作为字符串，然后你开始使用它们作为HTML元素。

标签： javascript html image src

【解决方案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()

&lt;img src="https://images.test.com/12.jpg" alt="" id="i"&gt;

另外，我建议您将当前图像索引存储在一个变量中，然后将其递增，这将使您的任务更容易。看看下面的代码sn-p：

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

&lt;img src="https://images.test.com/1.jpg" alt="" id="i"/&gt;

【讨论】：

【解决方案2】：

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

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

【讨论】：