8 replies

Display HTML using .this

Hello,

I'm attempting to output HTML element onto DOM depending on user input (click). Here is sample code:

const main = document.querySelector("main")
const buttons = document.querySelectorAll("main button")

buttons.forEach(btn => {
    btn.addEventListener("click", findWinner)
});

function findWinner() {
  main.innerHTML = this
}

const main = document.querySelector("main")
const buttons = document.querySelectorAll("main button")

buttons.forEach(btn => {
    btn.addEventListener("click", findWinner)
});

function findWinner() {
  main.innerHTML = this
}

const main = document.querySelector("main")
const buttons = document.querySelectorAll("main button")

buttons.forEach(btn => {
    btn.addEventListener("click", findWinner)
});

function findWinner() {
  main.innerHTML = this
}

const main = document.querySelector("main")
const buttons = document.querySelectorAll("main button")

buttons.forEach(btn => {
    btn.addEventListener("click", findWinner)
});

function findWinner() {
  main.innerHTML = this
}

When running this code, I get this output on page

[object HTMLButtonElement]

[object HTMLButtonElement]

[object HTMLButtonElement]

[object HTMLButtonElement], however, if I change

this

this

this

this to

this.innerHTML

this.innerHTML

this.innerHTML

this.innerHTML, I get the children of the element without the parent. How do I go about outputting the entire HTML of the button?

Display HTML using .this

Similar Threads

Similar Threads

Similar Threads