how do i return a relative html table value?

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.

Leave a Comment

Your email address will not be published.

Scroll to Top