Menu
Community /Pin to ProfileBookmark
@daveyerwinJul 12.2021 — #@RaulRogojan#1634029
Please ask for explanation of any code you do not understnd@daveyerwinJul 12.2021 — #@RaulRogojan#1634035
@daveyerwinJul 12.2021 — #@RaulRogojan#1634037
Looping through an array JS
I have an array of string and an h1 element. I am trying to replace the innerHTML of the h1 element with a string from the array in the order that the strings are placed in the array.
I am using a for loop but it seems like the index does not increment the way I wanted. I can’t access each individual index in order. It loops through the array very fast and give’s me the last index of the array.
Here’s the code pen:
Sign in
to post a comment5 Comments(s) ↴
0
@daveyerwinJul 12.2021 — #``<i>
</i><h1 class="text"></h1>
<button class="button">click me</button>
<script>
"use strict"
var arr = ['Hello world!','How are you?', 'My name is John', 'Have a nice day'];
const text = document.querySelector('.text');
const button = document.querySelector('.button');
text.textContent = arr.shift();
function changeH1WithDelay(){
if(arr.length)text.textContent = arr.shift();
setTimeout(changeH1WithDelay,1000);
}
button.addEventListener('click', (e) => {
e.target.style.display='none';
changeH1WithDelay();
})
</script><i>
</i>``Please ask for explanation of any code you do not understnd
0
@daveyerwinJul 12.2021 — #``<i>
</i><h1 class="text"></h1>
<button class="button">click me</button>
<script>
"use strict"
var arr = ['Hello world!','How are you?', 'My name is John', 'Have a nice day'];
const text = document.querySelector('.text');
const button = document.querySelector('.button');
text.textContent = arr.shift();
function changeH1WithClick(){
if(arr.length)text.textContent = arr.shift();
}
button.addEventListener('click',changeH1WithClick)
</script><i>
</i>``0
@daveyerwinJul 12.2021 — #``<i>
</i><h1 class="text"></h1>
<button class="button">click me</button>
<script>
"use strict"
var arr = ['Hello world!','How are you?', 'My name is John', 'Have a nice day'];
const text = document.querySelector('.text');
const button = document.querySelector('.button');
var changeH1PreserveArr = (function(){
var temp = arr.splice(0);
text.textContent=temp.shift();
return function(){
if(temp.length)text.textContent=temp.shift();
}
}());
button.addEventListener('click',changeH1PreserveArr);
</script><i>
</i>``