Image changing and changing innerHTML with JS : Query

JavaScript
1

Hi all,

Ive got a small image of a power button and when pressed the inner section on the button changes to yellow, but when its pressed down Im also trying to get part of my H1 (main header logo title) to change to yellow.

Ive created a span with an id surrounding the letters of the H1 that I want to change, the id being : “power”;

The javascript that I have come up with so far and works is as follows:

<img id=“poweron” src=“http://www.sitepoint.com/forums/images/power.png” alt=“Power on button” onmousedown=“this.src=‘images/poweron.png’;” onmouseup=“this.src=‘images/power.png’;”/>

From a previous script I had help with on this very forum, I understand Im not really supposed to be using inline JS, and I know Ive got to create a function for the onmousedown event to trigger changing the H1 text, so am I under the right impression that the JS so far written is redundant and will have to be re-written so thats contained within a script placed just before the closing </body> and an external script for invoking the main function ?

2

First attempt at writing the code in an external JS file:(Can get the image working fine in that it changes the image, but I just cannot get the innerHTML to change the font color…)

function powerImage(){
document.images[“light”].src =“http://www.sitepoint.com/forums/images/power.png”;
return true;
};

function powerOnImage(){
document.images[“light”].src =“http://www.sitepoint.com/forums/images/powerOn.png”;
return true;
change = document.getElementById(“lightsOn”);
change.innerHTML.style.color=“#ff0”;
};

HTML code for the image(button) is as follows:

<a href=“#” onClick=“return powerOnImage()” onDblClick=“return powerImage()”><img name=“light” src=“http://www.sitepoint.com/forums/images/power.png” alt=“Power on button”/></a>

HTML code for the H1 heading text Im trying to change is as follows:

<h1 id=“subH1”><span id=“lightsOn” >PAT</span>Tester</h1>

3

Cracked it now :slight_smile:

Thats my JS code…

function powerImage(){

document.images[“letThereBeLight”].src =“images/power.png”;
document.getElementById(“subH1”).style.color=“#fff”;
return true;
};

function powerOnImage(){

document.images[“letThereBeLight”].src =“images/powerOn.png”;
document.getElementById(“subH1”).style.color=“#ffd700”;
return true;
};

and my HTML is :

<a href=“#” onClick=“return powerOnImage()” onDblClick=“return powerImage()”><img id=“letThereBeLight” src=“images/power.png” alt=“Power on button”/></a>

and heading text HTML:

<h1 id=“subH1”>PAT Testing Specialist</h1>