JavaScript - Invalid Argument?!?!?

I wrote a form and a JavaScript to valid the form. I cannot figure out however how to stop the form from submitting if the form is invalid.

[CODE]
function validateForm()
{

if(""==document.test.custName.value)
{
alert("Please enter your name.");
return false;
}

if(""==document.test.email.value)
{
alert("Please enter your email address.");
return false;
}

if(""==document.test.custComment.value)
{
alert("Please enter your comment.");
return false;
}

return true;
}
[CODE]

I am using a jQuery slider on a website but the code comes up with invalid, is there any wat to get around this without using a div tag? Thanks for any help on this:

Line 26, Column 27: document type does not allow element "div" here
.before('<div id="buttons">')

Code:

<script type="text/javascript">
$(document).ready(function() {
$('#slider')
.before('<div id="buttons">')
.cycle({
fx: 'fade',
pager:  '#buttons'
});
});
</script>

I am wanting all the inputs of the table cells turn red when invalid data (in this case anything other than a number) is entered.

Object:
1. To add a className to those inputs
2. With the new className 'invalid" the CSS gives a red background to the input

The appending of the className is not showing up in the generated source code and both Firefox and Chrome is not showing any errors in the code.

I can't not figure out what is preventing the execution.

Any advise to this simple problem will greatly be appreciated.


Code:

if (document.getElementsByTagName && document.getElementById) {

var dg = {
	
  // references to the table
  table : document.getElementsByTagName('table')[0],
  tbody : document.getElementById('data').tBodies[0],
  
  //reference to the inputs
  dataInput : document.getElementsByTagName('input'),

  init : function() {
  
  // configure event listening and delegation
    this.util.configEvents();
    
  // assign listeners to the table
    this.util.addEvent(this.table, 'keyup', this.checkData, true);
   
  },
  
  checkData : function(dataInput) {
 
         
      // if it is not a number, mark the input as invalid
      if (isNaN(dataInput.value)) { 
         
        dg.dataInput.className = 'invalid';
             
      }
         
      // if the user deleted the value entirely, remove any invalid indication
      else if (dataInput.value === '') { 
         
        dg.dataInput.className = '';
           
      }

  },
  
  util : {
	
    configEvents : function() {
      if (document.addEventListener) {
        this.addEvent = function(el, type, func, capture) { el.addEventListener(type, func, capture); };
        this.stopBubble = function(evt) { evt.stopPropagation(); };
        this.stopDefault = function(evt) { evt.preventDefault(); };
        this.findTarget = function(evt, targetNode, container) {
         var currentNode = evt.target;
         while (currentNode && currentNode !== container) {
          if (currentNode.nodeName.toLowerCase() === targetNode) { return currentNode; break; }
          else { currentNode = currentNode.parentNode; }
         };
         return false;
        };
      }
      else if (document.attachEvent) {
       this.addEvent = function(el, type, func) { el["e" + type + func] = func; el[type + func] = function() { el["e" + type + func] (window.event); }; el.attachEvent("on" + type, el[type + func]); };
       this.stopBubble = function(evt) { evt.cancelBubble = true; };
       this.stopDefault = function(evt) { evt.returnValue = false; };
       this.findTarget = function(evt, targetNode, container) { var currentNode = evt.srcElement; 
        while (currentNode && currentNode !== container) {
         if (currentNode.nodeName.toLowerCase() === targetNode) { return currentNode; break; }
         else { currentNode = currentNode.parentNode; }
        };
        return false;
       };
      }
    }
  
  }

};

dg.init();

}

I have the following work in progress:

PHP Code:
var radiolist = [];
var labellist = [];
var rps;
var tablecells = [];
  
  //function taken from JavaScripter.net which will return a hex value for the color
  function RGBtoHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
   function toHex(N) {
    if (N==null) return "00";
    N=parseInt(N); if (N==0 || isNaN(N)) return "00";
    N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
    return "0123456789ABCDEF".charAt((N-N%16)/16)
      + "0123456789ABCDEF".charAt(N%16);
  }

  
  //this function will add all the radio buttons to an array
  function getRadios(){
    var inputs = document.getElementsByTagName('input');
    for (i=0; i<inputs.length; i++){
      if (inputs[i].type === 'radio'){
        radiolist.push(inputs[i]);
      }
    }
  }
  
  //this function will add all labels of the "LabelWrapper" class to an array
  function getLabels(){
    var inputs = document.getElementsByTagName('span');
    for (i=0; i<inputs.length; i++){
      if (inputs[i].className === 'LabelWrapper'){
        labellist.push(inputs[i]);
      }
    }
  }
 
