Tabbed view, why isn't it working?
I am trying this simple code, but it only works with pages 1 and 2, for 3 it shows a space. I can't figure out what the problem is, please help!
<div id="allTabs">
<input type="button" value="Page 1" name="b1" onclick='change("page1");'/>
<input type="button" value="Page 2" name="b2" onclick='change("page2");' />
<input type="button" value="Page 3" name="b3" onclick='change("page3");' />
<div id="page1" >This is page 1 </div>
<div id="page2" style="display: none"> This is page 2 </div>
<div id="page3" style="display: none"> This is page 3 </div>
</div>
<script type="text/javascript">
function change(pageId) {
var f=document.getElementById('page1');
var h=document.getElementById('page2');
var k=document.getElementById('page3')
if(pageId=="page1") {
f.style.display= 'block';
h.style.display= 'none';
k.style.diplay= 'none';
}
if(pageId=="page2") {
f.style.display= 'none';
h.style.display= 'block';
k.style.diplay= 'none';
}
if(pageId=="page3") {
f.style.display= 'none';
h.style.display= 'none';
k.style.diplay= 'block';
}
}
</script>
+3
source to share
2 answers
A typo was noted display
as diplay
in the third condition
function change(pageId) {
var f=document.getElementById('page1');
var h=document.getElementById('page2');
var k=document.getElementById('page3');
if(pageId=="page1") {
f.style.display= 'block';
h.style.display= 'none';
k.style.diplay= 'none';
}
if(pageId=="page2") {
f.style.display= 'none';
h.style.display= 'block';
k.style.display= 'none';
}
debugger;
if(pageId=="page3") {
f.style.display= 'none';
h.style.display= 'none';
k.style.display= 'block';
}
}
<div id="allTabs">
<input type="button" value="Page 1" name="b1" onclick='change("page1");'/>
<input type="button" value="Page 2" name="b2" onclick='change("page2");' />
<input type="button" value="Page 3" name="b3" onclick='change("page3");' />
<div id="page1" >This is page 1 </div>
<div id="page2" style="display: none"> This is page 2 </div>
<div id="page3" style="display: none"> This is page 3 </div>
</div>
0
source to share
You've made a stupid spelling mistake. diplay
insteaddisplay
Working example: http://codepen.io/anon/pen/BNNgBO
<div id="allTabs">
<input type="button" value="Page 1" name="b1" onclick='change("page1");'/>
<input type="button" value="Page 2" name="b2" onclick='change("page2");' />
<input type="button" value="Page 3" name="b3" onclick='change("page3");' />
<div id="page1" >This is page 1 </div>
<div id="page2" style="display: none"> This is page 2 </div>
<div id="page3" style="display: none"> This is page 3 </div>
</div>
<script type="text/javascript">
function change(pageId) {
var f=document.getElementById('page1');
var h=document.getElementById('page2');
var k=document.getElementById('page3')
if(pageId=="page1") {
f.style.display= 'block';
h.style.display= 'none';
k.style.display= 'none';
}
if(pageId=="page2") {
f.style.display= 'none';
h.style.display= 'block';
k.style.display= 'none';
}
if(pageId=="page3") {
f.style.display= 'none';
h.style.display= 'none';
k.style.display= 'block';
}
}
</script>
0
source to share