JavaScript - Onclick Not Working?

I'm having a small issue with being able to use the onclick more than once. When I load the page and click the link the request works fine the first time. But if I cancel the request then goto click the link again, nothing happens.


Code:

<a href="javascript:void();" onclick="sendRequest()">Send the request</a>

<script>
var request = {
    method: 'postrequest',
    message: 'You will like it',
    data: '123key'
};
function sendRequest() {
    postReq(request, function (a) {
        if (a && a.post_id) {
             
//Do something if sent
            
        } else {

//Do something if cancelled
       
        }
    })
}
</script>

Hi folks,

I'm frustrated . I've been trying to get this single piece of code to work. I've looked at quite a few sources out there, but everything I try fails.

My site uses AJAX to upload a file, and once complete I dynamically add the file name, size, description, etc to a table.

I have a javascript method that will allow me to download the file once uploaded - and I put an onclick event into some of the TDs in the row I added. (Note: I didn't want to put it in the TR because I also have a delete button in the row).

I've tried

Code:

1. cell1.onclick = 'javascript:downloadAttachmentFile('+attachID+');';
2. cell1["onclick"] = new Function("downloadAttachmentFile('+attachID+')");
3. cell3.setAttribute('onclick','javascript:downloadAttachmentFile('+attachID+');');

but none seem to work!! I know the function is ok because the files that are already on the page work correctly, meaning it's only the dynamically created rows that are having the issues.

Code:

	
function addNewTableRow(fileTable, fileTitle, fileName)
	{
		var table = getMyElement(fileTable);             
		var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);
		var cell0 = row.insertCell(0);
		cell0.width = 25;
		cell0.className = "tblTicketFilesWhite";
		cell0["onclick"] = new Function("downloadAttachmentFile('+attachID+')");
	}

Hi everyone,

I'm a JavaScript newbie and am trying to use it to direct users to a search page based on the values of two drop down boxes. The issue i am having is that the code below works fine on a test page, but not on my test domain (with wordpress theme) and so i was wondering whether there is anything I am doing wrong...

Is onclick already defined maybe? I'm not sure how it works to be honest...

Code:

<script type="text/javascript">
function gosearch() {
var breed = document.getElementById('breed').value;
var area = document.getElementById('area').value;
var site = "http://hairloss-help.net/?s=";
var searchurl = site + breed + area;

window.location.href = searchurl;
}
</script> 

<strong>Breed</strong>
<select name="breed" id="breed">
<option value="">&gt; All</option>
<option value="Affenpinscher+">Affenpinscher</option>
<option value="Afghan+Hound+">Afghan Hound</option>
<option value="Airedale+Terrier+">Airedale Terrier</option>
<option value="Akita+">Akita</option>
<option value="Alaskan+Malamute+">Alaskan Malamute</option>
<option value="Alsation+">Alsation</option>
<option value="American+Cocker+Spaniel+">American Cocker Spaniel</option>
<option value="Anatolian+Karabash+">Anatolian Karabash</option>

</select>

<strong>Area</strong>
<select name="area" id="area">
<option value="all">&gt; All Areas</option>
<optgroup label="England">
<option value="Avon">Avon</option>
<option value="Bedfordshire">Bedfordshire</option>
<option value="Berkshire">Berkshire</option>
<option value="Bristol">Bristol</option>
<option value="Buckinghamshire">Buckinghamshire</option>
<option value="Cambridgeshire">Cambridgeshire</option>
<option value="Cheshire">Cheshire</option>
<option value="Cleveland">Cleveland</option>
<option value="Cornwall">Cornwall</option>

</select>

<input type="button" name="gobutton" id="gobutton" value="Go!" onclick="gosearch();" />

The domain I'm currently testing this on is http://www.hairloss-help.net.

Any help would be much appreciated.

Thanks

Sam

Hey everyone,
I am having troubles with my form not working correctly in IE. I have onclicks for different parts of my site. I am trying to use onclick and divs to make this happen. Can some look at my code and help me out?
Thanks/
Code:

<script type="text/javascript">
function switchFS(obj) {
	var fset,i,fsclass;
	fset=document.getElementsByTagName('fieldset');
	fsclass = obj;
	for ( i=0; i<fset.length; i++) {
		if ((fset[i].getAttribute('class') != "user") && (fset[i].getAttribute('class') != fsclass)) {
			fset[i].style.display = "none";
		} else {
			fset[i].style.display = "block";
		}
	}
}
</script>


</head>

<body id="submitform">
<div id="container">
	<div id="header">
    <?php include($dirprefix . "external/include/header.html"); ?>	
    </div><!-- end header -->
    <div id="maincontent">
    <h3>&nbsp;</h3>
    <?php include($dirprefix . "external/include/menu_inactive.html"); ?>	
    
    <div id="bodycontent">
    <div id="bodyleftcol">
    <h4>Contact</h4>
    <h5>Registration</h5>
    </div>
    <div id="bodyrightcol">
	<h1 class="formhead">Site Registration</h1>
	<p>Please register if you are a Zimmer customer, or an agency or designer working on behalf of one. Completing the requested information will enable us to continue to update and improve site content. Please make note of your password for future reference. You will receive an email with your login information.</p>
	<div id="mainrightcol">
  <form name="form" id="register" method="post" action="processregister.php">
  
  	<fieldset class="user">  
	<legend>i am a:</legend>
		<label><input type="radio" value="Healthcare provider" class="checkbox" name="usertype" onclick="switchFS('healthcare');" /> Healthcare provider</label>
        <label><input type="radio" value="Agency or designer for a customer" class="checkbox" name="usertype" onclick="switchFS('agency');" /> Agency or designer for a customer</label>
		<label><input type="radio" value="Independent agency or designer" class="checkbox" name="usertype" onclick="switchFS('agency');" /> Independent agency or designer</label>
		<label><input type="radio" value="Zimmer employee" class="checkbox" name="usertype" onclick="switchFS('zimmer');" /> Zimmer employee</label>
        <label><input type="radio" value="Zimmer field representative" class="checkbox" name="usertype" onclick="switchFS('zimmer1');" /> Zimmer field representative</label>
		<label><input type="radio" value="Media" class="checkbox" name="usertype" onclick="switchFS('user');" /> Media</label>
		<label><input type="radio" value="Healthcare Author/Publisher" class="checkbox" name="usertype" onclick="switchFS('author');" /> Healthcare Author/Publisher</label>
		<label><input type="radio" value="Other" class="checkbox" name="usertype" onclick="switchFS('user');" /> Other</label>
	</fieldset>
    
    <fieldset class="zimmer" style="display: none;">
    <legend>zimmer information</legend>
        <!--<label for="businessunit">Zimmer business unit: <input type="text" name="businessunit" value="" required="required" /></label>-->
        <label for="division">Zimmer business unit: 
        <select name="division">
			<option value="">- n/a -</option>
			<option value="Knees">Knees</option>
			<option value="Hips">Hips</option>
			<option value="Extremities">Extremities</option>
			<option value="Trauma">Trauma</option>
            </select></label>
    </fieldset>
    
    <fieldset class="zimmer1" style="display: none;">
    <legend>zimmer information</legend>
        <!--<label for="businessunit">Zimmer business unit: <input type="text" name="businessunit" value="" required="required" /></label>-->
        <label for="distributorship">Zimmer distributorship: 
        <input type="text" name="distributorship" value="" required="required" /></label>
    </fieldset>

I have added the javascript and the section of code where the user picks how they are. Once you click on one of the users in IE the form goes away.

Code:

<img id="who" class="who" src="who.jpg" alt="Warriors Chosen For Battle" title="Warriors Chosen For Battle">
<img id="chosen" class="selector" src="selector.jpg" alt="Click for next image" title="Click for next image" onclick="chosen()">
<img id="ambassador" class="selector" src="selector.jpg"  alt="Click for next image" title="Click for next image"onclick="ambassador()">

Code:

function chosen()
{
document.getElementById("who").src="chosen_for_christ.jpg";
}

function ambassador()
{
document.getElementById("who").src="ambassador.jpg";
}

Yeah so basically when I click on one of the selector images I want it to change the value "who" images src value. I'm making an image selector, it works fine in IE, but every other browser it refuses to do anything.

Hello....I have written a PHP script for a secure client login system and it is working on Firefox and Chrome. But it doesn't work on Safari and IE. I have noticed that some of the javascript functions do not work at all while a few of them work. Can somebody please take a look and let me know what could be wrong?

I am pasting the part of my code that does't work up he

