Forum Moderators: open
HTML
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Attach sound per anchor ID</title>
<meta content="text/html; charset=us-ascii" http-equiv="Content-Type" />
<script src="attachSoundPerAnchorID.js" type="text/javascript"></script>
</head>
<body>
<embed id="thup" src="thup.wav" loop="false"
autostart="false" hidden="true" enablejavascript="true"></embed>
<p>
<a id="anchor1" href="#">one</a>
<br><br><br>
<a id="anchor2" href="#">two</a>
</p>
</body>
</html>
Javascript
function onClickSound(){
document.getElementById('thup').Play();
}
window.onload = function () {
document.getElementById("anchor1").onclick=onClickSound;
document.getElementById("anchor2").onclick=onClickSound;
}
However when I try to use an anchors collection it does not work see below.
HTML
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Attach sound on all anchors</title>
<meta content="text/html; charset=us-ascii" http-equiv="Content-Type" />
<script src="AttachSoundOnAllAnchors.js" type="text/javascript"></script>
</head>
<body>
<embed id="thup" src="thup.wav" loop="false"
autostart="false" hidden="true" enablejavascript="true"></embed>
<p>
<a href="#">one</a><br><br><br>
<a href="#">two</a>
</p>
</body>
</html>
JavaScript
var anchors;
function onClickSound(){
document.getElementById('thup').Play();
}
function allAanchor(){
for (var i=0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.onclick=onClickSound();
}
}
window.onload = function () {
anchors = document.getElementsByTagName("a");
allAanchor();
}
The JavaScript and HTML code immediately above does not work. I put a "var anchor;" statement outside of all functions since including it inside the functions generated an anchors variable not defined error. But this only gets rid of the error it does not let the script work. So I would be most appreciative if someone here to tell me how I attach a sound to all anchor tags on a HTML page without explicitly giving each anchor an ID and then explicitly writing code to attach a sound to that ID.
Very sincerely
Marc
In your first example, which you say works, you have:
document.getElementById("anchor1").onclick=onClickSound;But in your second example, you have:
anchor.onclick=onClickSound();
I don't think you should have the brackets after the function name, when you are assigning the function itself. (Otherwise I guess you will end up assigning the output of the function instead?!)
Just a side issue... is there a reason why your 'anchors' variable needs to be global, can it not just be a local variable within the allAanchor() function?
Your sincere thanks.
Marc
function onClickSound(){
document.getElementById('thup').Play();
}function allAanchor(){
for (var i=0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.onclick=onClickSound;
}
}
window.onload = function () {
anchors = document.getElementsByTagName("a");
allAanchor();
}
...As for that global variable thing it works whether you declarable global variable in line 1 of the code or not. As long as I create the anchor's collection without using the VAR keyword in front of that line in my onload function. I do not know if the onload event is somehow creating a global variable or not.
That is because when you don't use the VAR keyword, the variable is implicitly defined as a global. Which could cause problems in other situations, so always best to explicitly declare your variables with 'var'. And to always use local variables wherever possible.
So, your code could be rewritten:
function allAanchor() {
var anchors = document.getElementsByTagName("a");
for (var i=0; i < anchors.length; i++) {
anchors[i].onclick=onClickSound;
}
} window.onload = function () {
allAanchor();
}
I have not seen the syntax of evoking a function without parentheses documented...
In your case, without parentheses, you are not 'evoking' the function. You are actually assigning the entire function to another variable. The function itself is not executed (evoked) until your onclick event fires.
In your case, without parentheses, you are not 'evoking' the function. You are actually assigning the entire function to another variable. The function itself is not executed (evoked) until your onclick event fires.
Then assigning the function to another variable is something very different then passing a variable to an algebraic formula or function?
