I am pretty new to javascript, and honestly have no idea what i’m doing. I was writing an html page in which i wanted to put a runaway button. But the script does not run at all.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My question</title>
<style>
body {
background-color: #ffcc00;
color: #333;
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
overflow: hidden;
}
h1 {
font-size: 48px;
margin-bottom: 30px;
color: #ffcc00;
}
p {
font-size: 24px;
margin-bottom: 20px;
color: #ffcc00;
}
button {
padding: 15px 30px;
margin: 10px;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 18px;
transition: background-color 0.3s ease;
}
button.yes-button {
background-color: #ffcc00;
color: #333;
}
button.yes-button:hover {
background-color: #ffdb4d; /* Lighter yellow on hover */
}
button.no-button {
background-color: #ff6666; /* Red button color */
color: #fff; /* White button text color */
}
#nobutton {
position: absolute;
white-space: nowrap;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.pinimg.com/564x/bd/3e/f6/bd3ef69efdacbe1c6d2a0db99e5c8dae.jpg');
background-size: auto 120%;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
</style>
</head>
<body>
<h1>My question</h1>
<button class="yes-button">yes</button>
<button class="no-button" id="noButton">no</button>
<script>
const evilbutton = document.getElementById('nobutton');
const OFFSET = 100
evilbutton.addEventListener('mousemove', (e) => {
const x = e.pageX
const y = e.pageY
const btnbox = evilbutton.getBoundingClientRect()
const horizontaldist = distancefromcenter(btnbox.x, x, btnbox.width)
const verticaldist = distancefromcenter(btnbox.y, y, btnbox.height)
const horizontaloffset = btnbox.width/2 + OFFSET
const verticaloffset = btnbox.height/2 + OFFSET
if (Math.abs(horizontaldist) <= horizontaloffset && Math.abs(verticaldist) <= verticaloffset) {
setbtnpos(
btnbox.x + horizontaloffset / horizontaldist * 10,
btnbox.y + verticaloffest / verticaldist * 10
)
}
})
function setbtnpos(left, top) {
const windowbox = document.body.getBoundingClientRect()
const buttonbox = evilbutton.getBoundingClientRect()
if(distancefromecenter(left, windowbox.left, buttonbox.width) < 0) {
left = windowbox.right - buttonbox.width - OFFSET
}
if(distancefromecenter(left, windowbox.right, buttonbox.width) > 0) {
left = windowbox.left + OFFSET
}
if(distancefromecenter(left, windowbox.bottom, buttonbox.width) > 0) {
left = windowbox.top + OFFSET
}
if(distancefromecenter(top, windowbox.top, buttonbox.height) < 0) {
top = windowbox.bottom - buttonbox.height - OFFSET
}
evilbutton.style.top = top + 'px'
evilbutton.style.left = left + 'px'
}
function distancefromcenter(boxpos, mousepos, boxsize) {
return boxpos - mousepos + boxsize/2
}
</script>
</body>
</html>
I Know this exact question has been asked by countless people already, but I’ve already tried all the solutions were discussed in those threads. I have placed the script at the bottom of the tag, I have made sure (i think) of there being no typos, but i just can’t figure out why EventListener is not able to find this. Most of the code in the below snippet isnt written by and me just taken from tutorials and youtube videos. Can anyone point out to me why this is not working?