<script type="text/javascript">
function newdir(i)
{
alert('Newdir!');
var newdir=prompt("Please enter the name of the folder");
if (newdir!=null && newdir!="")
{
document.getElementById('newdir').value= newdir;
document.getElementById('folder').value= i;
document.getElementById('download').value = '';
document.myform.submit();
}
}



</script>

<?php

$dir = '../Users/gcreddy/'

echo '<tr><td></td><td></td><td><a href=# onMouseOver="this.src=\'images/delete_s.png\';" onMouseOut="this.src=\'images/delete.png\';" onClick="setdir(&apos;'.$dir.'&apos"><img src="images/delete.png" name="Delete"></a></td><td></td><td></td><td><a href=# onMouseOver="document.newdirimg.src=\'images/newdir.png\';" onMouseOut="document.newdirimg.src=\'images/newdir_s.png\';" onClick="newdir(&apos;'.$dir.'&apos"><img src="images/newdir_s.png" name="newdirimg"></a></td></tr>';

echo '<tr><td></td><td></td><td>Upload file:<input type="file" style="background-color:gray;" name="datafile" size="40"></td><td><a href=# onMouseOver="document.load.src=\'images/upload_s.png\';" onMouseOut="document.load.src=\'images/upload.png\';" onClick="upload(\''.$dir.'\')"><img src="images/upload.png" name="load"></a></td><td><input type="hidden" name="login" value="'.$user.'"><input type="hidden" name="password" value="'.$password.'"><input type="hidden" name="number" value="'.$indexCount.'"><input type="hidden" id="folder" name="folder" value=""><input type="hidden" id="newdir" name="newdir" value=""></td><td><input type="hidden" id="download" name="download" value=""></td><input type="hidden" id="Delete" name="Delete" value=""></tr></TABLE></form>';

?>

When I click on the create folder button (newdir.png), I don't see the alert message that I gave for debugging. I have the SAME problem with 2 more buttons on the same page.

I would be glad if somebody could let me know what the problem / solution is.

Regards,
G.C.Reddy

I would like onclick to only work from div id="telli", but instead it works on all the divs.. I've tried a lot of different things, nothing has worked so maybe somebody can help me. I would like the div telli to open up a popup layer onclick. Please help me.. I am a newbie to Javascript

HTML sheet:
<body>

<div id="main">
<div id="header">
<div id="content">
<div id="sidebar">
<div id="telli</div>
<div id="footer">

</div>
</div>
</div>
</div>
</div>


</body>


CSS sheet:
html {
background: url(back.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}

#main {
background-image:url(ground.png);
position:absolute;
margin-left:auto;
margin-right:auto;
width:1300px;
height:1200px;

}

#header {
background-image:url(header.png);
position:absolute;
width:1300px;
height:1200px;
}

#content {
background-image:url(content.png);
position:absolute;
width:1300px;
height:1200px;
}

#telli {
background-image:url(telli.png);
position:absolute;
width:1300px;
height:1200px;
}

#sidebar {
background-image:url(sidebar.png);
position:absolute;
width:1300px;
height:1200px;
}

#footer {
background-image:url(footer.png);
position:absolute;
width:1300px;
height:1200px;
}

I hate javascript....

OK, here's my latest challenge with Javascript. I recently went into twp php files and made a few very minor changes to some outdated $date functions. Now, I have three small icons for 'copy', 'paste','delete' using the javascript 'onclick' function that have stopped working.

In fact, when I replace the two recently revised files with the originals, these icons no longer work there either.

Any help would be appreciated. I'm simply at a total loss for ideas here.

From the primary php file is the relevant lines of source code....As far as I can tell, the second paragraph in each area is returning a 'null' value; i.e. o1a.options.selectedIndex is null.

Code:

function aCopy(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);

avail_1a = o1a.options.selectedIndex;
avail_1b = o1b.options.selectedIndex;
avail_2a = o2a.options.selectedIndex;
avail_2b = o2b.options.selectedIndex;
avail_3a = o3a.options.selectedIndex;
avail_3b = o3b.options.selectedIndex;
}

function aPaste(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);

o1a.options.selectedIndex = avail_1a;
o1b.options.selectedIndex = avail_1b;
o2a.options.selectedIndex = avail_2a;
o2b.options.selectedIndex = avail_2b;
o3a.options.selectedIndex = avail_3a;
o3b.options.selectedIndex = avail_3b;
}

function aDelete(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);

o1a.options.selectedIndex = 0;
o1b.options.selectedIndex = 0;
o2a.options.selectedIndex = 0;
o2b.options.selectedIndex = 0;
o3a.options.selectedIndex = 0;
o3b.options.selectedIndex = 0;

From the supporting php file are the following lines of code....
Code:

$s .= "<td nowrap=nowrap class=calendar style='border-left:1px dashed #000;'>";
$s .= "<a href='javascript:void(0);' onclick=\"aCopy('$year-$month-$d');\"><img src='../admin/_calendar/Copy.gif' alt='Copy Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aPaste('$year-$month-$d');\"><img src='../admin/_calendar/Paste.gif' alt='Paste Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aDelete('$year-$month-$d');\"><img src='../admin/_calendar/Delete.gif' alt='Delete/No Availability' width='16' height='16' border='0' /></a>";
$s .= "</td>";

None of these lines of code were changed or altered when I was updating the code.

Any thoughts or suggestions would be deeply appreciated?

Talltom

Below is the code that is using the name FFF in
various places. The effect of all this is that the onclick function is not executed.
I would expect a pop up alert when clicking the submit button.

This only happens if I rename either the form id or the js variable.
Can anyone explain what is going on here ?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Title</title>
    </head>
    <script type="text/javascript">
        function newobject(){
            this.exec=exec;
            function exec(){
                alert("exec");
            }
        }
         FFF  = new newobject();
    </script>
    <body>
        <form id=" FFF " name="somename" action="" method="GET">
            <input type="text" id="someid" name="somename" value="value">
            <input onclick=" FFF .exec()" type="submit" id="submitid" name="somesubmit"  value="xxx">
        </form>
    </body>
</html>

Regards
Heinz

I am trying to autofill a box by clicking a link (with return false). The function to autofill works with button tag but not in anchor tag - instead of returning false, the click event transitions to the href.

Here is the simplified code. Any help is appreciated.Thanks

<!DOCTYPE html PUBLIC"-// W3C//DTD Xhtml 1.0 Strict//EN"" http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Untitled Page
</title>
</head>

<script type="text/javascript">
function autofill(frm){
frm.box2.value = 'sample_value';

}
</script>
<body>
<FORM NAME="browse" ACTION="<TMPL_VAR MYURL>/browse_results">
<font size="5">
<b>FIND
</b>
</font>
<hr>
<div class="menu" id="find_block">
<ul>
<li>
<a href="#">DOMAINS
</a>
<ul>
<li>

<a href="#1" onclick="alert('Heading Home!'); return false;">1. alert with link
</a>
</li>
<li>
<a href="#2" onClick="autofill2(this.form); return false;">2. autofill with link

</a>
</li>
</ul>
</li>
</ul>
<input readOnly name="box2"/>
<INPUT TYPE=BUTTON OnClick="autofill(this.form,'2')" VALUE="autofill with button ">
</div>
<br>
<font size="5">
<b>WHERE
</b>
</font>
<hr>
</FORM>
</body>
</html>

Code:

 
	 Quote:

	

	
		

			
				<html>
<head>
<script language="javascript">
var myWindow;
function christDoes(){
    mydWindow=open("secondary.html", "yes");
    }

    </script>
</head>
<body><form name="myform" method=POST ACTION="sake.html" ><CENTER>
<B>ENTER YOUR SUBJECT</B><INPUT TYPE="TEXT" NAME="subject">
<input type="button" name="ok" value="OK" onClick="christDoes()">
</form>
</body>
</html>
			
		

	
	

Code:

 
	 Quote:

	

	
		

			
				<html>
<head>
<script language="javascript">
function me(){
displayColor();
}
function displayColor() {
function newWindow(strWin,strURL,intX,intY,intWidth,intHeight){
winChild =window.open(strURL,strWin,'left=' + intX + ', screenX =' + intX + ', top=' + intY + ', screenY=' + intY + ', width=' + intWidth + ', height=' + intHeight + ', scrollbars=yes, toolbar=yes');

}

function closeChild(){
    if(winChild){
         winChild.close();
    }
}


var m=0;
var fSubject = self.opener.document.forms[0].subject.value;
	if(fSubject.length>0){
	if(isNaN(fSubject)){fSubject="";}
	else{opener.alert("Please enter figure");}
	numSub=parseInt(fSubject);
	if(numSub==5){var strSub="abcde";}
	self.document.write("<center>" +"ENTER SUBJECT HERE" +"</center><br>");
	var mercy="<HTML><BODY>"
	mercy +="<CENTER>"
	sub=new Array(strSub.length);
	for(var i=0; i<sub.length; i++){
	m++;
	mercy +=m +"<input type='text' name='sub[i].toLowerCase()'>" +"<BR>";
	opener.alert("You have entered" +m +"subjects");
	}
	}
	mercy +="</CENTER></FORM></BODY></HTML><BR></BR>";
	self.document.write(mercy +"<BR>");
	self.document.bgColor="pink";
	newWindow();

document.write("<center><input type=\"button\"  name=\"  submit\"  value=\"SUBMIT\" onClick=newWindow('winChild','child.htm',100,100,200,200)><center>");
}

</script>
</head>
<body onload='me()' onFocus="closeChild();" onUnLoad="closeChild()">

<form></form>
</body>
</html>
			
		

	
	

Code:

 
	 Quote:

	

	
		

			
				<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var winGrandChild;
function newWindow(strWin,strURL,intX,intY,intWidth,intHeight){
winGrandChild =window.open(strURL,strWin,'left=' + intX + ', screenX =' + intX + ', top=' + intY + ', screenY=' + intY + ', width=' + intWidth + ', height=' + intHeight + ', scrollbars=yes, toolbar=yes');
}
function closeGrandChild(){
    if(winGrandChild){
         winGrandChild.close();
    }
}
//-->
</SCRIPT>

</HEAD>


<BODY onFocus="closeGrandChild();" onUnload="closeGrandChild();">
<form>
<INPUT type="button" value="Open Window" name=button1 onClick=newWindow('winGrandChild','grandchild.htm',200,200,200,200)>
<form>
</BODY>
</HTML>
			
		

	
	

can somebody please tell me what need done. Everything is working fine except for the button created in javascript that is in the second window which is to open the third window. Thanks.

Hello all, my second post!

I finally got the below script working in Firefox and was really pumped about it until I realized it didn't load in Google chrome or Safari.

What this script does is its a dual onclick event which makes a hidden div appear and loads an iframe within the now visible div. Here is the code, I would love any input on how to make this work in other browsers.

Here is the header code:
Code:

<SCRIPT type="text/javascript">
<!--

var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>


<SCRIPT type="text/javascript">
function loadIframe(iframeName, url) {
if ( window.frames[iframeName] ) {
window.frames[iframeName].location = url;
return false;
}
else return true;
}
</script>

Here is the code on the page where a link click shows the hidden div and loads the iframe contained.
Code:

<p><a href="#" onclick="showhide('div1');return loadIframe('ifrm1', 'http://www.google.com');">show/hide me</a></p>

</td></tr>
<div id="div1" style="display: none; position: fixed; z-index:4; width: 1010px; height: 500px; left: 5%; top: 15%;  background-color: #f0f0f0; 	border: 1px solid #000; padding: 10px;"><iframe name="ifrm1" id="ifrm1" width="100%" height="90%" scrolling="yes" frameborder="0">Sorry, your browser doesnt support iframes.</iframe><p><a href="#" onclick="showhide('div1')">close</a></div>';

As always, any input is greatly appreciated!

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

Is it possible disable an onclick after clicking it and then enable it from another onclick by id

Code:

<img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;">

This code runs when it is clicked:

Code:

$("#one").click(function() {
			
				runEffectB();
			
			
			
			return false;
		});

What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run.
I am assuming I will be able to re-enable it from another onclick running a similar function.
This is jquery and jquery ui if that helps.
Any ideas much appreciated.

I hope I have this post in the right place! Any help would be very much appreciated...

I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website.

This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser)

My javascript is he
http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces)

The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces)

In the head I have:
<script type="text/javascript" src="../javascript/backgroundchange.js"></script>

...then I have: <body onload="set_style_from_cookie()">

...and for users to choose which background:
<form>
<input type="image" src="../images/white-background-thumb.jpg"
onclick="switch_style('bg1');return false;"
name="theme" value="White" id="bg1">
etc...
</form>

My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally!

I have tried putting the javascript directly onto each page but I still had the same problem.

I hope someone can help, I will be so grateful if I can get this to work.

Many thanks indeed!