I’m trying to override an eventlistner so the accumulated text on the screen under “Message Will Add Here” disappears and I can enter new text whenever the user clicks ok in the alert window. But whatever method I use for this doesn’t do anything. Can you please tell me what I’m doing wrong? Here is my code:
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);
})
