javascript - JavaScript onclick : this. id 中的参数传递与其他属性

Question

我怀疑有一些关于 JavaScript 参数传递的基本知识我不明白。

如果单击此按钮，我会在警报框中收到“未定义”消息。


<button onclick="play_audio(this.src)" src="foo.m4a">▶</button>


如果我单击此按钮，字符串值将正确传递:


<button id="foo.m4a" onclick="play_audio(this.id)">▶</button>


代码笔在这里:

https://codepen.io/anon/pen/JBpMYo

Answer 1

按钮没有src属性。但是，您可以使用 this.getAttribute('src')。

<button src="foo.m4a" onclick="play_audio(this.getAttribute('src'))" >▶</button>
<script>
function play_audio(src){
  console.log("Playing "+src);
}
</script>

建议您使用data-src(data-后面可以使用任何前缀，不一定是src)和this.dataset.src 相反(您可以使用 data-* 属性来嵌入自定义数据)，因为它将确保您的代码不会与 future 版本的 HTML 的 HTML 元素属性发生冲突。请参阅documentation .

<button data-src="foo.m4a" onclick="play_audio(this.dataset.src)" >▶</button>
<script>
    function play_audio(src){
      console.log("Playing "+src);
    }
</script>