for loop is not setting the HTML the times I have given?

Question

I am trying to make filtration on the website (for my practice) but It is printing the console as the times I have written but it is printing the Html once. can anyone tell me where I am wrong.... Thanks in advance.

Here's some code

var items = [
  {img:"https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311__340.jpg"},
{img:"https://cdn.pixabay.com/photo/2014/05/02/21/50/laptop-336378__340.jpg"},
{img:"https://cdn.pixabay.com/photo/2015/03/26/09/41/phone-690091__340.jpg"},
{img:"https://cdn.pixabay.com/photo/2015/01/20/13/13/ipad-605439__340.jpg"},
{img:"https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311__340.jpg"},
]
let container = document.querySelector(".whole-wrapper")

for(let a = 0;a<=4;a++){
  
 container.innerHTML = `<div class="stuff-container">
      <h3>The Ultimate Iphone</h3>
      <img src="${items[a].img}" alt="Phone" class="phone-img">
      <p>The Mobile With Ultimate Speed</p><br>
    <h4>In Just 50000 rupees</h4>
    </div>
    `
 console.log("hello")
}

*,::before,::after{
 margin:0;
 padding:0;
 box-sizing:border-box; 
  font-family:arial;
}
.whole-wrapper{
  width:95%;
  height:auto;
  border:2px solid red;
  margin:0 auto;
}
.stuff-container{
  text-align:center;
  display:inline-block;
/*   border:5px solid green; */
}
.phone-img{
  width:350px;
  height:auto;
  margin-left:50px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A Great Demo on CodePen</title>
</head>
<body>
  <div class="whole-wrapper">
    
  </div>
</body>
</html>

(Sorry for this akward design)

`=` is the assignment operator and it overwrites the value it helt earlier. Every iteration you are overwriting its value. — Ivar, Feb 11 '21 at 10:29
@Ivar What do you mean by it overwrites the value it helt earlier (specially what do you mean by helt) and if this question seems useful you can upvote this — Shayan Kanwal, Feb 11 '21 at 10:39
If you have `var a = 2;` and then say `a = 3`, your variable `a` will hold the value `3`. Not `23`. The same happens for `container.innerHTML = ...`. If you assign a value to it, you overwrite the value it held before, so only the value you assign last it it in your loop will be kept. — Ivar, Feb 11 '21 at 10:40
@Ivar Brother I get Your Point (but if you don't mind can you tell me the meaning of helt I have searched for this on google but didn't get the right answer — Shayan Kanwal, Feb 11 '21 at 10:44
My bad, I meant [held](https://dictionary.cambridge.org/dictionary/english/held) with a D. — Ivar, Feb 11 '21 at 10:46
@Ivar Brother Thanks, Thanks a lot you have cleared my doughts and if a question seems useful you can upvote this because I am near to 20 reputation — Shayan Kanwal, Feb 11 '21 at 10:53

score 1 · Accepted Answer · answered Feb 11 '21 at 10:28

1

Your problem is this line container.innerHTML = '...'

This will always replace your whole innerHTML and therefore it looks like your loop is only applied once.

Instead try to add the new html to the previous innerHTML like so:

container.innerHTML = container.innerHTML + '...'

Or you can also shorten it like so: container.innerHTML += '...'

var items = [
  {img:"https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311__340.jpg"},
{img:"https://cdn.pixabay.com/photo/2014/05/02/21/50/laptop-336378__340.jpg"},
{img:"https://cdn.pixabay.com/photo/2015/03/26/09/41/phone-690091__340.jpg"},
{img:"https://cdn.pixabay.com/photo/2015/01/20/13/13/ipad-605439__340.jpg"},
{img:"https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311__340.jpg"},
]
let container = document.querySelector(".whole-wrapper")

for(let a = 0;a<=4;a++){
  
 container.innerHTML += `<div class="stuff-container">
      <h3>The Ultimate Iphone</h3>
      <img src="${items[a].img}" alt="Phone" class="phone-img">
      <p>The Mobile With Ultimate Speed</p><br>
    <h4>In Just 50000 rupees</h4>
    </div>
    `
 console.log("hello")
}

*,::before,::after{
 margin:0;
 padding:0;
 box-sizing:border-box; 
  font-family:arial;
}
.whole-wrapper{
  width:95%;
  height:auto;
  border:2px solid red;
  margin:0 auto;
}
.stuff-container{
  text-align:center;
  display:inline-block;
/*   border:5px solid green; */
}
.phone-img{
  width:350px;
  height:auto;
  margin-left:50px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A Great Demo on CodePen</title>
</head>
<body>
  <div class="whole-wrapper">
    
  </div>
</body>
</html>

answered Feb 11 '21 at 10:28

Alex Berger

1,357
1
10
22

Brother if you don't mind can you elaborate your answer and if this question seems useful you can upvote this – Shayan Kanwal Feb 11 '21 at 10:33
Sure, can you tell me which part is not fully clear? – Alex Berger Feb 11 '21 at 10:50
Your answer has resolved my problem but I wanna know somethings like when I am printing the container.innerHTML it is printing only five times but why it is not printing in the document and the other question is that when I am using the =+ it is printing in the console by incrementing the html Why all that stuff is happening – Shayan Kanwal Feb 11 '21 at 10:59
Your answer has resolved my problem but I wanna know somethings like when I am printing the container.innerHTML it is printing only five times but why it is not printing in the document and the other question is that when I am using the =+ it is printing in the console by incrementing the html Why all that stuff is happening – Shayan Kanwal Feb 11 '21 at 11:04
The printing of five times is because you specified it in your loop `a <= 4` and `a` ist starting at `0`. So it is printing it for `0, 1, 2, 3, 4` and stops as soon as `a` holds the value of `5`. Everything inside your loop is happening 5 times. So 5 `hello` in console because of `console.log('hello')` and 5 times adding HTML to your container with ´container.innerHTML +=´. So basically the `console.log` has nothing to do with `container.innerHTML`. – Alex Berger Feb 11 '21 at 11:13
Brother what do you mean by a ist starting at 0 I have specified a =0 and the other thing is that why it has nothing to do with the console though it is printing the console as i said above – Shayan Kanwal Feb 11 '21 at 11:20
"i have specified a = 0" exactly that's why it is starting at 0 – Alex Berger Feb 11 '21 at 11:21
@Hoargrath may I understand this phenomenon through debugging because I a not getting the point about console – Shayan Kanwal Feb 11 '21 at 11:24
You don't need console output. You can completely remove the line with `console.log('Hello')` and everything will run just fine. Console output is mainly used for debugging / info for developers. – Alex Berger Feb 11 '21 at 11:29
@Hoargrath I think you are not getting my point (please upvote this question if this seems useful to you and I will be able to discuss this topic in chat) Like I am saying when I am printing the container.innerHTML with all its stuff (whole HTML code) it is printing five times as it has to do but why it is not printing that way in the document and the other thing is that when I am adding the += in the like this container.innerHTML +=(whole HTML code ) it is printing everything by the increment of one and is is not printing that way in the doument – Shayan Kanwal Feb 11 '21 at 11:34

for loop is not setting the HTML the times I have given?

1 Answers1