please, I can’t handle the eventlistener

I’m working on my college’s project and it’s kinda like a web-text-based game, where the player come and play. so I’m interesting in a click event on a document to change the context and I did it with the code below…. the problem is that it’s keep repeating everything and I can’t even type in the input!!

const homepage = document.querySelector('#homepage')

document.addEventListener('click',function(){
/*I console.log to check that the function is still repeating*/
console.log('check')
homepage.innerHTML = `<div> hello what's your name? </div>`
document.addEventListener('click',function() {
homepage.innerHTML = `<div> my name is <br> 
<input id="name"> </input> <br>
<button> submit </button<
`
})
})
#homepage {
  text-align: center;
}
<body>
<div id = "homepage"> click to change the content </div>