For Loop with Array is not working

Question

I have a button that adds one word to the words variable. When the array is at certain lengths I want an image's src to change depending on the array length. Can't seem to get it to work.

var words = [];

var str = words;
for (var i = 0; i < str.length; i++) {
    if (str[i].length === 1) {
        img.src = "http://placehold.it/350x150"


        if (str[i].length === 2) {
            img.src = "http://placehold.it/200x150"

        }
    }
 }

words is empty, and as such so is str, so there's nothing to loop over? — adeneo
– adeneo, Commented May 1, 2016 at 23:57
Nesting if(str[i].length === 2) in if(str[i].length === 1) is useless. — Oriol
– Oriol, Commented May 2, 2016 at 0:02
(1) Missing semicolons after img.src....". (2) Define "Can't seem to get it to work." What is the expected output as opposed to what you get? What errors are showing in the console? — abalter
– abalter, Commented May 2, 2016 at 0:03

Diego Polido Santana · Accepted Answer · 2016-05-02 00:01:34Z

3

you are verifying the length of the position, you need to verify the array directly:

if (words.length === 1) {
  img.src = "http://placehold.it/350x150"
} else if (words.length === 2) {
  img.src = "http://placehold.it/200x150"
}

for that case you don't need a loop

answered May 2, 2016 at 0:01

Diego Polido Santana

1,43511 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AndrewLeonardi Over a year ago

The array starts empty. Then things are added to it. The console.log shows that the word's length are 1 & 2 but the image is not updated?

Damon · Accepted Answer · 2016-05-02 01:08:10Z

1

Assuming you want to dynamically change the image at certain breakpoints, you will also have to register a callback on your button to determine if an update is needed.

var words = [];

$(button).click(function() {
  words.push("whatever");
  var img = // get img here

  if (words.length === 1) {
    img.src = "http://placehold.it/350x150";
  } else if (words.length === 2) {
    img.src = "http://placehold.it/200x150";
  } 

  // etc
});

Edit: Here is a fiddle so you can see it working https://jsfiddle.net/4273v7c7/

edited May 2, 2016 at 1:08

answered May 2, 2016 at 0:10

Damon

4,3562 gold badges19 silver badges27 bronze badges

2 Comments

AndrewLeonardi Over a year ago

The array starts empty. Then things are added to it. The console.log shows that the word's length are 1 & 2 but the image is not updated?

Damon Over a year ago

@AndrewLeonardi check the fiddle I linked. Let me know if that's what you are looking for.

Bekim Bacaj · Accepted Answer · 2016-05-02 00:06:46Z

0

You don't need a loop for that.

var words = [];
var str = [0,"http://placehold.it/350x150", "http://placehold.it/200x150", ... ];
img.src = str[words.length] || img.src;

This will do the job.

answered May 2, 2016 at 0:06

Bekim Bacaj

6,0152 gold badges27 silver badges26 bronze badges

Comments

A. Campbell · Accepted Answer · 2016-05-02 00:08:44Z

0

As Oriol commented, "Nesting if(str[i].length === 2) in if(str[i].length === 1)is useless."

It should be:

var words = [];

var str = words;
for (var i = 0; i < str.length; i++) {
    if (str[i].length === 1) {
        img.src = "http://placehold.it/350x150";
    }
    else if (str[i].length === 2) {
        img.src = "http://placehold.it/200x150";
    }
}

answered May 2, 2016 at 0:08

A. Campbell

4142 silver badges12 bronze badges

1 Comment

AndrewLeonardi Over a year ago

The array starts empty. Then things are added to it. The console.log shows that the word's length are 1 & 2 but the image is not updated?

Collectives™ on Stack Overflow

For Loop with Array is not working

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related