JavaScript - Urgently Seeking Help On For Loop For Exam!!!

Hi, I have a question here. I have 2 videos and if I click the image which uses #usemap, it will switch to the specific videos I clicked. FF and chrome has no problem but only IE.

The scenario is like this:

Actual scenario is when the page load, it will display tab 1, video 1 and tab 2 is greyed out. If I clicked on tab 2, tab 1 is greyed out and video 2 is display. Both tabs I use #usemap.

But now the problem in IE is that it keeps on displaying tab 1 and video 2 instead of video 1 and when I clicked tab 2, tab 2 is selected but no video is loaded.

Below is a simple code which hope it can helps better understanding of what I'm trying to do:

Code:

<div>
<img src="tab.jpg" id="tab1" #usemap="videotab">
<img src="tab.jpg" id="tab2" #usemap="videotab">
</div>

<div id="video1" style="display:block"><"1st video source codes here"></div>
<div id="video2" style="display:none"><"2nd video source codes here"></div>

<map name="videotab">
<area href="" onclick="swapvideo(1); return false;" />
<area href="" onclick="swapvideo(2); return false;" />
</map>

function swapvideo(num){
	
	if (num == 1)
	{
		document.getElementById("video1").style.display = "block";
		document.getElementById("video2").style.display = "none";
		
		document.getElementById("tab1").style.display = "block";
		document.getElementById("tab2").style.display = "none";
	}
	
	else if (num == 2)
	{
		document.getElementById("video2").style.display = "block";
		document.getElementById("video1").style.display = "none";
		
		document.getElementById("tab2").style.display = "block";
		document.getElementById("tab1").style.display = "none";
	}
}

This is the brief code.

IE just keep displaying video 2 when page load and video doesn't loads when tab 2 is clicked. Even if I program the 2 divs to be show, it only shows video 2 and video 1 is nowhere to be seen. And I tried taking out the video 2 codes, video 1 then can be seen.

Hope you guys out there can understand what I'm trying to say.

Okay so I'm trying to come up with as many alternative methods to accomplish something. So I'm just seeking input from anyone who is willing to supply some.

After the user clicks on a match type it'll know HOW MANY sides to the match there are so say for a singles match it'd have 2 sides (1 vs. 1) for a Triple Threat Match it'd have 3 sides (1 vs. 1 vs. 1) and so on. All matches have a stored field in the database of how many sides they have.

So I'm thinking that I could have it create 3 divs (or something) down in the competitors area of how many sides there are in the match (separated by a VS. text block) and when the user selects a character from the dropdown and adds a character the user can maybe drag and drop the character's name to whatever side they choose.

Its one idea. If you think of an EASIER more EFFICIENT way to do something like this and have an idea say something please or even if you can't let me know that you think it's a worth while idea.

Code:

<label for="matchtypedrop<?php echo $i+1 ?>">Match Type:</label>
            <select class="dropdown" name="matchtypedrop<?php echo $i+1 ?>" id="matchtypedrop<?php echo $i+1 ?>" title="Match Type <?php echo $i+1 ?>">
                <option value="0">- Select -</option>
               <?php
                $query = 'SELECT id, matchtype FROM matchtypes';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['id']."\">".$row['matchtype']."</option>\r";
                }
                ?>
            </select>

<label for="competitors<?php echo $i+1 ?>">Competitors:</label><ul id="competitors<?php echo $i+1 ?>" style="list-style: none; margin-left: 195px;"></ul>
            <select class="dropdown" name="charactersdrop<?php echo $i+1 ?>" id="charactersdrop<?php echo $i+1 ?>" title="Characters Dropdown <?php echo $i+1 ?>" style="margin-left: 195px;">
                <option value="0">- Select -</option>
               <?php
                $query = 'SELECT id, `character` FROM characters ORDER BY `character`';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['id']."\">".$row['character']."</option>\r";
                }
                ?>
            </select>
            <input type="button" value="Add Character" class="" onclick="Competitors(<?php echo $i+1 ?>)"/>

