How to add more Javascript buttons to multiple DIV Buttons

Question

Some of my buttons aren't displaying the proper code. For example; when I click iPhone, iPhone 5S the proper names show up with a 1, example: "AT&T1", at the end but when I click iPhone 5 it still shows the names with the with the 1 at the end instead of a 2, example: AT&T2,. It does that with the other buttons also in that row also. Can someone explain to me what I have to do the the javascript code when I want to add another set of button to the same or different buttons?

<!DOCTYPE html>
<html>
<table>
<td>
<a href="#" onclick="javascript:showHide(1);"><button>iPhone</button></a>
<a href="#" onclick="javascript:showHide(2);"><button>Cell Phone</button></a>
<a href="#" onclick="javascript:showHide(3);"><button>iPad</button></a>
<a href="#" onclick="javascript:showHide(3);"><button>iPod</button></a>
<a href="#" onclick="javascript:showHide(4);"><button>Tablet</button></a>
<a href="#" onclick="javascript:showHide(5);"><button>Macbook</button></a>
<a href="#" onclick="javascript:showHide(6);"><button>Mac</button></a>
</td>
</table>

<div id="level1item1" style="display: none;">

<button onclick="subShowHide('1');">iPhone 5S</button>
<button onclick="subShowHide('1');">iPhone 5</button>
<button onclick="subShowHide('1');">iPhone 4S</button>
<button onclick="subShowHide('1');">iPhone 4</button>
<button onclick="subShowHide('1');">iPhone 3GS</button>
 <button onclick="subShowHide('1');">iPhone 3</button>

</div>

<div id="level1item2" style="display: none;">
<button>HTC</button>
<button>Nokia</button>
<button>Motorola</button>
<button>Blackberry</button>
<button>Samsung</button>
<button>LG</button>
</div>

<div id="level1item3" style="display: none;">
<button>iPad Mini</button>
<button>iPad 4th Generation</button>
<button>iPad 3rd Generation</button>
<button>iPad 2nd Generation</button>
<button>iPad 1st Generation</button>
</div>

<div id="level1item4" style="display: none;">
<button>Apple</button>
<button>Amazon</button>
<button>Asus</button>
<button>Google</button>
<button>Microsoft</button>
<button>Samsung</button>
</div>

<div id="level1item5" style="display: none;">
<button>Macbook</button>
<button>Macbook Air</button>
<button>Macbook Pro</button>
</div>
<div id="level1item6" style="display: none;">
<button>iMac</button>
<button>Mac Mini</button>
<button>Mac Pro</button>
</div>

<div id="level1item7" style="display: none;">
<button>Touch</button>
<button>Nano</button>
<button>Classic</button>
</div>

<div id="level2item1" style="display: none;" name="iphone5S">
<button onclick="subSubShowHide('1');">AT&T1</button>
<button onclick="subSubShowHide('1');">Sprint1</button>
<button onclick="subSubShowHide('1');">Verizon1</button>
<button onclick="subSubShowHide('1');">T-Mobile1</button>
<button onclick="subSubShowHide('1');">Unlocked1</button>
<button onclick="subSubShowHide('1');">Other1</button>
</div>

<div id="level2item2" style="display: none;" name="iphone5">
<button onclick="subSubShowHide('1');">AT&T2</button>
<button onclick="subSubShowHide('1');">Sprint2</button>
<button onclick="subSubShowHide('1');">Verizon2</button>
<button onclick="subSubShowHide('1');">T-Mobile2</button>
<button onclick="subSubShowHide('1');">Unlocked2</button>
<button onclick="subSubShowHide('1');">Other2</button>
</div>

<div id="level2item2" style="display: none;" name="iphone4S">
<button onclick="subSubShowHide('1');">AT&T3</button>
<button onclick="subSubShowHide('1');">Sprint13</button>
<button onclick="subSubShowHide('1');">Verizon3</button>
<button onclick="subSubShowHide('1');">T-Mobile3</button>
<button onclick="subSubShowHide('1');">Unlocked3</button>
<button onclick="subSubShowHide('1');">Other3</button>
</div>

<div id="level2item1" style="display: none;" name="iphone4">
<button onclick="subSubShowHide('1');">AT&T4</button>
<button onclick="subSubShowHide('1');">Sprint4</button>
<button onclick="subSubShowHide('1');">Verizon4</button>
<button onclick="subSubShowHide('1');">T-Mobile4</button>
<button onclick="subSubShowHide('1');">Unlocked4</button>
<button onclick="subSubShowHide('1');">Other4</button>
</div>

<div id="level2item4" style="display: none;" name="iphone3gs">
<button onclick="subSubShowHide('1');">AT&T4</button>
<button onclick="subSubShowHide('1');">Unlocked4</button>
</div>

<div id="level2item5" style="display: none;" name="iphone3">
<button onclick="subSubShowHide('1');">AT&T5</button>
<button onclick="subSubShowHide('1');">Unlocked5</button>
</div>

