JavaScript document doesn't change after function call

Question

I'm trying to build a simple HTML5 music player with JavaScript. I've build a player with this code:

<audio controls="controls">
    <source id="song" src="horse.ogg" type="audio/ogg">
</audio>

I've build a couple of <a> which call function changeSong(n);

function changeSong(n) {
    document.getElementById("song").src = "song" + n + ".mp3";
}

and when I click the <a>'s nothing happens to the document, and it won't work..

The <a>'s:

<a href="#1" onclick="changeSong(1)">Play song 1 </a></br>
<a href="#2" onclick="changeSong(2)">Play song 2 </a>

What do to make it work? ////

I tried just running the JavaScript w/o function and it works. but when it's called from the as a function it doesn't...

your function signature is `changeSong` but you are calling `playSong` — silly, Dec 07 '12 at 14:27
I accidentally called playSong insetad if changeSong, I fixed that but it still doesn't work — aclowkay, Dec 07 '12 at 14:36
@user1050389 Step through the code by [using a debugger](http://stackoverflow.com/q/66420/344480). — Matthias, Dec 07 '12 at 14:52

Praveen Kumar Purushothaman · Answer 1 · 2012-12-07T15:21:06.290

1

Change:

<a href="#2" onclick="playSong(2)">Play song 2 </a>

With:

<a href="#2" onclick="changeSong(2)">Play song 2 </a>

Is that a typo?

Actually, it works in the `console`:

document.getElementById("song");
<source id="song" src="horse.ogg" type="audio/ogg">
document.getElementById("song").src;
"chrome://newtab/horse.ogg"
document.getElementById("song").src = 'Hi.ogg';
"Hi.ogg"
document.getElementById("song").src;
"chrome://newtab/Hi.ogg"

edited Dec 07 '12 at 15:21

answered Dec 07 '12 at 14:28

Praveen Kumar Purushothaman

164,888
24
203
252

I'm not using any console, I'm just writing the code in Notepad++ and using Chrome to see it.. – aclowkay Dec 07 '12 at 14:34

score 0 · Answer 2 · answered Dec 07 '12 at 14:29

0

You miss the name of the method in the call. This works:

<a href="#1" onclick="changeSong(1)">Play song 1 </a></br>
<a href="#2" onclick="changeSong(2)">Play song 2 </a>

answered Dec 07 '12 at 14:29

Lo Juego

1,305
11
12

score 0 · Answer 3 · answered Dec 07 '12 at 14:30

0

what is your goal ? Do not tell me that you are trying to call the

changeSong(1)

on the "Play song 1" click.

just by reading your code I can say that change

<a href="#2" onclick="playSong(2)">Play song 2 </a>

by

<a href="#2" onclick="changeSong(2)">Play song 2 </a>

Or I'm missing something :/

Can you add some debug code into the

changeSong(n){
    document.getElementById("song").src="song"+n+".mp3";
}

an tell us if something is appening :)

answered Dec 07 '12 at 14:30

pix

1,264
19
32

I'm sorry, I'm just using the browser.. I have no Idea how to debug – aclowkay Dec 07 '12 at 14:32
what king of browser are you using? there is a large amount of addons to help you to debug your js code. For exemple: Firefox [firebug](http://getfirebug.com/javascript) Chrome [console](http://stackoverflow.com/questions/66420/how-do-you-launch-the-javascript-debugger-in-google-chrome) IE [tutorial](http://berniesumption.com/software/how-to-debug-javascript-in-internet-explorer/) – pix Dec 07 '12 at 14:35
Follow this link, you will learn how to debug with Chrome [StackOverFlow](http://stackoverflow.com/questions/217957/how-to-print-debug-messages-in-the-google-chrome-javascript-console) – pix Dec 07 '12 at 14:40

score 0 · Answer 4 · edited Dec 07 '12 at 14:33

0

I'm not familiar with HTML5 , but I can find two errors.

You're calling playSong instead of changeSong

You should declare that changeSong is a function:

function changeSong(n){
    document.getElementById("song").src = "song" + n + ".mp3";
}

edited Dec 07 '12 at 14:33

Matthias

7,432
6
55
88

answered Dec 07 '12 at 14:31

leonvv

152
4

JavaScript document doesn't change after function call

4 Answers4

Change:

With:

Actually, it works in the console:

Actually, it works in the `console`: