CODEWITHSUNDEEP
javascripthtmlimagesrc
Vidit Aggarwal
Vidit Aggarwal

Reputation: 47

img src returning undefined

I am new to JS and don't understand why the image in my program isn't changing. all the variables work fine. Here is the snippet

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

All the images are named 1.jpg, 2.jpg, 3.jpg,4.jpg, till 24. This a really weird way of doing this and I know that also if anyone knows a better way that would be better.

Upvotes: 0

Views: 2096

Answers (2)

Som Shekhar Mukherjee
Som Shekhar Mukherjee

Reputation: 8168

The problem is that the q variable does not contain the DOM img element but the src of that element. So, when you're setting q.src you are actually doing this document.getElementById("i").src.src which does not make sense. You can extract the DOM element in a separate variable.

Also parseInt is smart enough so even if you do parseInt("12.jpg") it will return the number 12, so you dont need to do q.slice(e + 1, -4) instead this is fine 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">

Also, I would suggest you to store the current image index in a variable and then incrementing it, it would make your task much easier. Take a look at the code snippet below:

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"/>

Upvotes: 1

tmsbrndz
tmsbrndz

Reputation: 1347

You should set src of HTML element. Something like that :

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

Upvotes: 0

Related Questions