How to cancel function when mouse leaves element?

349
January 20, 2017, at 11:52 PM

I am writing some Javascript for my page that would use simple position incrementing to move two stars around a button. I know how to move them around. However, I would like to know how to stop the function when the mouse leaves the button. I attempted it with a function called endFunction(), but it doesn't completely reset. Also, is there any way that I could make it so that the onmouseenterevent only occurs once. My JSFiddle is here: https://jsfiddle.net/MCBlastoise/1503x4tr/10/

Here is my code for the full page:

body { 
	margin:0px; 
} 
.heading { 
	text-align:center; 
	font-family:'Bungee Shade', Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; 
	color:green; 
	font-weight:bold; 
	font-size:30px; 
	margin-top:0px; 
} 
.text { 
	color:red; 
	font-family:'Josefin Sans', Futura, Trebuchet MS, Arial, sans-serif; 
	font-size:21px; 
	text-align:justify; 
	margin-top:-15px; 
} 
br { 
	line-height:500%; 
} 
.container { 
	position:relative; 
	background-color:silver; 
	width:350px; 
	height:350px; 
	margin-left:auto; 
	margin-right:auto; 
} 
.star { 
	width:40px; 
	height:40px; 
	position:absolute; 
} 
#starOne { 
	top:0px; 
	left:0px; 
} 
#starTwo { 
	top:310px; 
	left:310px; 
} 
.button { 
	width:250px; 
	height:250px; 
	border-style:solid; 
	border-color:red; 
	border-width:5px; 
	border-radius:60px; 
	margin-top:42px; 
	text-align:center; 
	position:absolute; 
	bottom:50px; 
	left:50px; 
} 
.button:hover { 
	background-color: #7CFC00; 
	cursor:pointer 
} 
.button-text { 
	font-family:'Righteous', Courier New; 
	color:#9400D3; 
	font-size:76px; 
	line-height:125%; 
} 
#compliment { 
	text-align:center; 
	font-family:'VT323', Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif; 
	color:#ffd400; 
	font-size:50px; 
}
<!DOCTYPE html> 
<html> 
<head> 
<link type="text/css" rel="stylesheet" href="Complement.css"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bungee+Shade|Josefin+Sans|VT323|Righteous"> 
<title>The Compliment Machine</title> 
</head> 
<body> 
<h2 class="heading">The Compliment Machine</h2> 
<p class="text">In the interest of spreading holiday cheer, I have designed this website with one goal in mind. Pressing the button below will randomly generate a compliment. Hopefully, this little experiment will brighten up your day.</p> 
<div class="container"> 
<img src="Star.png" class="star" id="starOne"> 
<div class="button" onclick="timedFunction()" onmouseenter="parentFunction()" onmouseleave="endFunction()"> <span class="button-text">Click me!</span> </div> 
<img src="Star.png" class="star" id="starTwo"> 
</div> 
<br> 
<p id="compliment"></p> 
 
<script> 
	var userName = prompt("What is your name?"); 
	var generatedUserName = userName === null || userName === ""; 
	var compliment = [ 
		"Have a nice day", 
		"you contribute to society", 
		"Always be yourself", 
		"you are a wonderful person", 
		"Keep up the good work", 
		"never stop believing in yourself", 
		"you have a great sense of humor", 
		"You should feel proud of yourself", 
		"Never stop trying", 
		"you are a winner" 
	]; 
</script> 
 
<script> 
	function timedFunction() {		 
		document.getElementsByTagName("DIV")[1].style.display = "none"; 
		var repeater = setInterval(inspiration, 1000); 
	} 
	var inspiration = function inspire() { 
		var result = Math.random(); 
		 
		//This code block checks for null, undefined, and other falsy values in the prompt. 
		if (generatedUserName) { 
			if (0 <= result && result < 0.11) { 
				userName = "my friend"; 
			} 
			if (0.21 <= result && result < 0.31) { 
				userName = "my friend"; 
			} 
			if (0.41 <= result && result < 0.51) { 
				userName = "my friend"; 
			} 
			if (0.71 <= result && result < 0.81) { 
				userName = "my friend"; 
			} 
			if (0.81 <= result && result < 0.91) { 
				userName = "my friend"; 
			} 
			if (0.11 <= result && result < 0.21) { 
				userName = "My friend"; 
			} 
			if (0.31 <= result && result < 0.41) { 
				userName = "My friend"; 
			} 
			if (0.51 <= result && result < 0.61) { 
				userName = "My friend"; 
			} 
			if (0.61 <= result && result < 0.71) { 
				userName = "My friend"; 
			} 
			if (0.91 <= result && result < 1) { 
				userName = "My friend"; 
			} 
		} 
		 
		//This code block changes the sentence with ID 'compliment' randomly, based on the value of the variable 'result'. 
		if (0 <= result && result < 0.11) { 
			document.getElementById("compliment").innerHTML = compliment[0]+", "+userName+"!"; 
		}; 
		if (0.11 <= result && result < 0.21) { 
			document.getElementById("compliment").innerHTML = userName+", "+compliment[1]+"."; 
		}; 
		if (0.21 <= result && result < 0.31) { 
			document.getElementById("compliment").innerHTML = compliment[2]+", "+userName+"."; 
		}; 
		if (0.31 <= result && result < 0.41) { 
			document.getElementById("compliment").innerHTML = userName+", "+compliment[3]+"."; 
		}; 
		if (0.41 <= result && result < 0.51) { 
			document.getElementById("compliment").innerHTML = compliment[4]+", "+userName+"!"; 
		}; 
		if (0.51 <= result && result < 0.61) { 
			document.getElementById("compliment").innerHTML = userName+", "+compliment[5]+"."; 
		}; 
		if (0.61 <= result && result < 0.71) { 
			document.getElementById("compliment").innerHTML = userName+", "+compliment[6]+"."; 
		}; 
		if (0.71 <= result && result < 0.81) { 
			document.getElementById("compliment").innerHTML = compliment[7]+", "+userName+"."; 
		}; 
		if (0.81 <= result && result < 0.91) { 
			document.getElementById("compliment").innerHTML = compliment[8]+", "+userName+"."; 
		}; 
		if (0.91 <= result && result < 1) { 
			document.getElementById("compliment").innerHTML = userName+", "+compliment[9]+"."; 
		}; 
	} 
	var i = 0; 
	function limitedFunction() { 
		inspiration(); 
		i++; 
		if (i === 5) { 
			document.getElementById("disappear").style.display = "none"; 
		} 
	} 
</script> 
 
<script> 
	var starOne = document.getElementById("starOne"); 
	var posLeft = 0; 
	var posTop = 0; 
	 
	function parentFunction() { 
		var toLeft = setInterval(moveLeft, 10); 
		 
		function moveLeft() { 
			posLeft++; 
			starOne.style.left = posLeft + 'px'; 
			if (starOne.style.left === "310px") { 
				clearInterval(toLeft); 
			} 
		} 
	} 
	function endFunction() { 
		posLeft = 0; 
		posTop = 0; 
		starOne.style.top = posTop + 'px'; 
		starOne.style.left = posLeft + 'px'; 
	} 
 
 
</script> 
 
</body> 
</html>

READ ALSO
Personalize the Bootstrap theme?

Personalize the Bootstrap theme?

I created a basket on bootstrap using "Font Awesome"

429
Checkbox css style to look like disabled

Checkbox css style to look like disabled

I need to style enabled checkbox to look like disabled, but style="background: #e4e4ee4;" doesn't workCould someone help me? How to make checkbox to look like it has attribute disabled with css? (Case with usage attribute disable is forbidden)

478
Why is UIkIt 3 source not viewable?

Why is UIkIt 3 source not viewable?

If you right click to view source for this website https://getuikitcom/docs/introduction why is is that you can not see the actual code using Firefox?

417
Bootstrap theme classes

Bootstrap theme classes

into my website a have a simple theme bootstrap and I want to apply a new theme!

465