Hi All,

I am looking to build a gallery similar to this one:
http://www.designguru.co.za/pages/brand.php

I am new to MooTools and don't know where to start, which plug ins etc..

Can anyone help me or just point me in the right directions

Thanks in advance

Hello, I'm new to this forum. I want to improve my ability to write JavaScript and am looking for a friendly place to find some constructive criticism and suggestions on my code.

This script does not have any practical use (that I can think of); it calculates prime numbers. It is just an exercise. I am looking for suggestions on all aspects from the CSS/aesthetics to the HTML and of course the JavaScript.

I posted the script here.

One definite thing that bugs me is the cursor is not in the text field when the page loads. Also it would be better if the user had the option of hitting the return key in addition to the submit button. Suggestions appreciated.

Code:

<!DOCTYPE html>
<html lang="en">
<head>

<title>Prime Number Calculator</title>
	<style type="text/css">
		form{
			width: 200px;
			border: solid 3px blue;
			border-style: double;
			padding:5px;
			text-align:center;
			background-color:#eee;
		}
		#title{
		
			text-align:center;
			border: solid 1px blue;
			background-color:#fff;
			margin:5px;
			padding:0px;
		}
	</style>
	<script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
		var candidates = new Array();
		function calculatePrimes(form){
  			var max = form.input.value; 
			
			//Check to make sure input is a number
			if(isNaN(max)){
				alert("Dude, you must enter a number!");
			}
			
			for(i=2; i<=max; i++){candidates[i]=i;}
			
			var i=2;
			for(i=2; i<Math.sqrt(max); i++){
				if (candidates[i]!=0){
					var j=i*i;
					while(j<max){
						candidates[j] = 0;
						j=j+i;
					}
				}
			}
			
			//Pull the primes out of the candidates
			i=2;
			var primesOut = "";
			for(i=2; i<max; i++){
				if(candidates[i]!= 0){
					primesOut = primesOut + ((i>2)?", " : "" ) + candidates[i];
				}
			}
			form.output.value = primesOut;
		}
	</script>
<head>
<body>
	<form>
		<h2 id="title">Prime-Number Calculator</h1>
		Check up to:<input type="text" name="input" size="5" value="100" \> <br />
		<textarea rows="5" cols="20" name="output"></textarea>
		<input  name="calc" value="Find!" type=button onClick="calculatePrimes(this.form)">
	</form>
</body>
</html>

Hi,

I've been looking for a client-side form validation script which will check each field before submitting the form.

Can anyone point me to a good one that looks professional. I want it to make a nice presentation of any errors as well, perhaps, as showing a 'tick' sign when the field is correctly filled in .

bazz

I'm no coder, as you will soon discover. The web work I do is from a purely novice, even hobby standpoint and the sites I create and host are nothing more than favors for friends and acquaintances who have needed but have not had a presence on the web. This being explained, I am asking those with coding skills to please take a look at the site I've just completed for a little diner down the road. (They're just starting out and can't afford to pay a professional web designer and, unfortunately, are stuck with me.)

The site is http://d-n-ddiner.com

I'm the first to say that the mouseover sound would drive me crazy, but the guys who own the diner are enthusiastic and want it left as is. I have had to combine scripts in order to have the "black-and-white to color" image effect work simultaneously with sound. The sound script depends on uploaded files: soundmanager.js, soundcontroller.swf and sound-config.xml and its tags are found incorporated with each involved image, within the body. The image effects are just the result of playing around with bits and pieces I've seen, mucking about the Internet. Its script is found within the head and also within the body, in each involved image's area, in mouseover, mouseout and, of course when specifying "name=" (such as Img_1).

I opted for providing the sound in this manner because I am able to use an .mp3 file, rather than having to weigh through the pros and cons of .au versus .wav, etc., and the fickle nature of different browsers and plug-in crashes. After having many test the site (friends with varying operating systems and browsers) it appears that this mp3 solution makes the mouseover sound available to a broader range of users. Success has been achieved with Firefox, Safari, Netscape, Omniweb and Chrome. However, Internet Explorer and Opera seem to be the holdouts for both Mac and PC users.

