Estoy tratando de anular un eventlistner para que desaparezca el texto acumulado en la pantalla debajo de "El mensaje se agregará aquí" y pueda ingresar texto nuevo cada vez que el usuario haga clic en Aceptar en la ventana de alerta. Pero cualquier método que use para esto no hace nada. ¿Puedes decirme qué estoy haciendo mal? Aquí está mi código:
HTML
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="btncontainer"> <button class="button"type="button" name="button"> Over or Click Here </button> <p>MESSAGE WILL ADD HERE</p> </div> <script type="text/javascript" src="testc.js"> </script> </body> </html>JavaScript
var btn = document.querySelector('.button'); var count = 1; var newpar; var newval; var container = document.getElementsByClassName('.btncontainer'); function e(){ newpar = document.createElement('p'); newpar.className = 'ps' newval = document.createTextNode('Was hovered ' + count + ' times'); newpar.appendChild(newval); document.querySelector('.btncontainer').appendChild(newpar); count++; } btn.addEventListener('mouseover', e); btn.addEventListener('click',function(){ count-=1; alert(`The button was hovered over ${count} times`); count = 0; container.removeChild(newpar); btn.removeEventListener('mouseover', e); })