swirlingDervish Posted October 28, 2011 Share Posted October 28, 2011 I'm totally new to Javascript, and I've been looking thru the FAQs but nothing seems as simple as mine. and I'm trying to code a JS button or two...or rather, apprntly NOT....Please help!! Been at this most of the day (and soon to be night... Trying to call JS functions from <a href> tags as buttons, in effect using an open <div> as a dynamic textfield (as the HTML DOM Textarea doesn't have a transparency property, as far as I've been reading) to call up arrayed text indexed to different buttons. So far, I have some really simplistically coded buttons that seem syntactically correct, but at the moment, are "dead". Maybe I'm using try{} and catch{} wrong when I'm trying to debug, but I can't figure out how to step through what my code is doing (or how bad it is!)...e.g.... Here's a <head> sample: function arrayResult(i:Number){defText=new Array (11)defText[9]="...";defText[8]="...";defText[7]="...";defText[10]="...";defText[6]="...";defText[4]="...";defText[2]="...";defText[0]="<font face="verdana" size = "20"><b><u><i>Time For Gatsby</i></u></b></font><br>As the quintessential novel of F.Scott Fitgerald's career, his main character resonates with a sense of longing and false hope...";defText[5]="..."; try { var x = i; for (var i=0; i<defText.length; i++) { alert=return x; if (i==x) { alert="We're in."; document.getElementById("descrip").innerHTML=defText; break; } } } catch {alert ("it's not working...");}} and then, the <body> call: <div id="descrip" style="position:absolute; left:285px; top:205px; width:680px; height:558px; "> <p style="font:32px">Have u evr dancd w/the devil in the pale moonlite...?.</p> <p style="text-indent:300px"> - The Joker</p></div> <div id="buttonBar" class="labeled" style="left: 1071px; top: 72px; "> <table width="169" border="0" cellspacing="2" cellpadding="0" height="691"> <td width="38" height="54"><a href="javascript:arrayResult(0);"><img src="images/buttonWhite.png" width="30" height="30"></a></td> <td width="125" height="54">Presto/Chango button</td> </tr></table> </div> Is my HTML in the way...? am I using getElement wrongly...? MY syntax, a mess? I got this to work once before on a fluke in another page; it hasn't worked since. Thank you so much for whatever help you can give... Link to comment Share on other sites More sharing options...
Ingolme Posted October 28, 2011 Share Posted October 28, 2011 This part isn't syntactically correct:i:NumberThat's valid in ActionScript, but in Javascript you can't put the "Number" on it. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 28, 2011 Share Posted October 28, 2011 You're not using alert right. This doesn't do anything, because it returns before it does anything else: alert=return x; This actually overwrites the window.alert function with something else: alert="We're in."; Alert is a function, so you need to call it like a function: alert(x);return x; The try-catch syntax isn't correct, catch actually takes a parameter sort of. In these examples they call it err, it is an error object that you can use to get information about what went wrong: http://www.w3schools.com/js/js_try_catch.asp It's also a little weird how you assign the array, some indexes are left out. You can use array.push if you want to add a new element to the array: var defText=new Array ();var defText = []; // another way of declaring an arraydefText.push('text 1');defText.push('text 2');defText.push('text 3'); You can also declare the array with all of the values in it: var defText = [ 'text 1', 'text 2', 'text 3']; Your loop in the try-catch block is a little unnecessary. You can access any array element directly, you don't need to loop through to check the index. If you're passing the index into the function and the variable is called i, then you can just access defText. e.g.: function arrayResult(i:Number){ var defText = [ 'text 1', 'text 2', 'text 3' ]; if ((typeof defText[i]) != 'undefined') document.getElementById("descrip").innerHTML=defText[i]; else document.getElementById("descrip").innerHTML='';} Also, with regard to this: i:Number I haven't done the research to look this up, but I'm not sure if Javascript supports that syntax. I know that Actionscript 3 does, I'm not sure about Javascript. You may want to leave off the type and just give the variable name, but you check the browser's error console it will flag that if it's a problem. To access the error console and developer tools, I would suggest starting with the Chrome browser and you can press Ctrl-Shift-I to open the developer tools. The console tab has all of the Javascript errors, and if you want to step through the code then you can use the Script tag to set breakpoints.Sorry, I started this reply a couple hours ago and I'm just getting around to posting it now, Ingolme already covered one point. Link to comment Share on other sites More sharing options...
swirlingDervish Posted October 28, 2011 Author Share Posted October 28, 2011 Thanks you guys for your responses...I'm doing a little cleanup now and I'll let you know what comes out in the wash.. Link to comment Share on other sites More sharing options...
swirlingDervish Posted October 28, 2011 Author Share Posted October 28, 2011 Well, definitely appreciate the cleaner array code (was using a really old Javascript refrnc)!...I still seem to have a problem getting the javascript function call to work...I'm getting syntax errors around the html styles in front of the first array entry...in case that's part of my "dead button" problem, I'm trying to learn to apply css to javascript, but since I've had the issue elsewhere (css or no), any suggestions on why my function call isn't working still...? Link to comment Share on other sites More sharing options...
thescientist Posted October 28, 2011 Share Posted October 28, 2011 there's nothing wrong with using push, it's a native method and pretty helpful. It's just that since you were initializing the array yourself, you can just do it literally, as JSG showed. push is good when using it in loops or when you need to add to the stack dynamically. Link to comment Share on other sites More sharing options...
swirlingDervish Posted October 28, 2011 Author Share Posted October 28, 2011 <td width="38" height="54"><a href="javascript:arrayResult(0);"><img src="images/buttonWhite.png" width="30" height="30"></a></td><td width="125" height="54">Presto/Chango button</td> Thanks again for your help so far. Tried a little more tweaking last night (playing with "onClick") but I still had "dead" buttons....Aaaaaaarrrrggh! Any tips...? Link to comment Share on other sites More sharing options...
justsomeguy Posted October 28, 2011 Share Posted October 28, 2011 Check for Javascript errors when you click on the link. If you want help debugging it, post a link to the page or post the code you're using now. Either way, still check for Javascript errors and let us know what they say. Link to comment Share on other sites More sharing options...
swirlingDervish Posted October 28, 2011 Author Share Posted October 28, 2011 Well, I'm still wrestling with the problem of no response to my function call....can anyone help? Link to comment Share on other sites More sharing options...
swirlingDervish Posted October 28, 2011 Author Share Posted October 28, 2011 Thanks, Old Man....I'll keep checking, so far however nothing seems apparent... Link to comment Share on other sites More sharing options...
justsomeguy Posted October 28, 2011 Share Posted October 28, 2011 There's nothing we can do without either your updated code, or a link to the page. Link to comment Share on other sites More sharing options...
swirlingDervish Posted October 28, 2011 Author Share Posted October 28, 2011 Finally, SOMETHING to report (movement, one way or the other, is good!) ...line 1 error indicates an "uncaught reference error: arrayresult not defined...". Is this a scope (focus) issue? Link to comment Share on other sites More sharing options...
swirlingDervish Posted October 28, 2011 Author Share Posted October 28, 2011 No problem, Old Man....here's the page code: (thanks again)...<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>The Great Javascript Tryout</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript"><!--//function MM_reloadPage(init) { //reloads the window if Nav4 resized// if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {// document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}// else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();//}MM_reloadPage(true);function arrayResult(i){defText=new Array (11)defText[0]="<font face="verdana" size = "20"><b><u><i>This town needs an enema!</i></u></b></font><br>As the quintessential novel of The Joker's career, his main character resonates with a sense of longing and false hope...";defText[2]="...";defText[4]="...";defText[5]="...";defText[6]="...";defText[7]="...";defText[8]="...";defText[9]="...";defText[10])="...";if ((typeof defText) != 'undefined') document.getElementById("descrip").innerHTML=defText; else document.getElementById("descrip").innerHTML='';} // --></script></head><body text="#FFFFFF" bgcolor="#081132"><div id="descrip" style="position:absolute; left:285px; top:205px; width:680px; height:558px; font:20px Papyrus; text-shadow:1px 1px #a1a1a1; z-index:3 "> <p style="font:32px">Have u evr dancd w/the devil in the pale moonlite...?.</p> <p style="text-indent:300px"> - The Joker</p></div> <div id="buttonBar" class="labeled" style="left: 1071px; top: 72px; text-align:left; text-shadow:2px 2px #a1a1a1 visibility: visible"> <table width="169" border="0" cellspacing="2" cellpadding="0" height="691"> <td width="38" height="54"><a href="javascript:arrayResult(0);"><img src="images/buttonWhite.png" width="30" height="30"></a></td> <td width="125" height="54">Presto/Chango button</td> </tr></table> </div></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted October 29, 2011 Share Posted October 29, 2011 There are more errors than just that. You have a function called MM_reloadPage which is commented out, but then you try to run it. The line that tries to run it is not commented out. In your array definition, there are a couple problems. One is that Javascript does not support multi-line strings, so it's not valid to do this: defText[0]="<font face="verdana" size = "20"><b><u><i>This town needs an enema!</i></u></b></font><br>As the quintessential novel of The Joker's career, his main character resonates with a sense of longing and false hope..."; One option is to end the string on one line and start it on the next: defText[0]="<font face="verdana" size = "20"><b><u><i>This town needs an enema!</i></u></b></font><br>" + "As the quintessential novel of The Joker's career, his main character resonates with a sense of longing and false hope..."; Another problem is that you have quotes in the string that are not escaped. When you write this: defText[0]="<font face="verdana" size = "20"> The browser sees the string as just this: defText[0]="<font face=" since it stops after the first quote, and everything after is an error. You need to escape the quotes inside the string: defText[0]="<font face=\"verdana\" size = \"20\">... Link to comment Share on other sites More sharing options...
swirlingDervish Posted October 29, 2011 Author Share Posted October 29, 2011 Thanks for looking this over, JSG...it's always training wheels with a new script! I'm on cleanup...I'll let you know what goes... Link to comment Share on other sites More sharing options...
swirlingDervish Posted October 29, 2011 Author Share Posted October 29, 2011 Well, the syntax cleanup took care of some of the non-working issues on my test page; move the thought process to the website I'm working on and the javascript is still "dead". Can't seem to identify what is the "unexpected identifier"... Here's the link: www.siddhicenter.org/test1/starSite2/test2/ShivTantraMeditationDescrips.htm. Link to comment Share on other sites More sharing options...
swirlingDervish Posted October 29, 2011 Author Share Posted October 29, 2011 ...also keep coming up with the function being undefined...! What's that?... Link to comment Share on other sites More sharing options...
justsomeguy Posted October 31, 2011 Share Posted October 31, 2011 It's the multi-line string problem. Note in my example above how the first line ends with a quote and then a plus to indicate that the string continues on the next line. It's also a good idea to end all of your statements with a semicolon, even though it's not required. The function is undefined because there is a syntax error in the function which stops it from getting defined. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.