函数调用后JavaScript文档不会更改

Question

我正在尝试用JavaScript构建一个简单的HTML5音乐播放器。 我用这段代码构建了一个播放器：

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

我构建了几个调用函数changeSong（n）;

的<a>

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

当我点击<a>时，文档没有任何反应，也无法正常工作..

<a>：

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

如何使其发挥作用？ ////

我试过运行JavaScript w / o函数并且它可以工作。但是当它作为一个函数被调用时它不会......

Answer 1

更改：

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

使用：

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

这是一个错字吗？

---

实际上，它适用于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"

Answer 2

您错过了通话中方法的名称。这有效：

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

Answer 3

你的目标是什么？不要告诉我你试图打电话给

changeSong(1)

播放歌曲1＆＃34;点击。

只需阅读你的代码我就可以说改变了

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

通过

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

或者我错过了一些东西：/

您可以在

中添加一些调试代码吗？

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

告诉我们是否有事情发生：）

Answer 4

我不熟悉HTML5，但我发现了两个错误。

1. 您正在调用playSong而不是changeSong

2. 您应该声明changeSong是一个函数：

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