All this brings me to two requests: Would someone take a look at the site (particularly with Firefox) to determine if something might be done to help the page load more smoothly? Secondly, is there some sleight-of-hand that might be incorporated into the script to help IE and Opera detect the mouseover sound or do you consider these two browsers essentially not worth the bother?

I am attaching a zip of the sound files I mentioned. The mp3 is not included but any mp3 snippet would do for testing, provided the sound config file is edited to reflect its file name.

My primary concern is smooth page-loading; the IE and Opera issue is of less importance. Thank you for your patience and for any assistance you would offer.

Ok, I'm nearly pulling my hair out with this one. I have been looking at this code for two evenings now, and rewrote it 4 times already. It started out as jQuery code and now it's just concatenating strings together.

What I'm trying to do: Build a menu/outline using unordered lists from a multidimensional array.

What is happening: Inside the buildMenuHTML function, if I call buildMenuHTML, the for loop only happens once (i.e. only for 'i' having a value of '0'.) If I comment out the call to itself, it goes through the for loop all 3 times, but obviously the submenus are not created.

Here is the test object:
Code:

test = [
	{ 
	  "name" : "Menu 1", 
		"url" :  "menu1.html",
		"submenu" : [
		  {
				"name" : "menu 1 subitem 1",
				"url" :  "menu1subitem1.html"
			},
			{
				"name" : "menu 1 subitem 2",
				"url" :  "menu1subitem2.html"
			} ]
	},
	{ 
	  "name" : "Menu 2",
	  "url" :  "menu2.html", 
		"submenu" : [ 
		  { 
			  "name" : "menu 2subitem 1", 
			  "url" :  "menu2subitem1.html"
			},
		  { 
			  "name" : "menu 2subitem 1",
			  "url" :  "menu2subitem1.html"
		  } ]
	},
	{ 
	  "name" : "Menu 3",
	  "url" :  "menu3.html", 
		"submenu" : [ 
		  { 
			  "name" : "menu 3 subitem 1", 
			  "url" :  "menu3subitem1.html"
			},
		  { 
			  "name" : "menu 3 subitem 1",
			  "url" :  "menu3subitem1.html"
		  } ]
	}
];

Here is the recursive function:
Code:

function buildMenuHTML(menuData,level) {
	var ul;
	if (level == 1) {
		ul = "<ul id='menu'>";
	} else {
		ul = "<ul class='level" + level + "'>";
	}

	for (i = 0; i < menuData.length; i++) {
		menuItemData = menuData[i];
		
		ul += "<li>";
		ul += "<a href='" + menuItemData.url + "'>" + menuItemData.name + "</a>";
		
		if (typeof menuItemData.submenu != 'undefined') {
			ul += buildMenuHTML(menuItemData.submenu,level + 1);
		}
		
		ul += "</li>";
	}
	
	ul += "</ul>";
	return ul;
}

Here is how the function is called initially:
Code:

buildMenuHTML(test,1);

This is it's return value (with indentation added for readability):
Code:

<ul id='menu'>
  <li><a href='menu1.html'>Menu 1</a>
    <ul class='level2'>
      <li><a href='menu1subitem1.html'>menu 1 subitem 1</a></li>
      <li><a href='menu1subitem2.html'>menu 1 subitem 2</a></li>
    </ul>
  </li>
</ul>

'Menu 2' and 'Menu 3' don't show up! I'm sure it's something small that I'm overlooking, but any help would be appreciated.

Hi all

I'm well aware that I can't post assignments here and expect an answer, however, I have been staring at this code for so long. I feel I am close to the solution (to get the correct output to the browser) but I just cannot get it to count how many moves it takes. I don't want an answer, but a nudge in the right direction would be very grateful.
As you can see from the code and the output, it will attempt to write to the browser how many moves, but only '0'.

Code:

function rollDie()
{
	return Math.floor(Math.random() * 6) + 1;
}

/*
*searches for a number in a number array.
*
*function takes two arguments
*	the number to search for
*	the  number array to search
*function returns the array index at which the number was found, or -1 if not found.
*/
function findIndexOf(number, numberArray)
{
    var indexWhereFound = -1;
    for (var position = 0; position < numberArray.length; position = position + 1)
    {
        if (numberArray[position] == number)
        {
            indexWhereFound = position;
        }
    }
    return indexWhereFound;
}

//ARRAYS that represent the board -- you do not need to change these
//array of special squares
var specialSquaresArray = [1,7,25,32,39,46,65,68,71,77];
//array of corresponding squares the player ascends or descends to
var connectedSquaresArray = [20,9,29,13,51,41,79,73,35,58];

//VARIABLES used -- you do not need to change these
//the square the player is currently on
var playersPosition;
//play is initially at START
playersPosition = 0;

//what they score when they roll the die
var playersScore;

//the index of the player's position in the special squares array or -1
var indexOfNumber;

//MAIN PROGRAM

//TODO add code here for parts (iii), (iv)(b), (v), and (vi)
// start of question(iii)
playersScore = rollDie();
	document.write(' Sco  ' + playersScore);
playersPosition = playersScore + playersPosition;
	document.write(', Squa  ' + playersPosition);

indexOfNumber = findIndexOf(playersPosition, specialSquaresArray);

if (indexOfNumber != -1)
{
	document.write(', Ladder to Squa  ' + connectedSquaresArray[indexOfNumber]);
	playersPosition = connectedSquaresArray[indexOfNumber];
	indexOfNumber = -1;
}
document.write('<BR>')
// end of question(iii) 

// start of question(iv)(b) 
while(playersPosition<=80)


{
playersScore = rollDie()
	document.write(' Sco  ' + playersScore)
playersPosition = playersPosition + playersScore
	document.write(', Squa  ' + playersPosition)
indexOfNumber = findIndexOf(playersPosition, specialSquaresArray)


if(indexOfNumber != -1)
{
	document.write(', Ladder to Squa  ' + connectedSquaresArray[indexOfNumber]);
	playersPosition = connectedSquaresArray[indexOfNumber];
}	
	document.write('<BR>');
}
var countMoves = 0;
while(countMoves <= 0)
{
	document.write('You took ' + countMoves + ' moves to get out');
	countMoves = countMoves + 1
}	

/*for (var countMoves = 0; countMoves < playersPosition; countMoves = countMoves + 1)
{
	countMoves = countMoves + playersPosition;
	document.write('You took ' + countMoves + ' moves to get out');

}*/




// end of question(iv)(b) 

// start of question (v) 
/*if (playersPosition >=80)
{
	document.write('The player is out');
}*/
// end of question (v)





 
</SCRIPT>

</HEAD>
<BODY>
</BODY>
</HTML>

Many thanks.

Hello... Thanks for reading...

I am getting an undefined error when i try to get a value from this array in the interior loop...

Code:

// This is the array I am trying to access
AuditTable [0] = ["Visio Modifed date","Word Modified Date","User Status","User Comment","Last Audit","Audit Status","Audit Comment"]
AuditTable [1] = ["11/23/2009 8:52:18 AM","missing","OK","user comment number 1","1/1/2009","ok","audit comment number 1"]
AuditTable [2] = ["11/24/2009 12:21:19 AM","missing","Out of Date","Changes from 2008 not implemented","1/2/2009","Out of Date","needs update"]
AuditTable [3] = ["11/22/2009 9:24:42 PM","missing","Incomplete","Document doesnt cover all possibilities","1/3/2009","Inadequate","needs update"]

I have hard coded values and had success such as:
Code:

data = AuditTable[1][0]

But when I put the vars associated with the loop in I get an undefined error - AuditTable[i] is undefined:
Code:

// produces error
data = AuditTable[i][j]
//Works but retrieves wrong data
data = AuditTable[j][i]
//Works but retrieves wrong data
data = AuditTable[1][i]
//Works but retrieves wrong data
data = AuditTable[j][2]

I must be trying to access the array incorrectly or something... I have defined all the vars, and tried many combinations, alerted the values of both vars so I can prove it is not a scope issue... Am I missing something obvious? Thanks much...

Code:

var reportArray=new Array();
var reportData, title, subTitle, data;
		

for(i in parmarray)// loop thru AuditTable array and get values
		{
			title = '<div style="font-family:verdana; font-size:14px; font-weight:bold; margin:25px 0px 5px 30px">';
			title += namearray[i][0];
			title += '</div>';
			reportArray.push(title);//Take compiled variable value and put it into array
			
			for(j=0; j < AuditTable[0].length; j++)// loop thru AuditTable array and get values
			{
				
				subTitle = AuditTable[0][j];//points to first row of AuditTable where the labels are
				data = AuditTable[1][0];//points to the current row where actual data is
				
				html = i + j +'<div style="font-family:verdana; font-size:12px; color:#696969; font-weight:bold; margin-left:30px;">';
				html += subTitle;
				html += '</div><div style="font-family:verdana; font-size:12px; color:#a9a9a9; margin-left:30px; margin-bottom:10px">';
				html += data;
				html += "</div>";

				reportArray.push(html);// put results into array
			}		
		}

Hi,

I am doing some studying and we was to create a small loop using either the for loop, while loop or do while loop. I chose to do the for loop because it was easier to understand, but I want to know how to do the same using the while loop. Here is the for loop I have, but I cant figure out how to change to while loop.

Code:

for (var i = 0; i < 5; ++i)
{
    for (var j = i; j < 5; ++j)
{
         document.write(j + "");
  }
  document.write("<br />");
}

output is equal to:
01234
1234
234
34
4

How do you make the same using a while loop?

it wont loop, as long as you enter something in the name field it will submit. also how do i stop from submitting if all fields are not filled out? any help will be appreciated)
======
function checkForm(form)
{
var len = form.elements.length;
var h=0;
for (h=0; h<=len; h++){
if ((form.elements[h].value==null) || (form.elements[h].value=="")){
alert("Please enter "+document.myForm.elements[h].name);
document.myForm.elements[h].focus(); return false;
}
return true;
} }
===body-==
<FORM NAME="myForm" METHOD="post"
ACTION="http://ss1.prosofttraining.com/cgi-bin/process.pl">
Name:<BR>
<INPUT TYPE="text" size="30" NAME="name"><br>
Email address:<BR>
<INPUT TYPE="text" size="30" NAME="email address" onBlur="emailTest(this);"><br>
Phone number:<BR>
<INPUT TYPE="text" size="30" NAME="phone number"><br>
Fax number:<BR>
<INPUT TYPE="text" size="30" NAME="fax number"><p>
<INPUT TYPE="submit" VALUE="Submit Data" onClick="return checkForm(this.form);">
<INPUT TYPE="reset" VALUE="Reset Form">
</FORM>

Hello all.

I am faitly new at programming and have run into a little problem.

I want to create a script that creates 2 random numbers, stored in 2 different variables and then compare them to eachother.

there is two possible outcome of that comparison, either they are different or they are alike.

If they are different i want to randomize a new set or numbers and make a other comparement, also to keep track on how many times i have created numbers.

If they are alike i want to display the numbers and how many tries it took to get a matching pair.


atm it looks like this

<html>
<body>
<script>
var x=(Math.floor(Math.random()*6)+1);
var y=(Math.floor(Math.random()*6)+1);
//creates two random int between 1 and 6
var throws = 1;
//keep tabs on how many times we have thrown the dices

if(x!=y)
{
x=(Math.floor(Math.random()*6)+1);
y=(Math.floor(Math.random()*6)+1);
throws=throws+1
}else{
document.write("you have rolled a pair. Dice 1 is: " +x +" and Dice 2 is: " +y +" and it took " +throws +" tries to get a pair.");
}

