Help with addEventListener

Hi everyone! I am just learning JS, and I got stuck in simple addEventListener codes. Can anyone help me understand why the “click” isn’t working in the code below? Thank you!

Teste
		function cor(){
		var cx = document.getElementById("dv1");
		cx.style.border="2px solid green";
		cx.style.width="200px";
		cx.style.height="200px";
		cx.style.borderRadius="50%";
		cx.style.backgroundColor="blue"; 
		}
		
		function changeColor(){
		var obj=getElementById("dv1");
		obj.style.background-color("red");
		}
		
		function doTheChange(){
		document.addEventListener("click", changeColor);
		}
		
		window.addEventListener("load",cor);
		window.addEventListener("load",doTheChange);
		
		</script>
</head>
	<body>
	<div id="dv1"></div>

		
</body>

Thank you, I managed to turn the circle red when clicked after you pointed out the errors!! Here’s the new code:

Teste
		function cor(){
		var cx = document.getElementById("dv1");
		cx.style.border="2px solid green";
		cx.style.width="200px";
		cx.style.height="200px";
		cx.style.borderRadius="50%";
		cx.style.backgroundColor="blue"; 
		}
		
		function changeColor(){
		var obj=document.	getElementById("dv1");
		obj.style.backgroundColor="red";
		}
		
		function doTheChange(){
		document.addEventListener("click", changeColor);
		}
		
		window.addEventListener("load",cor);
		window.addEventListener("load",doTheChange);
		
		</script>
</head>
	<body>
	<div id="dv1"></div>

		
</body>

Thank you very much! Now if possible I’d like to review another code where I’m trying to move the circle:

!DOCTYPE html>
<html lang="pt-br">
	<head>
		<title> Teste </title>
		
		<meta charset="utf-8"/>
		<script>
			
		function editCircle(){
		var cx = document.getElementById("dv1");
			cx.style.border="2px solid green";
			cx.style.width="200px";
			cx.style.height="200px";
			cx.style.borderRadius="50%";
			cx.style.backgroundColor="blue"; 	
		}	
		
			var dx;
			var dy;
			var px;
			var py;
			var spe;
			var obj;
			var tmp;
						
			function initiate(){
				dx=0;
				dy=0;
				px=0;
				py=0;
				spe=10;
				obj=document.getElementById("dv1");
				document.addEventListener("keydown",teclaDw);
				document.addEventListener("keyup", teclaUp);
				setInterval(enterFrame,20);
				}
			
			function teclaDw(){
				var tecla=event.keyCode;
				if(tecla=37){
					dx = -1;
				}
				else if(tecla=38){
					dy = -1;
				}
				else if(tecla=39){
					dx = 1;
				}
				else if(tecla=40){
					dy = 1;
				}
			}
			
			function teclaUp(){
				var tecla=event.keyCode;
				if(tecla==37){
					dx=0;
				}
				else if(tecla==38){
					dy=0;
				}
				else if(tecla==39){
					dx=0;
				}
				else if(tecla==40){
					dy=0;
				}
			}
			
			function enterFrame(){
				px+=dx*spe;
				py+=dy*spe;
				obj.style.left=px+"px";
				obj.style.top=py+"px";
			}
			
			window.addEventListener("load", editCircle);	
			window.addEventListener("load", initiate);	
															
			
			</script>
			
			
	</head>
	<body>
		<div id="dv1"></div>
			
			
	</body>
</html>

I expect to move the circle with my keyboard.

I hoped the keyboard arrows on the function teclaDw() atributed the value of 1 and -1 to dx and dy, so that those variables when multiplied by ‘spe’ on the function enterFrame() changed the element dv1 position on the screen. The function teclaUp() is to stop the movement when the keyboard arrows are no longer pressed.

Hmmm I see! Thanks again for the help, it worked!
If it’s not too much to ask, could you explain me the moveCircle() function you made? You assigned the x,y values to an array with the keys in a function that calls an event? I think I haven’t got to this part of my studies yet!

Thank you very much!