JavaScript - Finished My First Program, Wondering If Anyone Could Help Confirm It Works?...
Hey guys, finished my first javascript assignment and was wondering if anyone could confirm it works. I get weird syntax errors on my comp but others have said that it has worked for them, so i'm wondering if anyone else can confirm this. The syntax errors are all claiming that my functions being called in my buttons are not defined, however they clearly are, so i'm thinking it might just be something weird with my machine/browser. Anyway, here's the code and thanks in advance.
Code: <html> <head> <script type="text/JavaScript"> var sam = 9; var sally = 8; var donald = 4; var person = prompt("Please enter your name", "Student Name"); if (person != null) { document.getElementById("intro").innerHTML = "Hello " + person + "! Thank you for checking your grades today!"; } function percentage (score) { return score / 10 * 100; }; function goperc() { document.write("Sam's score on the test is " + percentage(sam) + "%, <br \> Sally's score on the test is " + percentage(sally) + "%, <br \> Donald's score on the test is " + percentage(donald) + "%"); }; function highscore() { if (Math.max(90, 80, 40) === 90){ document.write("Sam's score was the highest.")}; else if (Math.max(90, 80, 40) === 80){ document.write("Sally's score was the highest.")}; else{ document.write("Donald's score was the highest.")} }; function lettergrade(grade) { if (grade > 8.9){ document.write("A")}; else if (grade > 7.9){ document.write("B")}; else if (grade > 6.9){ document.write("C")} else{ document.write("F | Warning, your letter grade is very low.")} }; function goletter() { document.write("Sam's letter grade on the test is: " + lettergrade(sam) + ", <br \> Sally's letter grade on the test is: " + lettergrade(sally) + ", <br \> Donald's letter grade on the test is: " + lettergrade(donald)); }; </script> </head> <body> <button onclick="goperc()">Student Percentages</button> <br \> <button onclick="highscore()">Best Grade</button> <br \> <button onclick="goletter()">Student Letter Grade</button> </body> </html> Oh, if anything looks like it's wrong or you see something that could be causing an error, I would love to know. Thanks. Similar TutorialsNoticed some flaws in my code in the last post, sorry for the back-to-back posting but I can't edit the other post and the changes would be to confusing to point out in another reply. So what i'm wondering is if anyone can test this code and see if it works for them. I'm getting some weird syntax errors saying that functions aren't defined when they clearly are. If there are any errors you encounter, please point them out. Thanks in advance guys. Code: <html> <head> <script type="text/JavaScript"> var sam = 9; var sally = 8; var donald = 4; function prompt() { var person = prompt("Please enter your name", "Student Name"); if (person != null) { document.getElementById("intro").innerHTML = "Hello " + person + "! Thank you for checking your grades today!"; } function percentage (score) { return score / 10 * 100; }; function goperc() { document.write("Sam's score on the test is " + percentage(sam) + "%, <br \> Sally's score on the test is " + percentage(sally) + "%, <br \> Donald's score on the test is " + percentage(donald) + "%"); }; function highscore() { if (Math.max(90, 80, 40) === 90){ document.write("Sam's score was the highest.")}; else if (Math.max(90, 80, 40) === 80){ document.write("Sally's score was the highest.")}; else{ document.write("Donald's score was the highest.")} }; function lettergrade(grade) { if (grade > 8.9){ document.write("A")}; else if (grade > 7.9){ document.write("B")}; else if (grade > 6.9){ document.write("C")} else{ document.write("F | Warning, your letter grade is very low.")} }; function goletter() { document.write("Sam's letter grade on the test is: " + lettergrade(sam) + ", <br \> Sally's letter grade on the test is: " + lettergrade(sally) + ", <br \> Donald's letter grade on the test is: " + lettergrade(donald)); }; </script> </head> <body> <button onclick="prompt()">Sign In</button> <br \> <button onclick="goperc()">Student Percentages</button> <br \> <button onclick="highscore()">Best Grade</button> <br \> <button onclick="goletter()">Student Letter Grade</button> </body> </html> I can't seem to capture keystrokes (via onkeydown) in Firefox. Now before you judge too quickly, here is a snippet that DOES work in Firefox -- but only by itself; not when pasted into my program: ------------------------------------------------------------------------ Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <script language=javascript> <!-- function vProcessKeyboard(e) { e = e || window.event; var code = e.keyCode || e.which; document.getElementById("chardisplay").innerHTML = code; } //--> </script> <body> <script language=javascript> <!-- document.onkeydown = vProcessKeyboard //--> </script> <div id="chardisplay"></div> </body> </html> ------------------------------------------------------------------------ Here's my question: What would cause the above code to fail, when used in a larger, more complicated webpage? If I debug my webpage (using FireBug 1.4.5), I note that "onkeydown" indeed points to my keyboard handler. But when I put a simple debug message in that handler, I get absolutely nothing -- no matter what code I paste in the keyboard handler, it doesn't run. No matter how many keys I press! I run the same program in Internet Explorer and it runs fine. I run the keyboard code by itself in Firefox and it runs fine. I've spent about 10 hours Googling this, and all I can find is discussions of how to capture keystrokes in Firefox vs. IE. I found about 20 different variations on the code I pasted above. The "program" I'm trying to use with this keyboard capture code with is a large browser game -- a glorified webpage, even if it behaves like a Windows game -- with hundreds of objects (divs). There are several layers of graphics to make the game happen. I'm just trying to figure out what is FUNDAMENTALLY different between my large program and a simple webpage, when it comes to something simple like keyboard capture. Is it the size, in bytes, of my webpage? Is it the large number of DIVs? The large number of functions? Incidentally, I'm not using Frames. Any help would be much appreciated. Thanks, Matthew Hey there guys, i have a client who wants to make a school system on his website, now i've done that, however what my client wants is to put wmv files inside every lesson and he wants to be sure that the user who has registered to the online school WATCHES fully all the wmv and then redirect him to a quiz page where he will take a test. My client wants to be sure that the users are watching the wmv files before doing any quiz. SO is there a way where i can know when the wmv file has FINISHED playing so that i would redirect them to another page?? Thank you! Hey guys! I have finally finished my factoring quadratics page! You can see it he http://wdroom.com/factor.html If you see that you received an incorrect solution PLEASE let me know so I can fix it. Credits: Old Pendant, Philip M, bullant in no particular order Thanks so much! Is it possible to make an app that creates a gif that shows the process of a finished drawing? Im a kid and love drawing and gif . i wanna make app that shows a replay of my initial start of my drawing till the finish product of my drawing in a gif file. thinking to approach this with javascript? would it be possible? Hi, Does anyone know if there is a event or something that fires when Javascript finishes executing. When I load a page, the body's onLoad event fires when it has finished loading but there might be some Javascript that is still running (or javascript that is triggered from the onLoad event itself). And this javascript could add to the page's DOM. So is there any way to detect when the page has REALLY finished loading (ignoring the possibility of setTimeout() etc). I need to know this as I am constructing a webpage-scraper and therefore I need to know when the pages have completely loaded. Thanks, Hello, In the below script syntax, a simple table converts Celsius degrees into Fahrenheit, using the For loop and integrating it into a table. Code: <html> <head> <title>Celsius-Fahrenheit Converter</title> </head> <body> <table border=3> <tr><td>CELSIUS</td><td>FAHRENHEIT</td></tr> <script language="javascript"> for (celsius=0; celsius<=50; celsius=celsius+1) { document.write("<tr><td>"+celsius+"</td><td>"+((celsius*9/5)+32)+"</td></tr>"); } </script> </table> </body> </html> My questions are about the following script inside the <td> tags: <td>"+celsius+"</td> <td>"+((celsius*9/5)+32)+"</td> 1) why is the script inside the above <td> tags placed between " " ? 2) why is the script inside the above <td> tags placed between + + ? Thanks a lot for your explanation to an absolute Javascript beginner...! I am not that great with web design but i am trying to create something like this site http://www.avrilbandaids.com/voteomatic/ I am trying to make something for my site - andygrammernation.com that is similar to this but with a different color scheme and with the mediabase link changed to vote for Andy instead of Avril. If anyone knows how to do this and would like to walk me through it that would be amazing!!! Thank you all so much!!! Not entirely lost in the dark with jquery here, ive done quite a bit with it. I was just wondering if anyone might have ideas to solve this particular problem i am having. The code pretty much looks like this... Code: $('#created').hover( function(){ if(y == false) { $(this).css({'border' : '1px groove #dfdfdf'}); $('div#csite').show('slide',{ direction: "down" },500); $('div#sa').hide('slide',{ direction: "up" },500); }; }, function() { $(this).css({'border-style' : 'none'}); $('div#csite').hide('slide',{ direction: "up" },500); $('div#sa').show('slide',{ direction: "down" },500); }); //home hover $('#home').hover( function(){ if(y == false) { $(this).css({'border' : '1px groove #dfdfdf'}); $('div#psite').show('slide',{ direction: "down" },500); $('div#sa').hide('slide',{ direction: "up" },500); }; }, function() { $(this).css({'border-style' : 'none'}); $('div#psite').hide('slide',{ direction: "up" },500); $('div#sa').show('slide',{ direction: "down" },500); }); The div sa is always present (its a sponsor logo) when hovering over a #created link or #parent site link, a div csite or psite comes up, (image representing parent site, image representing creator site) making them work is no problem however i was wondering if anyone had any ideas as how to change this so that when you are quickly moving from the created link to the parentsite the .hide and .show animation for #sa does not overlap, or does not fire otherwise they get in the way of each other... any help would be appreciated thanks in advance! Hi, I am trying to give the user the option of music on my homepage (b/c we've all found it annoying at times...perhaps most times). I have found an "onload" option for the body tag on dotnetspider.com, but it doesn't seem to be working for me. Please take a look and let me know of any improvements I could make. Thx Code: <body onload="loadMusic()"> <p> <script type="text/javascript"><!-- function loadMusic() { var r=confirm("Would you like a background tune?"); if (r==true) { <input type="button" onclick="show_confirm()" value="Show a confirm box" /> <object class="plugin_video" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="480" width="640"> <param name="autoplay" value="false" /><embed title="QuickTime" hidden="true" src="sounds/siteBG.wav" mce_src="sounds/siteBG.wav" autoplay="true" loop="true" controller="true"></embed> </object> } else { alert("If you change your mind reload the page to choose again."); // --></script> I amcalling a JS confirm function from my code behind like this: If bResetNewUser Then strMessage = "Your profile was successfully updated. Would you like to be redirected to the Inquiry screen?" ClientScript.RegisterStartupScript(Me.GetType(), "confSQUpdateScript", "ConfirmSQUpdate('" & strMessage & "');", True) My JS function is as follows: function ConfirmSQUpdate(message) { if (confirm(message)) { window.location = "ClaimantInquiry.aspx" }else { window.location = "http://www.labor.vermont.gov/" } } When I click the Update Profile button the first code snippet executes except no confirm message box appears and hence no redirect. The page says there is an error and the error is Object expected on the ClientScript... line. I have this same functionality with alert boxes and they all work. What gives? Ok, I need some help with this. When you click the close button on your browser, I want it to have a confirmation. Saying "**Click OK to be redirected to a new page**" something like that. If you click "OK" you are redirected to another page. If you hit CANCEL, then it closes out. It doesn't have to be a confirmation. Just needs to be something that has an option. (Maybe return xx?) Anyways, here's what I've got: Code: <script type="text/javascript" language="javascript"> var sure = false; var lin = false; function sureF() { if(!sure && !lin) { sure = true; var con = confirm("**Are you sure you want to leave?**") if(con == true) { location.href = "http://www.google.com/" return con; } else { alert("Sorry") } } } window.onbeforeunload = sureF; </script> What that does, is when you click close on your browser, it will say "Are you sure you want to leave?" you click "OK", and you get redirected to google .com (How I set it) BUT then a popup comes up saying, "Are you sure you want to navigate away?" which I don't want at all. As you can see, my script is quite messed up. Could you help me out? Thanks. Hello, this is not and advert This is a class i built in javascript What it dose: When users leave a site that has a confirm you want to leave box from the browser Why have i posted: I have seen around on the internet posts about how to do such a thing so i though i would get hits to codding forum when user search for such a thing and any one of codding forum members could help it get better Well this is a nice little object to use insted that dose a light box effect and brings up a Yes/no true/false box you set what you want it to say The JSON Object PHP Code: confirmBox = { 'message' : 'This is a Confirm Box', 'trueTxt' : 'True', 'complete' : true, 're' : '', 'falseTxt' : 'False', 'onTrue' : 'alert("true")', 'onFalse' : 'alert("false")', 'setTrue' : function(ontrue){ this.onTrue = ontrue + "confirmBox.update('true')"; }, 'setFalse' : function(onfalse){ this.onFalse = onfalse + "confirmBox.update('false')"; }, 'setTrueText' : function(trueText){ this.trueTxt = trueText; }, 'setFalseText' : function(falseText){ this.falseTxt = falseText; }, 'setText' : function(text){ this.message = text; }, 'hide' : function(){ var bg = document.getElementById('___confirmBox_bg'); var center = document.getElementById('___confirmBox_center'); var dialog = document.getElementById('___confirmBox_dilog'); center.removeChild(dialog); bg.removeChild(center); document.body.removeChild(bg); }, 'show' : function(){ this.createBG(); this.createCenter(); this.createDialog(); }, 'update' : function(sw){ this.re = sw; }, 'state':function(){ if(this.re = ''){ return false; }else{ return this.re; } }, 'createBG' : function(){ var bg = document.createElement("div"); bg.setAttribute('style', "display: table; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);"); bg.setAttribute('id', '___confirmBox_bg'); document.body.appendChild(bg); }, 'createCenter' : function(){ var center = document.createElement('div'); center.setAttribute('style',"#position: absolute; #top: 50%; display: table-cell; vertical-align: middle; margin-left:auto; margin-right:auto;"); center.setAttribute('id', '___confirmBox_center'); document.getElementById('___confirmBox_bg').appendChild(center); }, 'createDialog' : function(){ var dialog = document.createElement('div'); dialog.setAttribute('style', "display:block; width: 300px; padding: 16px; background-color: white; z-index:1003; margin-left:auto; margin-right:auto;"); dialog.setAttribute('id', '___confirmBox_dilog'); dialog.innerHTML = this.message + '<div align="right"><input type="button" onclick="eval(confirmBox.onTrue); confirmBox.hide();" value="' +this.trueTxt + '" /><input type="button" onclick="eval(confirmBox.onFalse); confirmBox.hide();" value="' + this.falseTxt + '" /></div>'; document.getElementById('___confirmBox_center').appendChild(dialog); }, } Then this is how you call it and set propertys Code: <script src="confirmBox.js" type="text/javascript"></script> <script type="text/javascript"> confirmBox.setText("This is a test"); //Sets the text to show in the box confirmBox.setTrueText("I can see it"); // sets the text on the return true button confirmBox.setFalseText("I can't see it"); // sets the text on the return false button confirmBox.setTrue('alert("Thanks");'); //what to do when true is clicked confirmBox.setFalse('alert("Your a lier");');// what to do when false is clicked confirmBox.show(); // Show the confirmBox </script> Hi, when my page loads it starts with a confrim box. If "Cancel" is selected then the rest of the page loads fine. If "Ok" is selected nothing after the confirm box loads. Any ideas. Also, it appears that IE and Firefox have trouble with this type of media and Chrome will only play the audio file for about 15 seconds. Any solutions? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Justin Revard</title> <style type="text/css"> html, body {height: 100%; margin: 0; padding: 0;} #background {position:fixed; top:0; left:0; width:100%; height:100%;} #content {position:relative; z-index:1;} </style> </head> <body> <p><img id="background" src="Images/siteBackground.jpg" /></p> <div id="content"> <h1>Justin Revard's Home Page</h1> <p> <script type="text/javascript"><!-- var r = confirm("Would you like a background tune?"); if (r == true) { document.body.innerHTML += '<object class="plugin_video" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="480" width="640"><param name="autoplay" value="true" /><embed title="QuickTime" hidden="true" src="sounds/siteBG.wav" mce_src="sounds/siteBG.wav autoplay="true" loop="true" controller="true"></embed></object>'; } else { alert("If you change your mind reload the page to choose again."); } // --></script> </p> <p> <table> <tbody> <tr> <td><a href="Source/page2.html" style="opacity:0">Page 2</a></td> <td><a href="Source/page3.html" style="opacity:0">Page 3</a><br /></td> <td><a href="Source/today.php" style="opacity:0">Today's Date</a></td> <td><a href="Source/morePHP.php" style="opacity:0">More PHP</a></td> <td><a href="Source/database.php" style="opacity:0">Database</a></td> <td><a href="source/products.html" style="opacity:0">Products</a></td> <td><a href="Source/origFileRead.php" style="opacity:0">Original File Reader</a></td> <td><a href="Source/fileRead.php" style="opacity:0">File Reader</a></td> </tr> <tr> <td><a href="http://justinrevard.com"><img src="Images/homeButton.jpg" /></a></td> <td><a href="foosball.html"><img src="Images/foosballButton.jpg" /></a></td> <td><a href="physics.html"><img src="Images/physicsButton.jpg" /></a></td> <td><a href="skiing.html"><img src="Images/skiingButton.jpg" /></a></td> <td><a href="message.html"><img src="Images/messageButton.jpg" /></a></td> <td><a href="links.html"><img src="Images/linksButton.jpg" /></a></td> <td><a href="aboutMe.html"><img src="Images/aboutMeButton.jpg" /></a></td> </tr> </tbody> </table> </p> </div> <p> </p> </body> </html> Hello, I'm new to Javascript, but have been programming in PHP and other web codes for 4 years now. I was wondering how you would check if a checkbox was ticked, upon its selection and then unhide HTML content, and then hide such content when deselected.. So far I have this: Code: <script type="text/javascript"> function Agree() { document.getElementById("stepTwo").className = ""; } </script> Which is called by onclick="Agree()" on the select box itself.. I understand an if statement is needed, but how would one go about doing this as my if statements do not appear to be working. I've been trying to write a script that activates a confirm box when a browser window is closed. I want this to occur only when they try to close the window, not if they click on links on the page to navigate elsewhere. The confirm box then gives the option to continue closing as they intended or, if they click on ok (or cancel if it's easier), navigate to another page I specify. The script below works but it displays a confirm box when you close the window and click on links. Code: <script type="text/javascript"> function show_confirm() { var r=confirm("Wait! Would you like check out yahoo?"); if (r==true) { window.open("http://www.yahoo.com"); } else { window.close(); } } window.onbeforeunload = show_confirm; </script> I understand you may be able to create a variable that you then attach to any links on the page you don't want to activate the confirm box. I don't know how to do this. Thank you. Hi, im using this code as a fancybox replacement for confirm. Code: function fancyAlert(msg) { jQuery.fancybox({ 'modal' : true, 'content' : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input style=\"margin:3px;padding:0px;\" type=\"button\" onclick=\"jQuery.fancybox.close();\" value=\"Ok\"></div></div>" }); } function fancyConfirm(msg,callback) { var ret; jQuery.fancybox({ modal : true, content : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input id=\"fancyConfirm_cancel\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Cancel\"><input id=\"fancyConfirm_ok\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Ok\"></div></div>", onComplete : function() { jQuery("#fancyConfirm_cancel").click(function() { ret = false; jQuery.fancybox.close(); }) jQuery("#fancyConfirm_ok").click(function() { ret = true; jQuery.fancybox.close(); }) }, onClosed : function() { callback.call(this,ret); } }); } function fancyConfirm_text() { fancyConfirm("Ceci est un test", function(ret) { alert(ret) }) } how can i use fancyConfirm via an onclick in a hyperlink? thanks for your help! Hi I really really really need your help since I have no idea about this. How can I insert the Javascript Confirmation Alert into the del.php file? I have this del.php file PHP Code: <?php require ("include/config.php"); $id=$_REQUEST['id']; $strSQL = "DELETE FROM change WHERE id = '".$id."' "; $objQuery = odbc_exec($conn,$strSQL); if($objQuery) { echo "<script language='Javascript'>alert('Deleted.'); window.location=\""."index.php?action=syif\"</script>"; } else { echo "Error Delete [".$strSQL."]"; } odbc_close($conn); ?> This is the confirmation javascript Code: <html> <head> <script type="text/javascript"> function show_confirm() { var r=confirm("Delete?"); if (r==true) { alert("Deleted!"); } else { alert("Cancelled!"); } } </script> </head> <body> <input type="button" onclick="show_confirm()" value="Show confirm box" /> </body> </html> Hi Guys, I would like to add a confirmation to this: PHP Code: echo "<a href=\"delete.php?dir=$dir&file=$file\" onclick='return del(this, \"$id\")'><img src=\"images/delete.gif\" border=\"0\" /></a>"; However I seem to be struggling, severely! Any help would be greatly appreciated, especially if spelt out if alphabetti spaghetti. Kind Regards, Drew I'm working on a bank website that needs disclaimers on their external links. I've searched for a tutorial or a script I could understand but need additional help if anyone is willing.. Here's my page with external links: http://designphilanthropy.org/services/links/ Here's the js I used from the previous bank design (I don't see any code here that will do what I need): Code: <script language="javascript"> <!-- Hide window.resizeTo(440, 440); function go() { var width = screen.width; var height = screen.height; if(width<650) { width = 600; height = 400; } else { width = width - 200; height = height - 100; } window.resizeTo(width, height); location.href=""; } // end Hide --> </script> And here's the code on the "yes" button: Code: <input type="button" VALUE="YES" onclick="javascript:go();"> The link opens the disclaimer and populates the url in the browser, but I don't know how to write the js for it to continue to the destination after clicking "yes" Any help would be greatly appreciated... |