Databases
StackOverflow2013
Postsdbo
POMy javascript function doesn't seem to be working. I can't figure out why
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMy javascript function doesn't seem to be working. I can't figure out why
    text
    copied!<p>My function doesn't seem to be executing correctly. What is wrong? I have already spent 5 hours trying to get this dang function to work. eventually I am going to put links on the photos.</p> <pre><code> &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; var pagenumber=1; function increase() { if(pagenumber == 1) { return } pagenumber++; } function decrease() { if(pagenumber == 5) { return } pagenumber--; } function slider() { if(pagenumber == 1) { document.getElementById('pg1').style.display='inline'; document.getElementById('pg2').style.display='none'; document.getElementById('down').style.cursor='not-allowed'; document.getElementById('down').style.background-position='top'; } if(pagenumber == 2) { document.getElementById('pg1').style.display='h'; document.getElementById('pg3').style.display='none'; document.getElementById('pg2').style.display='inline'; document.getElementById('down').style.cursor='pointer'; document.getElementById('down').style.background-position='bottom'; } if(pagenumber == 3) { document.getElementById('pg2').style.display='none'; document.getElementById('pg4').style.display='none'; document.getElementById('pg3').style.display='inline'; } if(pagenumber == 4) { document.getElementById('pg3').style.display='none'; document.getElementById('pg5').style.display='none'; document.getElementById('pg4').style.display='inline'; document.getElementById('down').style.cursor='pointer'; document.getElementById('up').style.background-position='top'; } if(pagenumber == 5) { document.getElementById('pg4').style.display='none'; document.getElementById('pg5').style.display='inline'; document.getElementById('up').style.cursor='not-allowed'; document.getElementById('up').style.background-position='bottom'; } } &lt;/script&gt; &lt;/head&gt; &lt;body height="183px" bgcolor="#F3F3F3" style="width:279px"&gt; &lt;div id="down" style="float:left;margin-top:29px;height:27px;width:15px;display:block;cursor:pointer;background:url('website/arrow_left.png') no-repeat top left;background-repeat:no-repeat;background-position:top"&gt; &lt;img src="website/pixel.png" width="15px" height="30px" onclick="decrease()" onclick="slider()"&gt; &lt;/div&gt; &lt;div id="up" style="float:right;margin-top:29px;height:27px;width:15px;display:block;cursor:pointer;background:url('website/arrow_right.png') no-repeat top left;background-repeat:no-repeat;background-position:top"&gt; &lt;img src="website/pixel.png" width="15px" height="30px" onclick="increase()" onclick="slider()"&gt; &lt;/div&gt; &lt;table style="background:url('website/arrow_middle.png') no-repeat center" align="center"&gt; &lt;tr id="pg1" style="display:inline"&gt; &lt;td style="padding-left:25px; padding-right:25px"&gt; &lt;a href="google.com"&gt; &lt;img src="website/oil.jpg" width="75px" height="75px"&gt; &lt;/a&gt; &lt;/td&gt; &lt;td style="padding-right:25px"&gt; &lt;a href="amazon.com"&gt; &lt;img src="website/gas.jpg" width="75px" height="75px"&gt; &lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr id="pg2" style="display:none"&gt; &lt;td style="padding-left:25px; padding-right:25px"&gt; &lt;a href="google.com"&gt; &lt;img src="website/nuclear.jpg" width="75px" height="75px"&gt; &lt;/a&gt; &lt;/td&gt; &lt;td style="padding-right:25px"&gt; &lt;a href="amazon.com"&gt; &lt;img src="website/solar.jpg" width="75px" height="75px"&gt; &lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr id="pg3" style="display:none"&gt; &lt;td style="padding-left:25px; padding-right:25px"&gt; &lt;a href="google.com"&gt; &lt;img src="website/wind.jpg" width="75px" height="75px"&gt; &lt;/a&gt; &lt;/td&gt; &lt;td style="padding-right:25px"&gt; &lt;a href="amazon.com"&gt; &lt;img src="website/hydro.jpg" width="75px" height="75px"&gt; &lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr id="pg4" style="display:none"&gt; &lt;td style="padding-left:25px; padding-right:25px"&gt; &lt;a href="google.com"&gt; &lt;img src="website/electric.jpg" width="75px" height="75px"&gt; &lt;/a&gt; &lt;/td&gt; &lt;td style="padding-right:25px"&gt; &lt;a href="amazon.com"&gt; &lt;img src="website/thermal.jpg" width="75px" height="75px"&gt; &lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr id="pg5" style="display:none"&gt; &lt;td style="padding-left:25px; padding-right:25px"&gt; &lt;a href="google.com"&gt; &lt;img src="website/mining.jpg" width="75px" height="75px"&gt; &lt;/a&gt; &lt;/td&gt; &lt;td style="padding-right:25px"&gt; &lt;a href="amazon.com"&gt; &lt;img src="website/transversal.jpg" width="75px" height="75px"&gt; &lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

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