getRadios();
getLabels();
//alert("There are " + radiolist.length + " radios");
//alert("There are " + labellist.length + " statements");
rps = radiolist.length / labellist.length;
//alert("There are " + rps + " radios per statement")

  //this function will shade cells depending on their class name  
  function identifyCells(){
       var cells = document.getElementsByTagName('td');
       for (i=0; i<cells.length; i++){
         for (j=3; j<(rps+4); j++){
           var tclass = "c" + j;
           if ((cells[i].className === tclass + "   ") || (cells[i].className === tclass + " last  ")){
             xred = Math.round((j-2) * 255/(rps));
             xblue = Math.round((j-2) * 255/(rps) - 50);
             xgreen = Math.round(50 + (rps-j+4) * 255/(rps));
             xcolor = "#" + RGBtoHex(xred,xgreen,xblue);
             cells[i].setAttribute('col',xcolor);
             cells[i].addEventListener('mouseover',highlightCells,false);
             cells[i].addEventListener('mouseout',clearHighlights,false);
             }
           }
         }
       }
    }
  //this function will highlight all preceding cells in the same row
  function highlightCells(){
    var y = this.getAttribute('col');
    var z0 = this.className.split("c"); //split the classname in two so that we can use parseInt function
    var z = parseInt(z0[1]);
    this.style.backgroundColor = y;
    var cellfamily = this.parentNode.childNodes;
    for (i=0; i<cellfamily.length; i++){
      cellname = cellfamily[i].className.split("c");
      cellnum = parseInt(cellname[1]);
      if (cellnum > 3 && cellnum < z){
        cellfamily[i].style.backgroundColor = y;
      }
    }    
  }
  
  function clearHighlights(){
      var z0 = this.className.split("c");
      var z = parseInt(z0[1]);
      this.style.backgroundColor = "transparent";
      var cellfamily = this.parentNode.childNodes;
      for (i=0; i<cellfamily.length; i++){
        cellfamily[i].style.backgroundColor = "transparent";
      }    
  }
      
identifyCells(); 


FireFox is giving me the "missing ) after argument list" at the following line:
function highlightCells(){

I can't figure out why I am getting an error. The code was 'working' before and I was able to get the highlighting on the table cells, but I don't know what I did that caused the issue.

Any help would be greatly appreciated.

I started Javascript yesterday.
I am trying to make the function Captain Obvious simply say what button you are pressing in an alert box, but after I click the button, nothing happens at all, no error message or anything. I have tried it with no argument inside the script call, and then it sort-of works. The alert box comes up saying: "You have clicked on a button that says "undefined"." I am pretty sure that means that I am having a problem passing the argument when I call it, but to be honest I have no clue lol
Code:

<head>
<script type="text/javascript">
function CaptainObvious('choice')
{
	alert("Captain Obvious:You have clicked on a button that says ''"+choice+"''.");
	alert("Just fulfilling my public duties.")
}
</script>
</head>
<body>
<form>
<input type="button" value="Apple" onclick=CaptainObvious("apple")>
</form>

Any ideas?

Hi ...

i am trying to run my website but when i am accessing through the link....i am getting missing ) after argument list .it showing the following peace of code in the firebug....

