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
– silly, Commented Dec 7, 2012 at 14:27
I accidentally called playSong insetad if changeSong, I fixed that but it still doesn't work — aclowkay
– aclowkay, Commented Dec 7, 2012 at 14:36

Praveen Kumar Purushothaman · Accepted Answer · 2012-12-07 15:21:06Z

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 7, 2012 at 15:21

answered Dec 7, 2012 at 14:28

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aclowkay Over a year ago

I'm not using any console, I'm just writing the code in Notepad++ and using Chrome to see it..

Lo Juego · Accepted Answer · 2012-12-07 14:29:50Z

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 7, 2012 at 14:29

Lo Juego

1,32511 silver badges12 bronze badges

Comments

pix · Accepted Answer · 2012-12-07 14:30:35Z

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 7, 2012 at 14:30

pix

1,28919 silver badges36 bronze badges

3 Comments

aclowkay Over a year ago

I'm sorry, I'm just using the browser.. I have no Idea how to debug

pix Over a year ago

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 Chrome console IE tutorial

pix Over a year ago

Follow this link, you will learn how to debug with Chrome StackOverFlow

Matthias · Accepted Answer · 2012-12-07 14:33:48Z

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 7, 2012 at 14:33

Matthias

7,5356 gold badges59 silver badges92 bronze badges

answered Dec 7, 2012 at 14:31

leonvv

1801 silver badge4 bronze badges

Collectives™ on Stack Overflow

JavaScript document doesn't change after function call

4 Answers 4

Change:

With:

Actually, it works in the `console`:

1 Comment

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Change:

With:

Actually, it works in the console:

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Actually, it works in the `console`: