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

Question

I suspect there is something basic about JavaScript parameter passing that I do not understand.

If I click on this button, I get an 'undefined' message in the alert box.

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

If I click on this button, the string value is passed properly:

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

Codepen here:

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

Answer 1

A button does not have a src attribute. However, you can use this.getAttribute('src') .

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

It is recommended that you use data-src (you can use any prefix after data- , not necessarily src ) and this.dataset.src instead (you can use the data-* attribute to embed custom data) because it will ensure that your code will not clash with HTML Element attributes for future editions of HTML. See the documentation .

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