<div id="level2item1" style="display: none;" name="iphone5S">
<button onclick="subSubShowHide('1');">AT&T6</button>
<button onclick="subSubShowHide('1');">Sprint6</button>
<button onclick="subSubShowHide('1');">Verizon6</button>
<button onclick="subSubShowHide('1');">T-Mobile6</button>
<button onclick="subSubShowHide('1');">Unlocked6</button>
<button onclick="subSubShowHide('1');">Other6</button>
</div>

<div id="level3item1" style="display: none;" name="at&t1">
<button onclick="subSubShowHide('1');">Apple iPhone 5S 16GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 5S 32GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 5S 64GB (AT&T)</button>
</div>

<div id="level3item2" style="display: none;" name="sprint1">
<button onclick="subSubShowHide('1');">Apple iPhone 5 16GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 5 32GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 5 64GB (AT&T)</button>
</div>

<div id="level3item3" style="display: none;" name="verizon1">
<button onclick="subSubShowHide('1');">Apple iPhone 4S 16GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 4S 32GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 4S 64GB (AT&T)</button>
</div>

<div id="level3item1" style="display: none;" name="t-mobile1">
<button onclick="subSubShowHide('1');">Apple iPhone 4 8GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 4 16GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 4 32GB (AT&T)</button>
</div>

<div id="level3item2" style="display: none;" name="unlocked1">
<button onclick="subSubShowHide('1');">Apple iPhone 3GS 8GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 3GS 16GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 3GS 32GB (AT&T)</button>
</div>

<div id="level3item3" style="display: none;" name="other1">
<button onclick="subSubShowHide('1');">Apple iPhone 3 8GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 3 16GB (AT&T)</button>
</div>

<script>
function showHide(obj) {
for(i=1;i<=1;i++){
    document.getElementById('qq'+i).style.display = 'none';
}
for(i=1;i<=1;i++){
    document.getElementById('qqq'+i).style.display = 'none';
}
for(i=1;i<=4;i++){
    if (i == obj) {
        document.getElementById('q'+i).style.display = 'block';
    } else {
        document.getElementById('q'+i).style.display = 'none';
    }
}
return false;
}
function subShowHide(obj){
for(i=1;i<=1;i++){
    document.getElementById('qqq'+i).style.display = 'none';
}
for(i=1;i<=1;i++){
    if (i == obj) {
        document.getElementById('qq'+i).style.display = 'block';
    } else {
        document.getElementById('qq'+i).style.display = 'none';
    }
}
return false;
}
function subSubShowHide(obj){
for(i=1;i<=1;i++){
    if (i == obj) {
        document.getElementById('qqq'+i).style.display = 'block';
    } else {
        document.getElementById('qqq'+i).style.display = 'none';
    }
}
return false;
}
</script>

</html>

http://jsbin.com/ITINowI/1/edit

M Khalid Junaid · Accepted Answer · 2013-08-24 20:50:20Z

1

ID Attribute of html elements is supposed to be unique you have multiple divs with same id level1item1 so when you select div with JS or jquery the first div with the id is selected thats whay you see this behavior try to use the class attribute to assign multiple divs

Samne for level1item2,level1item3,level1item4,level1item5,level1item6 ....

edited Aug 24, 2013 at 20:50

answered Aug 24, 2013 at 20:40

M Khalid Junaid

64.6k10 gold badges93 silver badges120 bronze badges

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

7 Comments

user2680614 Over a year ago

The ID's are different. They have level1item1, level2item2, and so on.

user2680614 Over a year ago

Could you please provide me with an example? I'm a bit confused because the give should give them a distinct value.

M Khalid Junaid Over a year ago

you can use CTRL+F :) i found multiple ids from your jsbincode

user2680614 Over a year ago

Could you elaborate or provide and example? @dianuj

Hanlet Escaño Over a year ago

@user2680614 pay attention! You do have repeated IDs. Those are the evils of Copy & Paste...

|

Roger Barreto · Accepted Answer · 2013-08-24 21:22:50Z

Your HTML is all messed:

You shouldn't be using table for that, but UL (list) instead
Table must have rows, you skipping TR elements
You not supposed to use buttons inside anchors
The onclick should be on your button element not on the anchor
The inline "onclick" attribute dont need pseudo "javascript:" information

Despite all these problems, your code should be pointing to each subMenuID:

<button onclick="subShowHide('1');">iPhone 5S</button>
<button onclick="subShowHide('2');">iPhone 5</button>
<button onclick="subShowHide('3');">iPhone 4S</button>
<button onclick="subShowHide('4');">iPhone 4</button>
<button onclick="subShowHide('5');">iPhone 3GS</button>
 <button onclick="subShowHide('6');">iPhone 3</button>

Your javascript must interate for those IDs, the FOR was looping only in the first one (i=1;i<=1;i++)

Fix a little Here but I see you cut and paste to much code, repeated the same IDs and your subSubMenus are all misconfigured in the HTML, each item should have a correct pointing subID (all are pointing to ID 1)

Collectives™ on Stack Overflow

How to add more Javascript buttons to multiple DIV Buttons

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related