|
JavaScript - Simple Go Back External Js Sheet Not Working
I'm new to JavaScript, I just finished some basic things, like getAttribute, setAttribute, getElementByID etc.
I understand that inline javascript isn't the best way to go, and all the JavaScript should go on an external JS file. I also know that you should be able to downgrade gracefully, allowing people whose browser do not/blocked javascript to still use the site. So I just want to do a simple go back function in an external javascript, however it's not exactly working. This is my JS code: Code: window.load = preparePage();
function preparePage(){
if (!document.getElementById()) return false;
if (!document.getElementByTagName()) return false;
var backDiv = document.getElementByID("back");
links.onclick = function(){
history.go(-1);
return false;
}
}
Here is my HTML code Code: <div class="back"> <a href="http://forum.thekks.net">Back</a> </div> Similar TutorialsHi all me again I have this bit of code: Code: <script type="text/javascript">
var testvar = "<? print $cards; ?>";
var name = "<? print $name; ?>";
//Create JavaScript array
var testarray = new Array();
//Fill JavaScript array from the converted string
testarray = testvar.split(":#:");
var imagesleft = 10;
var numclicks = 0;
var score = 0;
function clickCard (what,where)
{
var count=0;
for(var x = 0; x < testarray.length; x++)
{
if(what == testarray[x])
{
count++;
}
}
if(count==1)
{
alert("unique");
document.images[where].src = "./images/blank.png";
imagesleft--;
score = score+20;
clicks.innerHTML = "Unique Images to find = " + imagesleft;
if(imagesleft==0)
{
score = score - numclicks;
var r=confirm("Do you want to enter your score in the highscore table?");
if (r==true)
{
document.getElementById('score').value = score;
document.forms["highscore"].submit();
}
else
{
var t=confirm("Do you want to play again?");
if (t==true)
{
document.location.reload();
}
else
{
window.close();
}
}
}
}
else
{
alert("Not unique");
}
numclicks++;
pairs.innerHTML = "Number of Clicks = " + numclicks;
}
</script>
which works a treat but when it is put into a external js file all I get is the alert Not unique and nothing else! any ideas why? I'm working on some code to create hover text that follows the mouse. Now, the code works fine when the javascript is included on the page: (internal script) http://cory.wellen.googlepages.com/hovertest2.html However, when I try to move the code out to an external script, it doesn't work. I've tried looking all over to see what the problem is, but 99% of those with external script problems have errors in syntax or location of the source script. Please help! (javascript) http://cory.wellen.googlepages.com/hover.js (external script) http://cory.wellen.googlepages.com/h..._external.html Hi, I need some help here- below is the script I'm trying to externalize but whatever I've tried doesn't work (the Login button doesn't nothing when the script is external). Thanks!!! <form name="login" autocomplete="off"> <p>User Name : <input type="text" name="username"></p> <p>Password : <input type="password" name="password"></p> <input type="button" value="Login" name="Submit" align="right" onClick="Login()";> </p> </form> </div> <script language="JavaScript"> function Login(){ var done=0; var username=document.login.username.value; username=username.toLowerCase(); var password=document.login.password.value; password=password.toLowerCase(); if (username=="bruceclements" && password=="berlin") { window.location="users/bruceclements.html"; done=1; } if (username=="free" && password=="java") { window.location="page2.html"; done=1; } if (username=="member3" && password=="password3") { window.location="page3.html"; done=1; } if (done==0) { alert("Invalid login!"); } } </script> Here is a .js file to hack ie6,but it doesn't work when i put it out of the .html file.It can woking only in the .html file. It's fine in the .html file. Below: Code: <html>
<head>
<script type="text/javascript">
sfHover =function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
......
......
</body>
</html>
It's not working if external .js file.below: Code: <script type="text/javascript" src="suckerfish.js"></script> note：I haven't added the <script type="text/javascript">...<script> code to the .js file. any help will be good. index.html Code: <html> <head> <title>:: wtmp</title> </head> <body> <p>Welcome to my page</p> <script type="text/javascript" src="file.js"></script> </body> </html> file.js Code: function one(p1, p2) {
var j_text=p1+" "+p2;
return j_text;
}
function two() {
var rslt=one("Hi", "there!");
}
document.write(rslt);
var mainscrpt=one("Hello", "world!");
window.alert(mainscrpt);
I have entered the following in a file named welcome.htm when the form is submitted the Test! Alert comes up but the alert fields indicating the fields are empty do not appear. Please let me know if you can see why. Thanks Code: <html>
<head>
<script type="text/javascript">
alert('Test!');
function submitform()
{
alert('Test!');
alert('In fname is '+document.form.fname.value);
if (document.form.fname.value == ""){
alert('The fnamefield is empty!'); return false; }
if (document.form.age.value == ""){
alert('The fnamefield is empty!'); return false; }
return true;
}
</script>
</head>
<body>
<form id="myform" action="welcome.php" method="post" onSubmit="return submitform()" >
Name: <input type="text" name="fname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>
</body>
</html>
Hi I am new to teaching JavaScript I need to show how to create a form with validation and feedback. I can get it to validate a text with a message, but I cannot get it to validate a set of radio buttons and conform the radio selected. Code below- <html> <head> <title>Exam entry</title> <script language="javascript" type="text/javascript"> function validateForm() { var result = true; var msg=""; if (document.ExamEntry.name.value=="") { msg+="You must enter your name \n"; document.ExamEntry.name.focus(); document.getElementById('name').style.color="red"; result = false; if (document.ExamEntry.subject.value=="") { msg+="You must enter the subject \n"; document.ExamEntry.subject.focus(); document.getElementById('subject').style.color="red"; result = false; } } if(msg==""){ return result; } { alert(msg) return result; } } </script> </head> <body> <h1>Exam Entry Form</h1> <form name="ExamEntry" method="post" action="success.html"> <table width="50%" border="0"> <tr> <td id="name">Name</td> <td><input type="text" name="name" /></td> </tr> <tr> <td id="subject">Subject</td> <td><input type="text" name="subject" /></td> </tr> <tr> <td><input type="reset" name="Reset" value="Reset" /></td> </tr> </table> </form> <script type="text/javascript"> function lengthpass() { var s1=document.getElementById("password"); if(s1.value.length != 4) { alert("Please enter an exam number which is 4 characters long"); return false; } return true; } </script> </head> <body> <form onsubmit="return lengthpass();"> Exam Code <input type="text" id="password" name="password"> (Four Numbers) <br> <br> <h1>option button form validation</h1> <script type="text/javascript"> function option1() { var checkedop=null; var examop=document.getElementsByName("exam"); for (var i = 0;i<examop.length;i++) { if(examop[i].checked) { checkedop=examop[i]; } } if(checkedop==null) { alert("please select an exam"); return false; } { confirm("you have chosen"+checkedop.value+ "is this correct?"); } } </script> </head> <body> <form name="examtype" onsubmit="return option1();"> Select an exam type<br> <input type="radio" name = "exam"value= "GCSE"> GCSE<br> <input type="radio" name = "exam"value= "AS"> AS<br> <input type="radio" name = "exam"value= "A2"> A2<br> <input type="submit"name="submit"value="Submit Form"/> </form> </body> </html> Simple random pic script that I found on the some other forum (I forget what it was) [CODE]var aryimages = new Array('images/pic/01.jpg', 'images/pic/37.jpg', 'images/pic/02.jpg', 'images/pic/family/08.jpg','images/pic/08.jpg', 'images/pic/food/03.jpg'); randompic.src = aryimages[Math.floor(Math.random() * aryimages.length)]; [CODE] code anchors to HTML markup [CODE]<img name="randompic" id="bg" />[CODE] it is working perfectly for Safari and Chrome. Nothing is showing for FF. Any suggestions appreciated. i am new in programming and learning it from lynda but i am trying to make a program which according to me is good enough but its not working and i am using free javascript editor for compiling and coding <!DOCTYPE html> <html> <body> <script> var a = 5; var b = 10; var c = 30; var d = a + b + c; alert("the value of d is" + d); </body> </html> Please tell me where is it i am making mistake Reply With Quote 01-08-2015, 11:56 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts You forgot the </script> ending tag. I have used this formula before, for some reason it isnt working properly. If the value is equal to 0 it will give an alert and return false. Then if you change the value of the drop down it won't let you submit. Does anyone see anything wrong? Code: <script type="text/javascript">
<!--
function validate_form ( )
{
valid = true;
if ( document.week_picks.blowout.value == "0" )
{
alert ( "Please Select a Blowout" );
}
return false;
}
//-->
</script>
Code: <form name="week_picks" method="post" action="confirm.php" onsubmit="return validate_form()"> <select id="blowout" name="blowout"> <option value="0">..</option> .... </select> Thanks for any help. Hi. Just started fooling around with Ajax a bit back. So far, it's been fine. Today, though, I'm hitting some error I can't figure out. It *should* work, but it doesn't, and I have no idea why. Simple HTML form page with a bit of css. No big deal. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="livesearch.js"></script>
<style type="text/css">
#livesearch
{
margin:0px;
width:194px;
}
#txt1
{
margin:0px;
}
</style>
</head>
<body>
<form>
<input type="text" id="txt1" size="30" onkeyup="showResult(this.value)" />
<div id="livesearch"></div>
</form>type
</body>
</html>
Problem area below in bold. Code: function showResult(str){
if (str.length == 0)
{
document.getElementById("livesearch").innerHTML = "";
document.getElementById("livesearch").style.border = "0px";
}
var xmlhttp = getXMLHttpObject();
if (xmlhttp == null){
alert("Your browser does not support XML HTTP requests!");
return;
}
var url = "livesearch.php";
url = url + "?q=" + str;
url = url + "&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged ;
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}
function stateChanged(){
if (xmlhttp.readyState == 4){
alert("Never seems to hit a readystate==4");
document.getElementById("livesearch").innerhtml = xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
function getXMLHttpObject(){
//Current browsers
if (window.XMLHttpRequest){
return new XMLHttpRequest();
}
//For IE 5/6
if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
return null;
}
}
My PHP file is just a simple echo statement to see that it works to that point. It doesn't. For whatever reason, it never seems to hit readyState ==4. It enters the function (I've checked with alerts), but the if statement never comes out to be true. I have no idea why. I've combed over the code for errors for a while now and I can't find anything. Any ideas? Would be much obliged. I have a simple javascript for validating the radio buttons. But for what ever reason window.location does not redirect. this is my code: <SCRIPT LANGUAGE="JavaScript"> function checkRadio (frmName, rbGroupName) { var radios = document[frmName].elements[rbGroupName]; for (var i=0; i <radios.length; i++) { if (radios[i].checked) { return true; } } return false; } function valFrm() { if ( checkRadio("frm1","radio1")==true && checkRadio("frm1","radio2")==true) window.location="price.jsp"; else alert("You didnt select any price"); } </script> when i replace an alert with the redirect line it works fine. any help would be appreciated. Do you see anything wrong with this code... Code: <SCRIPT LANGUAGE="JavaScript">
if(GetCookie('upgrade8') != null) {
location.href="cookie-in.html"
}
</SCRIPT>
Also tried this (didn't work either)... Code: <SCRIPT LANGUAGE="JavaScript">
var readCookie = getCookie("upgrade");
if (readCookie("upgrade") != null){
// if cookie already exists, go to url
document.location = "lesson1";
} else {
// else go someplace else
document.location = "lesson2";
};
</script>
I've tried posting in both the head and body. Still can't get it to redirect. I'm a little new to this. Your help would be appreciated. thanks Hi, I have a small script that tries to open a child window. if successful, it then closes the child window and redirects the parent window. If this process fails, there is no child window, no redirection. the script below works fine in FireFox but in Chrome, if the process fails, the redirection still happens. I'm new to JS would appreciate your help many thanks Code: <script type="text/javascript">
function openwindow(){
testWindow = window.open("popup.php","interaction");
setTimeout(function() { testWindow.close(); },1000);
setTimeout(function() { window.location = "http://www.google.com"; },1000);
}
</script>
Hi, I'm new to Javascript, so bear with me. I'm trying to use a script that replaces the contents of a div, based on div id's. I've gotten it to work how I want he http://www.sixnations.be/home1.html But can't get it to work here, and I'm not sure why: http://www.sixnations.be/menu.html Relevent code, Javascript: Code: function changeMenu(obj) {
if (obj == 'food') {
//alert('food');
var fd = document.getElementById('food');
fd.style.display = 'inline';
var fdi = document.getElementById('foodImages');
fdi.style.display = 'inline';
var dr = document.getElementById('drink');
dr.style.display = 'none';
var dri = document.getElementById('drinkImages');
dri.style.display = 'none';
}
else if (obj == 'drink') {
//alert('drink');
var fd = document.getElementById('food');
fd.style.display = 'none';
var fdi = document.getElementById('foodImages');
fdi.style.display = 'none';
var dr = document.getElementById('drink');
dr.style.display = 'inline';
var dri = document.getElementById('drinkImages');
dri.style.display = 'inline';
}
}
HTML (the data's tabular, hence the tables): CSS: Code: /*-- MAIN CONTENT --*/
.maincont {
width: 930px;
margin: auto;
margin-top: 10px;
overflow: auto;
}
.backcont {
position: relative;
width: 620px;
margin-right: 296px;
}
.backrightcont {
float: right;
width: 296px;
}
.backtop,
#info_En,
#info_Fr,
#info_It,
#drink,
#food,
.backrighttop {
background-image: url(../sixnations_images/backtop.png);
background-repeat: repeat-x;
background-position: bottom;
border-right: 1px solid #21201C;
border-left: 1px solid #21201C;
width: 100%;
height: 57px;
text-align: center;
}
.backbottom {
background-image: url(../sixnations_images/backbottom.png);
}
#info_En,
#info_Fr,
#info_It,
#food,
#drink {
background-image: url(../sixnations_images/contentback4.png);
background-repeat: repeat;
padding-bottom: 30px;
text-align: left;
height: auto;
}
.backright,
.backrighttop,
.backrightbottom {
width: 100%;
}
.backright {
background-image: url(../sixnations_images/backright.png);
}
.backrighttop {
background-image: url(../sixnations_images/backtop2.png);
background-position: top;
border: 0;
}
.backrightbottom {
height: 50px;
background-image: url(../sixnations_images/backrightbottom.png);
border: 0;
}
.backrighttop h1,
.backright h1 {
font-family: 'Cambria', Palatino, Georgia, serif;
font-size: 1.6em;
color: #eee;
line-height: 70px;
text-align: center;
}
.backright h1 {
width: 95%;
line-height: normal;
border-top:1px dashed #333;
padding-top: 15px;
}
#noborder {
border:0;
}
.twitter {
margin-left: 15px;
}
#info_Fr,
#info_It,
#drink
{
display: none;
}
.lang,
#info_En p,
#info_En h1,
#info_Fr p,
#info_Fr h1,
#info_It p,
#info_It h1,
#food h1,
#food p,
#drink h1,
#drink p {
width: 71%;
margin: auto;
}
#info_En h1,
#info_Fr h1,
#info_It h1,
#food h1,
#drink h1 {
font-family: 'GothamBook','Cambria', Georgia, serif;
font-size: 2.5em;
color: #000;
padding-bottom: 10px;
padding-top: 20px;
margin-bottom: 15px;
font-variant: small-caps;
letter-spacing:.1em;
text-align: center;
border-bottom: 1px dashed #777;
}
.lang {
margin-top: 35px;
padding-top: 5px;
border-top: 1px dashed #777;
font-size: 1em;
font-variant: small-caps;
text-align: right;
color: #777;
}
.lang a:hover {
background-color: #777;
color: #eee;
}
/*-- MAIN CONTENT -- SPORTS ON TV / FOOD & DRINK --*/
table.sports,
table.menu1 {
width: 90%;
margin: auto;
}
table.sports thead td,
table.menu1 thead td {
font-size: 1.3em;
font-variant: small-caps;
color: #777;
border-bottom: 1px dotted #999;
width: 100%;
padding-top: 20px;
}
table.sports tr,
table.menu1 tr {
border-bottom: 1px dotted #999;
}
table.menu1 tr {
border: 0;
}
table.sports td {
padding: 7px;
}
table.menu1 td {
border:0;
padding: 8px;
}
table.sports td.foot,
table.sports td.rugby {
background-image: url(../sixnations_images/ball1.png);
background-repeat: no-repeat;
background-position: bottom left;
padding-left: 35px;
}
table.sports td.foot {
background-image: url(../sixnations_images/ball2.png);
}
table.menu1 td.desc {
color: #888;
font-style: italic;
padding-top: 0px;
font-size: .9em;
}
Any ideas? Can someone please help with this code. The window is supposed to automatically scroll and move but it isn't working. (It was taken from a discontinued book called javascript in 24hrs) The javascript: Quote: var pos=100; function Scroll(){ if (!document.getElementById ) return; obj=document.getElementById("thetext"); pos -=1; if(pos < 0-obj.offsetHeight + 130) return; obj.style.top=pos; window.setTimeout("Scroll();", 30); } //start scrolling when the page loads window.onload=Scroll; the css: Quote: #thewindow{ position:relative; width:180px; height:150px; overflow:hidden; border:2px solid red; } #thetext{ position:absolute; width:170px; left:5px; top:100px; } the html: Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="scroll.css" /> </head> <body> <h1> scrolling window example</h1> <p>This example shows a scrolling window created using javascript and the w3cdom.The red border window is actually a layer that shows a cliped portion of a larger layer"</p> <div id="thewindow"> <div id="thetext"> <p>This is the first paragraph of the scrolling message.The message is created with regular html</p> <p>Entries within the scrolling area can use any html tags.They can contain <a href="#">links</a></p> <p> No limit to the number of paragraphs that you can include here...</p> <ul> <li>For example you could format items using a bulleted list.</li> </ul> <p>The scrolling ends when the last part of tht scrolling text ids on the screen.You've reached the end.</p> </div> </div> </body> </html> 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>
Hi, I hav linked external js (ext1.js) to my app.html page. Now in the ext1.js, I have a function like [CODE] function onwindowload(){ //Access HTML element and append external js 2 (ext2.js) here }[CODE] //Access HTML element and append external js 2 (ext2.js) here--->I donno how to add external JS here. Even if i add the external JS here, the JS uses document.write fn. which replaces entire page. Please suggest a solution I have been asked by a friend to create a math sheet generator for their child, however i don't have a clue where to start with javascript. Similar to this.. http://cemc2.math.uwaterloo.ca/mathf...sheetgen.shtml It doesn't need to be advanced as that as all i'm looking for is how to create the sums. If someone could help either by informing me where to start or even an online tutorial i would be extremely greatful! Many thanks, James Could you please help. I came up with javascript functions that would apply a style sheet to an xml document during the runtime but i get the following error: Automation server cannot create object. Below is the code (javascript): <html> <head> <title>SORT</title> <head> <body bgcolor="#FFFFFF"> <form name="VIEW" method="post" action> <p> <input type="text"> </p> <p> <input type="radio" name="optAscending" value="radiobutton" onClick="javascript:displayAscending();">Ascending </p> <p> <input type="radio" name="optDescending" value="radiobutton" onClick="javascript:displayDescending();">Descending <p> <input type="radio" name="optReset" value="radiobutton" onClick="javascript:displayReset();">Reset </p> </form> </body> <script language="javascript"> function displayAscending() { document.VIEW.optDescending.checked=false; document.VIEW.optReset.checked=false; var xsltobj = new ActiveXObject("Msxml2.XSLTemplate.4.0"); var xsldocobj = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0"); var xslprocobj; xsldocobj.async = false; xsldocobj.load("EMP.xsl"); xsltobj.stylesheet = xsldocobj; var xmldocobj = new ActiveXObject("Msxml2.FreeThreadDOMDocument.4.0"); xmldocobj.async = false; xmldocobj.load("EMP.xml"); xslprocobj = xslt.createProcessor(); xslprocobj.input = xmldocobj; xslprocobj.Transform(); //arlet(xslProc.output); parent.FIRST.document.write(xslProc.output); } function displayDescending() { document.VIEW.optAscending.checked=false; document.VIEW.optReset.checked=false; var xsltobj = new ActiveXObject("Msxml2.XSLTemplate.4.0"); var xsldocobj = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0"); var xslprocobj; xsldocobj.async = false; xsldocobj.load("EMP.xsl"); var xmldocobj = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0"); xmldocobj.async = true; xmldocobj.load("EMP.xml"); xsltobj.stylesheet = xsldocobj; xslprocobj = xslt.createProcessor(); xslprocobj.input = xmldocobj; xslprocobj.Transform(); //arlet(xslProc.output); parent.FIRST.document.write(xslProc.output); } function displayReset() { parent.First.document.location="first.htm"; document.VIEW.optAscending.checked=false; document.VIEW.optDescending.checked=false; } </script> </html> And a style sheet that would be applied to an xml document <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="/"> <html> <body> <table border="2" bgcolor="blue"> <tr> <th>ID</th> <th>NAME</th> <th>DESIGNATION</th> <th>ADDRESS</th> <th>DOB</th> <th>DEPARTMENTS</th> </tr> <xsl:for-each select="EMPDETAILS/EMPLOYEE"> <tr> <td><xsl:value-of select="ID"/></td> <td><xsl:value-of select="NAME"/></td> <td><xsl:value-of select="DESIGNATION"/></td> <td> <xsl:value-of select="ADDRESS/Street"/> <xsl:value-of select="ADDRESS/Apartment"/> <xsl:value-of select="ADDRESS/City"/> <xsl:value-of select="ADDRESS/State"/> <xsl:value-of select="ADDRESS/Zipcode"/> </td> <td><xsl:value-of select="DOB"/></td> <td><xsl:value-of select="DEPARTMENT"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> |
|||||||