JavaScript - Encodeuricomponent Fails The First Time (need Two Clicks To Work)

So I am trying to hide content and show it when selected with a select box. The first select box works fine no problems.

However I added a second one with two options, and it will not work at all. If I use the same name it messes up, and if I make a new name, it does nothing at all.

ShowNext function is the new one I added that doesn't work.

PHP Code:
<script type="text/javascript">

function ShowReg(op) {
  document.getElementById('public').style.display='none';
  document.getElementById('alliance').style.display='none';

  switch (op) {
    case 1 : document.getElementById('public').style.display="block"; break;
    case 2 : document.getElementById('alliance').style.display="block"; break;

    default : break;
  }
}

function ShowNext(op) {
  document.getElementById('randomwin').style.display='none';
  document.getElementById('setentry').style.display='none';
  document.getElementById('highestlevel').style.display='none';
  document.getElementById('question').style.display='none';


  switch (op) {
    case 1 : document.getElementById('randomwin').style.display="block"; break;
    case 2 : document.getElementById('setentry').style.display="block"; break;
    case 3 : document.getElementById('highestlevel').style.display="block"; break;
    case 4 : document.getElementById('question').style.display="block"; break;


    default : break;
  }
}
</script> 


PHP Code:
<tr><td><b>Privacy:</b></td><td>
        <select name="privacy" id="choice" onChange="ShowReg(this.selectedIndex)">
       <option value="error">Select One</option>
       <option value="public">Public</option>
        <option value="alliance">Alliance Only</option>
        </select>
        </td></tr></table><br />
        
<div id="public" style="display:none">
<p><b>Contest will be made Public for all players to use.</b>
</div>
<div id="alliance" style="display:none">
  <p><b>Contest will be made available to only alliance members.</b>
</div>


<tr><td><b>Type:</b></td><td>
        <select name="contype" id="choice" onChange="ShowNext(this.selectedIndex)">
        <option value="error">Select One</option>
        <option value="randomwin">Random Draw</option>
        <option value="setentry">Marked Entry</option>
        <option value="highestlevel">Highest Level</option>
        <option value="question">Answer Question</option>
        </select></td></tr></table><br />

<div id="randomwin" style="display:none">
<p>Random draw selected
</div>

<div id="winner" style="display:none">
<p>Select Entry number to auto win:
<select name="entrypick">
<option value="5">Entry 5</option>
<option value="6">Entry 6</option>
<option value="7">Entry 7</option>
<option value="8">Entry 8</option>
<option value="9">Entry 9</option>
<option value="10">Entry 10</option>
<option value="11">Entry 11</option>
<option value="12">Entry 12</option>
<option value="13">Entry 13</option>
<option value="14">Entry 14</option>
<option value="15">Entry 15</option>
<option value="16">Entry 16</option>
<option value="17">Entry 17</option>
<option value="18">Entry 18</option>
<option value="19">Entry 19</option>
<option value="20">Entry 20</option>
<option value="21">Entry 21</option>
<option value="22">Entry 22</option>
<option value="23">Entry 23</option>
<option value="24">Entry 24</option>
<option value="25">Entry 25</option>
<option value="26">Entry 26</option>
<option value="27">Entry 27</option>
<option value="28">Entry 28</option>
<option value="29">Entry 29</option>
<option value="30">Entry 30</option>
</select>
</div> 

Hello all;

I had a quick question about the function onmouseover you can apply to html. I have a slideshow at http://www.tcnj.edu/~intramur/clubsports.php that I want to start when the mouse is moved over the images and to automatically flip through the images after this initial movement. The images are put on a delay in my separate javascript file. However, whenever I move the mouse over the image again, the slideshow jumps ahead. Is there a way to make onmouseover work the first time and then to not work every other time?

I need help so the specific date & time which the text was saved , appears alongside the text automatically each time a question is asked.
It currently just displays the text but NOT DATE OR TIME the text was submitted :/
Thanks a lot in adavance i am just a beginner

Here is the coding JSP :
Code:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<body>
<%@ page import="java.util.Vector " %>
 
Enter a news story here
<form action=Exercise24.jsp method=post>
<textarea name="story" rows=5 cols=100></textarea><br>
<input type=submit value="Save"><br><br>
</form>
All news stories:
<jsp:useBean id="nl" class="newspackage.NewsStore" scope="application"/>
<jsp:setProperty name="nl" property="story"/>
<%
Vector<String> theList = nl.getStories();
%>
<ol>
<%
for (int i=0; i < theList.size(); i++) {
%>
<li> <%= theList.elementAt(i) %> </li>
<%
}
%>
</ol>
</body>

Here is the coding in .java:

Code:

package newspackage;
import java.util.Vector;
public class NewsStore {
Vector<String> stories = new Vector<String>();
public void setStory(String theNews){
stories.addElement(theNews);
}
public Vector<String> getStories() {
return stories;
}
}

Here is the coding to print the specific time WHICH THE QUESTION WAS ASKED:
Code:

<%@page contentType="text/html" import="java.util.*" %>
<!--  http://www.java-samples.com/jsp  -->  
<html>
<body>
This question was submitted  <%= startTime %>. <br>
 <%!
Date startTime = new Date();%>

</body>
</html>

Hi there,

I have a page with 2 navigation menus as well as a slide show (3 separate .js files). I can get them all to work individually but not all together, at the same time.
I looked over you FAQ section but I can't seem to figure it out.
Any help would be hugely appreciated.
Thank you so much.

HTML:
Quote:

<!-- Main content -->
<div id="content">
<div style="text-align:center">
<img id="pic" src="images/slideshow/slideshow1.jpg" width="600" height="600" alt="slideshow" />
</div>

<script type="text/javascript" src="slideshow.js"></script>
</div>