</script>
</body>
</html>


How to get that into a loop?

a really confused newbie scripter

I have the following code which is almost completely working the way I need it to with the exception of the "downloadFile" value...

Code:

/*Regex list of download file extensions, pipe and backslash delimited. Looks for the period before the file type so it will work on download links with query parameters after it */
var downloadTypes = /\.pdf|\.doc|\.xls|\.zip|\.csv|\.ppt|\.rtf|\.pptx|\.docx|\.xlsx|\.wmv|\.mpg|\.exe|\.mp3|\.rar|\.wav/i; 

/*Regex list of on-site domains, pipe and backslash delimited. */
var onsiteDomains = /\mytestdomain1\.com|\mytestdomain2\.com|javascript|#/i; 

/*Used to unobtrusivly add events to objects*/
function unobtrusiveAddEvent (element,event,fn) {
   var old = (element[event]) ? element[event] : function () {};
   element[event] = function () {fn(); old();};
}

var links = document.links;
if ( links ){
	for(var i=0; i<links.length; i++) {
		if( links[i].href.match(downloadTypes) ){
		unobtrusiveAddEvent( links[i], 'onclick' , function() { ntptEventTag('ev=download&eventPage=Download From: ' + escape( wa.currentDomain + wa.currentURL ) + '& downloadFile=' + escape( links[i] ) ); });
		}
		if( !links[i].href.match(onsiteDomains) ){
		unobtrusiveAddEvent( links[i], 'onclick' , function() { ntptEventTag('lk=1&ev=Exit Link'); });
		}
	}
}

...how do I grab the value of the href that was just clicked? links[i] is not working (it's just grabbing the href value of the last href in the loop). I am missing something simple for sure. Can anyone point out what I am missing?

Thanks!

For those who read my other thread I finally scratched together the code to take a value from an XML file and add it to a select box as an option. Ofcourse it only does it once so I need to loop it. It's kinda complex though, here's a function line to add one option:
addOption(document.people_form.People,name2,office2)

And here's the code in the head:

<script type="text/javascript">
//load xml file
if (window.ActiveXObject){
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false; //Enforce download of XML file first. IE only.
}
else if (document.implementation && document.implementation.createDocument)
var xmlDoc= document.implementation.createDocument("","doc",null);
if (typeof xmlDoc!="undefined")
xmlDoc.load("namedata.xml");

//Regular expression used to match any non-whitespace character
var notWhitespace = /\S/

function getnames(){
//Cache "messages" element of xml file
var nameobj=xmlDoc.getElementsByTagName("list")[0]

//REMOVE white spaces in XML file. Intended mainly for NS6/Mozilla
for (i=0;i<nameobj.childNodes.length;i++){
if ((nameobj.childNodes[i].nodeType == 3)&&
(!notWhitespace.test(nameobj.childNodes[i].nodeValue))) {
// that is, if it's a whitespace text node
nameobj.removeChild(msgobj.childNodes[i])
i--
}
}
}

if (typeof xmlDoc!="undefined"){
if (window.ActiveXObject) //if IE, simply execute script (due to async prop).
getnames()
else //else if NS6, execute script when XML object has loaded
xmlDoc.onload=getnames
}
var name2=xmlDoc.getElementsByTagName("name")[0].firstChild.nodeValue;
var office2=xmlDoc.getElementsByTagName("office")[0].firstChild.nodeValue;
var officePH2=xmlDoc.getElementsByTagName("officePH")[0].firstChild.nodeValue;
var mobile2=xmlDoc.getElementsByTagName("mobile")[0].firstChild.nodeValue;
var email2=xmlDoc.getElementsByTagName("email")[0].firstChild.nodeValue;
</script>
<script type="text/javascript">
function addOption(selectbox,text,value )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
</script>



Could anyone give me a pointer on how to loop this so that it loads one option after another from the XML file? Thanks.