access to element in parent div with javaScript?

Question

Hi I want to access all function just do in a div ! for Example :

<div class="ow_chat_dialog" id="main_tab_contact_11">
<iframe id="myframe"></iframe>
<button onclick="sersrc()"></button>
</div>

<div class="ow_chat_dialog" id="main_tab_contact_12">
<iframe id="myframe"></iframe>
<button onclick="sersrc()"></button>
</div>

<div class="ow_chat_dialog" id="main_tab_contact_13">
<iframe id="myframe"></iframe>
<button onclick="sersrc()"></button>
</div>
14
15
16
.
.
....
<script>
function setscr(){
document.findviewbyid("myframe").src="hrl..."
}
</script>

in this code i can create some div with one class name and id... But when i click on any button the first iframe change ! if i want just change the sibling iframe ! ** just use javaScript , Not Jquery .

invalid html, duplicate id myframe

user2575725
– user2575725

2014-12-06 08:27:36 +00:00
Commented Dec 6, 2014 at 8:27 — user2575725
– user2575725, Commented Dec 6, 2014 at 8:27
So , how i can solve it ? this div create by user ...

محمد
– محمد

2014-12-06 10:03:31 +00:00
Commented Dec 6, 2014 at 10:03 — محمد
– محمد, Commented Dec 6, 2014 at 10:03

dfsq · Accepted Answer · 2014-12-06 08:27:24Z

2

Don't use ids, they must be unique. Use classes instead:

<div class="ow_chat_dialog" class="main_tab_contact_13">
    <iframe class="myframe"></iframe>
    <button onclick="sersrc(this)"></button>
</div>

Then let sersrc know which button was clicked by passing button reference. From there you can find sibling iframe like this for example:

function setscr(obj) {
    obj.parentNode.querySelector(".myframe").src = "hrl..."
}

If you are sure that iframe is going to be always immediately before the button then you can simply do

obj.previousElementSibling.src = "hrl..."

(course this is less reliable since depends on structure).

answered Dec 6, 2014 at 8:27

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

7 Comments

محمد Over a year ago

Uncaught TypeError: Cannot read property 'querySelector' of undefined

dfsq Over a year ago

Did you pass this reference: onclick="sersrc(this)" ?

محمد Over a year ago

i use this : var frame = this.parentNode.querySelector(".myframe"); frame.contentWindow.location.href = 'localhost:8585/demos/project/index.html';;

dfsq Over a year ago

You should use obj.parentNode, because this is not button, but global object window.

محمد Over a year ago

agane Error : Uncaught TypeError: Cannot set property 'src' of null

|

Oriol · Accepted Answer · 2014-12-06 08:31:12Z

0

var els = document.querySelectorAll('.ow_chat_dialog > button');
function handler () {
  this.previousElementSibling.src = "//stackoverflow.com";
}
for (var i=0; i<els.length; ++i)
  els[i].addEventListener('click', handler);

<div class="ow_chat_dialog">
  <iframe id="myframe"></iframe>
  <button></button>
</div>
<div class="ow_chat_dialog">
  <iframe id="myframe"></iframe>
  <button></button>
</div>
<div class="ow_chat_dialog">
  <iframe id="myframe"></iframe>
  <button></button>
</div>

answered Dec 6, 2014 at 8:31

Oriol

291k71 gold badges459 silver badges535 bronze badges

6 Comments

محمد Over a year ago

how i can use ur code in a function ? if it is Further what ? dose we have previousElementSibling in javaScript ?

محمد Over a year ago

if i chage iframe and button ! first button and then iframe can i use ur code ? i want use ur javaScript code in button onclick !

Oriol Over a year ago

Avoid inline event listeners. Just write the code you want to run at on click in handler function.

محمد Over a year ago

Uncaught TypeError: Cannot set property 'src' of undefined

Oriol Over a year ago

You are doing something wrong. this.previousElementSibling can't never be undefined.

|

Collectives™ on Stack Overflow

access to element in parent div with javaScript?

2 Answers 2

7 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related