missing ) after argument list
else{$("input[id^=channelPid_]")\n

can anyone help me to resolve this issues..its been three days i am working on it but no clue...

thanks in advance

Hi guys ,

i have this function that allows me to hide a <div ID="ID1"> .

function hide(X)
{
document.getElementById('X').style.visibility='hidden';
}

<p><a href="#" onclick="hide('ID1');">show me/</a></p>
<div ID="ID1" style="visibility:hidden">This is the content</div>

the issue the function only works when i change X by ID1.
i want to make it for any ID called with the function by assigning any DIV "ID" as an argument.

any help ?

thanks

PHP Code:
function $(x) {
  return document.getElementById(x);
}

function test(x) {
  alert(x.id);
}

function init() {
  var o = {};

  o.id = "a";
  $("one").addEventListener("click", function () {test(o);});

  o.id = "b";
  $("two").addEventListener("click", function () {test(o);});

  o.id = "c";
  $("three").addEventListener("click", function () {test(o);});
}

window.onload = init; 


I have some code similar to this. When the HTML elements with id's "one", "two", or "three" are clicked, they all alert "c", but I want them to alert the respective values (a, b, and c).

How can I pass the object by value and not by reference? I guess in this simple example you would just define two more objects, but my code is actually within a for-loop. The object properties are changed each iteration (ideally each iteration creates a new object) and then passed to the function.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>
	Jackhammer
</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
/* <![CDATA[ */ 

	var jackhammers = new Array(11); 
	var curJackhammer = 0; 
	var direction;
	var begin; 
	
	jackhammers[0] = "jackhammer0.gif"; 
	jackhammers[1] = "jackhammer1.gif"; 
	jackhammers[2] = "jackhammer2.gif"; 
	jackhammers[3] = "jackhammer3.gif"; 
	jackhammers[4] = "jackhammer4.gif"; 
	jackhammers[5] = "jackhammer5.gif"; 
	jackhammers[6] = "jackhammer6.gif"; 
	jackhammers[7] = "jackhammer7.gif"; 
	jackhammers[8] = "jackhammer8.gif"; 
	jackhammers[9] = "jackhammer9.gif"; 
	jackhammers[10] = "jackhammer10.gif"; 
	
	function bounce()
	{
		if(curJackhammer == 10) 
			curJackhammer = 0; 
		else
			++curJackhammer; 
		
		/* 
		    Firefox does not register an error with the line of code below, but other browsers do . . . 
		    It looks like it is a typo left over from the slightly more advanced technique in 10-4 where 
		    jackhammers.src is defined.  Also, were you to comment out the final line in this function you would 
		    see the animation does not work.  In browsers other than Firefox which apparently just ignores 
		    this code and no animation occurs, the image element is assigned the source value of "undefined"
		    and of course no image is named "undefined".  
		*/
		 
		document.getElementsByTagName('img')[0].src = jackhammers[curJackhammer].src; 
		
		if(curJackhammer == 0)
			direction = "up"; 
		else if(curJackhammer == 10)
			direction = "down"; 
		document.getElementsByTagName('img')[0].src = jackhammers[curJackhammer]; 
	} 
	
	function startBouncing() 
	{
		if(begin) 
			clearInterval(begin); 
		begin = setInterval("bounce()",90); 
	} 

/* ]]> */ 
</script>

</head>
<body>

	<h1>
		Jackhammer Man
	</h1>
	
	<p>
		<img src="jackhammer0.gif" height="113" width="100" alt="Image of a man with a jackhammer." />
	</p>
	
	<form action="" enctype="text/plain">
		<p>
			<input type="button" value="Start Bouncing" onclick="startBouncing();" />
			<input type="button" value="Stop Bouncing" onclick="clearInterval(begin);" />
		</p>
	</form>
	
</body>
</html>

My teacher insists that the above code is valid (straight out of our book). He says this because (I'm guessing) it runs okay in Firefox and other browsers. It also throws a ton of error messages in Chrome and makes no logical sense. We define the values of the jackhammer array as literal strings, and then the book instructs us to change the source of the image element on the page to jackhammers[i].src. It then has us change the source of the image element again, correctly at the end of the function. It also has us create a useless variable: "direction" (and I say useless because we never use it, it is just fluff I guess).

On a side note, would some of you guys like to check out this animation I created here and let me know what you think.

Thanks guys.

Hello,
I am trying to execute a javascript function passed as argument.
I am not sure of the exact way to do it.

<html>
<head>
<script type="text/javascript">
var checkLink = function(linkId, enabledFunction){
var linkidObj = document.getElementById(linkId);
if(linkidObj.className=="activelinktext" )
{
enabledFunction();
return false;

}
else if(linkidObj.className=="inactivelinktext")
{
return false;
}
alert("*inside CheckLink*"+enabledFunction);
};
</script>
</head>
<body>
<a class="inactivelinktext" onclick="checklink(this,"javascript:goback();")">
</body>
</html>

Thanks,
-Vijay

Ok, guys. I'm new to JavaScript, so go easy. I'll be asking bunches of "dumb" questions for a while.

1st question, and the only one for now ...

Say I have the following function:

Code:

function SwapValues(SwapVal1,SwapVal2)
{
TempSwapVal=SwapVal1;
SwapVal1=SwapVal2;
SwapVal2=TempSwapVal;
}

I don't care about the return value of the function itself, but I do need the new values of SwapVal1 and SwapVal2. In ASP when I do this, the values get returned. How do I get this to work in JS?

Hi,

I have written a function to compare each character in startString with another nominated character (nomChar). If they are the same this character is written to outputString, in the same position. If they are not the same a character is lifted from the same position in altString and placed in the same position in outputString instead. I hope that's clear!

Code as follows:

Code:

function compareChar(startString, altString, nomChar)
{
var outputString = '';
outputString.length = startString.length;
var nextLetter = '';
		
for (var count = 0; count < startString.length; count = count + 1)
{
nextLetter = startString.charAt(count);
			
if  (nextLetter == nomChar)
{
outputString.charAt(count) = nextLetter;
}
else
{
outputString.charAt(count) = altString.charAt(count);
}			
}
}

document.write(compareChar('boston',  'denver' , 'o' )  );

However, the line of code within the if statement Code:

outputString.charAt(count) = nextLetter;

keeps generating an 'Invalid assigment left hand side' error message. Can anyone see why this is the case?
Thanks.

The suspect line is the following

$('.leaveClan').attr('id') = <?php echo $id; ?>;

the span with the class (there is only one) leaveClan is on the main page, and that line of javascript is on a page being called by AJAX within that page.

Can anyone see why that is causing an error?

Let me know if you need to see any more of the code

Hi,
New to JS. Have ordered some new books, but need to get somethings going in the mean time.
What I wanted to do is to link to a new page having a date range input in the form of 6 text boxes, 2 sets of mm-dd-yy, from and to, where the upon loading the page box 1 of the from would auto focus and then auto tab and then post where php could take over on the server side. Setting up the form and the lay out, no problem. Auto focusing went just like expected using the following code, included because on the next step everything fell apart.
[/CODE]
<script type="text/javascript" >
window.onload=function() {
document.getElementById("input1").focus();
}
</script>
[/CODE]
So then the wheels came off and in response, began to simplify what was trying to be done to find where the issues were. As far as I can get working is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" >
window.onload=function() {
	document.getElementById("input1").focus();
	}
</script>
<script type="text/javascript" >
function myFunc() {
alert("is this working");
}
</script>
</head>
<body>
<input id="input1" name="input1" type="text" onkeyup="myFunc()" maxlength="2" value="type a No." />
</body>
</html>

First issue with this: When I first get to the page everything is just as ordered. The focus is on the text box and the default value is "type a No." When I press a key onkeyup, I bring up the alert box with "is this working" in it. But when I refresh the page with the refresh button, after clicking the "ok" on the alert box, the character that was typed in is still displayed. If I use the link to the page, or the URL from the address bar, then the page reloads properly with the default value, "type a No".
Question 1: How do you get the default textbox value using the refresh button as apposed to reloading the page using a link or from the address bar? Using Firefox 8.0

Second and more important at the moment: If I change the script to pass an argument to the function the script crashes. It does not pull up an alert box and freezes. My guess is that I'm doing something wrong on a concept level.
NOTE: changed the default value of the text box to " ". Looked like to me there was an issue with the size specification and the default string length as you could only enter in a key stroke by highlighting the text and replacing it
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" >
window.onload=function() {
	document.getElementById("input1").focus();
	}
</script>
<script type="text/javascript" >
function myFunc(awe) {
alert(awe);
}
</script>
</head>
<body>
<input id="input1" name="input1" type="text" onkeyup="myFunc("123")" maxlength="2" value="" />
</body>
</html>

Question 2: can someone straighten me out with this?

I have a simple function to display an image when called, but if I try to rewrite the function to take the image as an argument, it stops working. I've looked at other function examples on the web but can't figure out what I am missing. Can anyone help?

works: Code:

<html>
<script language="JavaScript">
var ImagePlusSign = '<img src="plus.jpg" name="slide" width="65" height="50"/>';

function FlashImagesThenWait() 
{
document.getElementById("first").innerHTML =  ImagePlusSign 
} 
setTimeout(FlashImagesThenWait, 1500);
</script>
<body>Hello.
<div id="first">
</div>
</body>
</html>

does NOT work :
Code:

<html>
<script language="JavaScript">
var ImagePlusSign = '<img src="plus.jpg" name="slide" width="65" height="50"/>';

function FlashImagesThenWait(z) 
{
document.getElementById("first").innerHTML =  z
} 

setTimeout(FlashImagesThenWait(ImagePlusSign), 1500);
</script>
<body>Hello.
<div id="first">
</div>
</body>
</html>