<!-- Site navigation menu -->
<div id="navcontainer">
<ul>
<li>
<div align="center"><img src="images/logo1.jpg" id="logo" alt="Logo" /></div>
</li>
<li><img src="images/buttons/teamandcorpsports1.jpg" id="teamandcorpsports" alt="Team and Corporate Sports" width="224" height="37" /></li>
<li><img src="images/buttons/performancesports1.jpg" id="performancesports" alt="Performance Sports" width="224" height="37" /></li>
<li><img src="images/buttons/flagsandbanners1.jpg" id="flagsandbanners" alt="Flags and Banners" width="224" height="37" /></li>
<li><img src="images/buttons/home1.jpg" id="home" alt="Home" width="224" height="37" /></li>
<li><img src="images/buttons/catalogues1.jpg" id="catalogues" alt="Catalogues" width="224" height="37" /></li>
<li><img src="images/buttons/galleries1.jpg" id="galleries" alt="Galleries" width="224" height="37" /></li>
<li><img src="images/buttons/designown1.jpg" id="designown" alt="Design your Own" width="224" height="37" /></li>


</ul>

</div>

<script type="text/javascript" src="navigation.js"></script>

<div id="footer">
<!-- Site navigation menu - footer -->
<div id="navcontainer_footer">
<ul>


<li><img src="images/buttons/dealerlogin1.jpg" id="dealerlogin" alt="Dealer Log in" width="102" height="29" /></li>
<li><img src="images/buttons/contactus1.jpg" id="contactus" alt="Contact Us" width="102" height="29" /></li>
<li><img src="images/buttons/dealersignup1.jpg" id="dealersignup" alt="Sign Up to be a Dealer Here" width="102" height="29" /></li>
</ul>

</div>

<script type="text/javascript" src="navigation_bottom.js"></script>
</div>
</div>
<!-- End Wrapper -->







slideshow.js

Quote:
var pause = 3000; // interval, in milliseconds, between transitions
var i = 0; // image counter
var pic = document.getElementById("pic"); // the <img> element in the HTML file

// define an array of images
var imgs = new Array("images/slideshow/slideshow1.jpg", "images/slideshow/slideshow2.jpg", "images/slideshow/slideshow3.jpg", "images/slideshow/slideshow4.jpg", "images/slideshow/slideshow5.jpg", "images/slideshow/slideshow6.jpg", "images/slideshow/slideshow7.jpg" );

// preload the images
for (var j = 0; j < imgs.length; j++)
{
var obj = new Image();
obj.src = imgs[j];
}

// rotates between the images in the "imgs" array
function rotate()
{
pic.src = imgs[i];
if (i === (imgs.length -1))
{
i = 0;
}
else
{
i++;
}

setTimeout("rotate()", pause);
}

window.onload = rotate;



navigation_bottom.js
Quote:
// define an array of images
var navImgs = new Array("images/buttons/dealerlogin1.jpg", "images/buttons/contactus1.jpg", "images/buttons/dealersignup1.jpg");


// preload the images by iterating the array
for (var i = 0; i < navImgs.length; i++)
{
var obj = new Image();
obj.src = navImgs[i];
}

// initialize the onmouseover and onmouseout events
function init()
{
// get all the <img> tags in the HTML document as an array
var navContainer = document.getElementById("navcontainer_footer");
var imgArray = navContainer.getElementsByTagName("img");
// var imgArray = document.getElementsByTagName("img");
// loop through the array and bind the onmouseout and onmouseover events
for (var i = 0; i < imgArray.length; i++)
{
var img = imgArray[i];
img.onmouseover = doMouseOver;
img.onmouseout = doMouseOut;
}
}

// define the function for the onmouseover event
function doMouseOver(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

// extract the digit only from the "id" attribute value and concatenate it
// to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg"
var id = img.id;
img.src = "images/buttons/" + id + ".jpg";
//img.src = "images/pic" + id.substring("pic".length) + ".jpg";
}

// define the function for the onmouseout event
function doMouseOut(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

//img.src = "images/button_home1.jpg";
var id = img.id;
img.src = "images/buttons/" + id + "1.jpg";
}

// call the "init" function to initialize the event binding
//window.onload = init;



navigation.js

Quote:
// define an array of images
var navImgs = new Array("images/buttons/logo1.jpg", "images/buttons/teamandcorpsports1.jpg", "images/buttons/performancesports1.jpg", "images/buttons/flagsandbanners1.jpg", "images/buttons/home1.jpg", "images/buttons/catalogues1.jpg", "images/buttons/galleries1.jpg", "images/buttons/designown1.jpg");

// preload the images by iterating the array
for (var i = 0; i < navImgs.length; i++)
{
var obj = new Image();
obj.src = navImgs[i];
}

// initialize the onmouseover and onmouseout events
function init()
{
// get all the <img> tags in the HTML document as an array
var navContainer = document.getElementById("navcontainer");
var imgArray = navContainer.getElementsByTagName("img");
// var imgArray = document.getElementsByTagName("img");
// loop through the array and bind the onmouseout and onmouseover events
for (var i = 0; i < imgArray.length; i++)
{
var img = imgArray[i];
img.onmouseover = doMouseOver;
img.onmouseout = doMouseOut;
}
}

// define the function for the onmouseover event
function doMouseOver(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

// extract the digit only from the "id" attribute value and concatenate it
// to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg"
var id = img.id;
img.src = "images/buttons/" + id + ".jpg";
//img.src = "images/pic" + id.substring("pic".length) + ".jpg";
}

// define the function for the onmouseout event
function doMouseOut(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

//img.src = "images/button_home1.jpg";
var id = img.id;
img.src = "images/buttons/" + id + "1.jpg";
}

// call the "init" function to initialize the event binding
//window.onload = init;