CODEWITHSUNDEEP
javascripthtml
CJ Reynolds
CJ Reynolds

Reputation: 51

accessing nextElementSibling in HTML

I have written a lightbox script in plain JS:

HTML:

<img onclick="pLightbox(this)" src="MyPhoto.jpg" />

JS:

function pLightbox(objPhoto){
   var path=objPhoto.src;
   HTMLtext = '<img src="' + path + '">';
   containerDiv.innerHTML = HTMLtext;
}

(code abbreviated for clarity)

This works fine. Now I'm trying to access the next sibling within the DIV. I have tried:

HTMLtext += '<img src="images/Next.png" onclick="pLightbox(' + objPhoto.nextElementSibling + ')">';

This doesn't work - Tried several different variations (nextElementSibling.src, etc.) , but nothing works.

How do I access the next sibling from an HTML string?

Upvotes: 1

Views: 324

Answers (1)

Oriol
Oriol

Reputation: 287950

Eh, no. Do not concatenate DOM elements with strings. Do not use event handlers. Especially, do not use event handler content attributes.

This is the proper way. No events in HTML. No nasty string manipulation. No HTML injection vulnerabilities.

document.querySelector('img').addEventListener('click', pLightbox);
function pLightbox() {
  containerDiv.innerHTML = "";
  var img = document.createElement('img');
  img.src = this.src;
  img.addEventListener('click', pLightbox.bind(this.nextElementSibling));
  containerDiv.appendChild(img);
}
<img src="//stackoverflow.com/favicon.ico" />
<img src="//scifi.stackexchange.com/favicon.ico" />
<img src="//superuser.com/favicon.ico" />
<img src="//crossvalidated.com/favicon.ico" />
<div id="containerDiv">Click the first image. Then keep clicking the new image</div>

Upvotes: 1

Related Questions