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
}

When running this code, I get this output on page [object HTMLButtonElement], however, if I change this to this.innerHTML, I get the children of the element without the parent. How do I go about outputting the entire HTML of the button?

5 Replies

Zoë•8mo ago

this.outerHTML But why are you doing it like this?

Matt•8mo ago

I'm attempting to build a Rock Paper Scissors challenge on FrontendMentor I'll post my solution soon. I'm probably not doing things the right way but what I have is working

Zoë•8mo ago

Good mentality, what matters is to get something working, it can be done properly later

Matt•8mo ago

https://discord.com/channels/436251713830125568/1166159992622161920/1166159992622161920

ἔρως•8mo ago

you can do this with a template by the way, i mean the template tag, not a template string

Gaming

Programming

Display HTML using .this