I am looking for way to change 'GetElementById' div inside the div, which I am targeting.

Here's the example:

Let's say I have this

<div onclick="runscript()">
 <div id="insider">  
 </div> 
</div> 
<div onclick="runscript()">  
 <div id="insider">  
 </div> 
</div>
<script>
function runscript(){
document.getElementById('insider').style.color='red';
}
</script>

If I would like to change exactly the same div, which I am clicking on, I could use this.style.color='red', but I need to change "insider" div inside exactly 'this' div I'm clicking on.

I am looking only for javascript solution, no jquery.

I am looking for way to change 'GetElementById' div inside the div, which I am targeting.

Here's the example:

Let's say I have this

<div onclick="runscript()">
 <div id="insider">  
 </div> 
</div> 
<div onclick="runscript()">  
 <div id="insider">  
 </div> 
</div>
<script>
function runscript(){
document.getElementById('insider').style.color='red';
}
</script>

If I would like to change exactly the same div, which I am clicking on, I could use this.style.color='red', but I need to change "insider" div inside exactly 'this' div I'm clicking on.

I am looking only for javascript solution, no jquery.

• javascript
• html
• getelementbyid

• 1 try to use querySelector – MightyPork Commented Jan 11, 2015 at 22:17
• 3 You cannot use the same id twice. It's supposed to be unique. document.getElementById only returns the first id it finds. – Mouser Commented Jan 11, 2015 at 22:17

3 Answers 3

<div onclick="runscript(this)">
   <div class="insider">  
        Sample text
   </div> 
</div> 

Give the insider div a class name called insider and do this:

function runscript(object){
    object.querySelector("div[class='insider']").style.color='red';
}

This works by passing the parent div to the runscript function with the keyword this. Then querySelector will try to find the element based upon the selector div[class='insider']. If found it will set the color of the text to red.

<div onclick="runscript(this)">
 <div class="insider">  
 </div> 
</div> 
<div onclick="runscript(this)">  
 <div class="insider">  
 </div> 
</div>
<script>
function runscript(object){
object.querySelector('.insider').style.color='red';
}
</script>

like in the ments above

• id is an unique identifier - so it is not valid to have an id twice in your DOM
• I remend you to use addEventListener instead of the onclick attribute

I made a fiddle in pure javascript: http://jsfiddle/53bnhscm/8/

HTML:

<div onclick="runscript(this);">
    <div class="insider"></div>
</div>
<div onclick="runscript(this);">
    <div class="insider"></div>
</div>

CSS:

div {
    border: 1px solid black;
    height: 100px;
}
.insider {
    border: 3px solid green;
    height: 20px;  
}

Javascript:

function runscript(x) {
    x.firstElementChild.style.border = '1px solid red';
}