Menu
Community /Pin to ProfileBookmark
@daveyerwinJul 22.2019 — #
` gets visible.@daveyerwinJul 22.2019 — #@DaveyErwin#1606587
Thank you to the staff
I will be aware of that
in the future
it does not have a style element
I should have said
it does not have a style property@daveyerwinJul 24.2019 — #
Javascript loop terminates by some reason
When I do only an if statement the iteration loops as expected:
“`
if (list[i].id === page) {
list[i].id.style.display = “block”;
}
But if I add an else statement it stops after the first item:
“`
if (list[i].id === page) {
list[i].id.style.display = “block”;
} else{
list[i].id.style.display = “none”;
}
What am I doing wrong?
Besides this no elements are hidden. Any tip?
Sign in
to post a comment6 Comments(s) ↴
0
@daveyerwinJul 22.2019 — # list[i].style.display = "none";list[i]</C> is a reference to the p element <br/>
it has a style property<br/>
<C>list[i].id</C> is the value of the p elements Id<br/>
it does not have a style element
<CODE>`<i>
</i><html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>getElementsByClassName Test</h1>
<p class="step" id="1">Page 1.</p>
<p class="step" id="2">Page 2.</p>
<p class="step" id="3">Page 3.</p>
<form>
<input type="button" value="Hide other steps" onclick="show(3)">
</form>
<script>
function show(page) {
var list = document.getElementsByClassName("step");
for (var i = 0; i < list.length; i++) {
alert("loop " + list[i].id)
if (list[i].id == page) {
list[i].style.display = "none";
}
}
}
</script>
</body>
</html><i>
</i>`</CODE>
Edited by site staff: Added inline code tags so that <C>[i]`0
@daveyerwinJul 22.2019 — #Thank you to the staff
I will be aware of that
in the future
it does not have a style element
I should have said
it does not have a style property
0
@daveyerwinJul 24.2019 — #``<i>
</i><head>
<style>
p{display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;}
.step{display:none;}
</style>
</head>
<p class="step">Page 1.</p>
<p class="step">Page 2.</p>
<p class="step">Page 3.</p>
wwwwww
<script>
(function(){
var steps = document.querySelectorAll('.step');
var page = 0;
steps[page].style.display = 'block';
function next(){
steps[page].style.display = '';
page = (++page > 2) ? 0 : page;
steps[page].style.display = 'block';
}
for(var i=0;i<steps.length;i++){steps[i].onclick=next}
})()
</script><i>
</i>``