javascript - reset style for all divs by partial ID, then style specific div

Question

I think I'm pretty close to a solution, but running into some problems. I have created a nav menu that changes element styles using javascript for onmouseover. For onmousedown, I want to reset all styles for divs that match a partial ID (inside and outside the nav menu), followed by a new style for the clicked "nav" div and related "content" div outside the nav menu.

In other words, I have multiple divs (nav1, nav2, nav3, etc and content1, content2, content3 etc) which I want to target based on common strings ("nav" and "content").

Here is the basic html framework:

<div id="midColumn">
<div id="nav1" 
onmouseover = "slideIn('slide1')" 
onmousedown = "display(this, 'content1')" 
onmouseout = "slideOut('slide1')"
>
INTERACTIONS<span id="hiddenText">&nbsp;are . . .</span>
</div>
<div id="nav2" 
onmouseover = "slideIn('slide2')" 
onmousedown = "display(this, 'content2')"
onmouseout = "slideOut('slide2')"
>
CONSTRUCTIONS<span id="hiddenText">&nbsp;are . . .</span>
</div>
<div id="nav3" 
onmouseover = "slideIn('slide3')" 
onmousedown = "display(this, 'content3')" 
onmouseout = "slideOut('slide3')"
>
DECONSTRUCTIONS<span id="hiddenText">&nbsp;are . . .</span>
</div>
</div>
<div id="rightColumn">
<div id="content1"><img src="Django.jpg" width="400px"></div>
<div id="content2"><img src="Django.jpg" width="500px"></div>
<div id="content3"><img src="Django.jpg" width="700px"></div>

The following javascript almost works, but only the first nav and content div are affected by the querySelector:

function display(div, contentId){
var divIDKeyword = document.querySelector('[id^="nav"]');
var contentIDKeyword = document.querySelector('[id^="content"]');
divIDKeyword.style.color = 'black';
divIDKeyword.style.backgroundColor = 'white';
contentIDKeyword.style.display= 'none';
div.style.backgroundColor = 'black';
div.style.color = 'white';
document.getElementById(contentId).style.display = 'block';
}

Then I tried this, but perhaps I made a mistake because nothing works in this scenario:

function display(div, contentId){
var navIdFind=”nav”
var navString = document.getElementsByTagName('input'), navPartialId;
for (var i = 0; i < navString.length; ++i) {
if (navString[i].name.indexOf(navIdFind)!=-1) {
navPartialId = navString[i].id;
document.getElementById(navPartialId).style.color = 'black';
document.getElementById(navPartialId).style.backgroundColor = 'white';
}
}
var contentIdFind=”content”
var contentString = document.getElementsByTagName('input'), contentPartialId;
for (var i = 0; i < contentString.length; ++i) {
contentPartialId = contentString[i].id;
document.getElementById(contentPartialId).style.display= 'none';
}
}
div.style.backgroundColor = 'black';
div.style.color = 'white';
document.getElementById(contentId).style.display = 'block';
}

I am hoping to find an efficient, elegant solution that minimizes and simplifies the javascript as much as possible. Thanks in advance.

Answer 1

Intead of trying to target partial IDs, just add classes to all of them. For example, for

<div id="content1"></div>
<div id="content2"></div>
<div id="content1"></div>

... make it:

<div id="content1" class="content"></div>
<div id="content2" class="content"></div>
<div id="content1" class="content"></div>

and refer to that group of IDs in CSS as:

.content {color:#999999;back.........etc.....}

this will simplify everything you have tremendously, like you wanted. Hope this helps