StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here are a few reasons why your code is not working:</p> <ul> <li>showLargeImage and reduceImage are missing invocation parentheses in the places where they are being assigned to window.onload. Without parentheses, window.onload is being assigned a function, but that function is not getting called. You should, for instance, have window.onload = showLargeImage();</li> <li>As you suspected, the second window.onload is overwriting the first.</li> <li>reduceButton is (as you also suspected) being assigned before it exists, causing an error.</li> </ul> <p>Here is one solution that may work for you.</p> <p>HTML:</p> <pre><code><!DOCTYPE html> <html><head><title></title> </head><body> <a href="#" id="thumb">View</a> <div id="lightboxcontainer"></div> </body></html> </code></pre> <p>JavaScript:</p> <pre><code>window.onload = function() { // click link to show var enlargeButton = document.getElementById('thumb'); enlargeButton.onclick = function() { var lightboxContainerId = document.getElementById('lightboxcontainer'); lightboxContainerId.innerHTML = '<img src="http://placehold.it/350x150"' + 'width="350" height="150 alt="Thumb 1">' + '<p>Click image to hide.</p>'; }; // click image to hide var reduceButton = document.getElementById('lightboxcontainer'); reduceButton.onclick = function() { reduceButton.innerHTML = ''; // removes lightbox contents }; }; </code></pre> <p>Live demo: <a href="http://jsfiddle.net/ericmathison/BxwYY/7/" rel="nofollow">http://jsfiddle.net/ericmathison/BxwYY/7/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload