You are assigning the event handler wrong. Generally you should avoid using on...
attributes, but if you do it, you need to pay attention to how this
is assigned a value.
It is defined inside the onclick
, but not inside your function playAudio
, so you will need to pass it on:
play.innerHTML = '<button onclick="playAudio(this)">Play Chord</button>'
function playAudio(button){
var firstCell = button.parentNode.parentNode.childNodes[1].nodeValue;
alert(firstCell);
}
However alternativly you can use this
inside playAudio
if you assign it directly as the event handler, but then you’ll need to create the button as a DOM element:
const button = document.createElement("button");
button.textContent = "Play Chord"; // Use textContent instead of innerHtml when assigning plain text
button.addEventListener("click", playAudio); // or: button.onclick = playAudio;
play.appendChild(button);
Now you can use this
inside playAudio
. Or, even better access the event object as the first parameter inside playAudio
:
function playAudio(event){
var button = event.target; // or: var button = this;
var firstCell = button.parentNode.parentNode.childNodes[1].nodeValue;
alert(firstCell);
}
Intoduction to events: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
CLICK HERE to find out more related problems solutions.