StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>What you want to do here is place <strong>all</strong> the content you want to replace inside a <code><div></code>.</p> <p>then you will want to give that div an <code>id</code> attribute.</p> <p>e.g.</p> <pre><code><div id="yourID"> HTML CONTENT HERE </div> </code></pre> <p>Then in javascript, you would need to create a function that would fire on an <code>onclick</code> event.</p> <p>Markup:</p> <pre><code><input type="button" onclick="changeContent('yourID', '<div>OtherHTML</div>')" value="NEXT" /> </code></pre> <p>when you have these 2 components, you will want to make a script that will execute your function.</p> <pre><code><script type="text/javascript"> function changeContent(id, html) { //Get the element that needs it's contents replaced. var container = document.getElementById(id); //insert new HTML onclick. container.innerHTML = html; } </script> </code></pre> <p>This is a simple example of what you need. You could externalize this javascript in a seperate file.</p> <p>If you want to do this, you will need to include the script in the <code><head></code> of your html document.</p> <pre><code><script type="text/javascript" src="path/to/js.js"></script> </code></pre> <p>Because this will load before any of the DOM will have been loaded, you will get errors.</p> <p>To solve this, the new contents of the file will be:</p> <p><strong>js.js</strong></p> <pre><code>window.onload = function() { function changeContent(id, html) { //Get the element that needs it's contents replaced. var container = document.getElementById(id); //insert new HTML onclick. container.innerHTML = html; } } </code></pre> <p>This should work for you in this scenario.</p> <p>Hope this helped</p> <p>&dash; Sid</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