addEventListener não colabora

Programação
#1

Boa tarde

Estou fazendo um programa onde uma série de imagens aleatórias são mostradas num fundo de uma div assim que o usuário clica o botão de iniciar e ele também pode parar as imagens clicando no botão de parar.

O meu problema é o seguinte eu chamava a função responsável pelas imagens através do evento html onclick, mas percebi que dava pra ficar clicando o botão várias vezes e isso chamava a função várias vezes e acabava bugando o programa.

Como não fazia a mínima ideia de como resolver isso tentei usar o método addEventListener pois eu vi que tem como adicionar e remover eventos através dele mas é ai que a desgraça começa.

Ele está chama a função das imagens sem o botão de iniciar ter sido clicado, como se fosse um evento onload na tag body, deve ser simples a solução mas estou perdido.

Meu código :

identar texto pré-formatado por 4 espaços 
 <head>
       <meta charset="utf-8">
	   <meta name="author" content="The Wind Waker">
	   <meta name="keywords" content="controlador,imagens,random">
	   <meta name="descriptions" content="gerador de imagens aleatórias">
	   
	   
	   <title> Gerador de imagens </title>
	   
	   <style>
	          h1{
			     text-align:center;
				 text-decoration:underline;
				 font-family:arial;
				 color:red;
			    }
			  
			  
			  #exemplo{
			     
				 border:solid 1px;
				 background-color:gray;
				 background-repeat:no-repeat;
				 background-size:cover;
				 padding:100px;
				 padding-left:100px;
				 margin-left:405px;
				 margin-right:150px;
				 display:block;
				 position:absolute;
			    }
			  
			  
			  #botao1{
			     cursor:pointer;
				 margin-top:250px;
				 margin-left:400px;
				 padding:12px;
				 position:absolute;
				}
				
			  #botao2{
			     cursor:pointer;
				 margin-top:250px;
				 margin-left:550px;
				 padding:12px;
				 position:absolute;
				}
				
				
			  #fundo{
			     background-repeat:repeat;
			  }
			  
	   </style>
 
 
 </head>
 
 
 <body id="fundo">
       <h1>Gerador de imagens</h1>
	   
	   <div id="exemplo"></div>
	
	   <input type='button' value='Iniciar' id='botao1'>
	   <input type='button' value='Parar'   onclick='stop()' id='botao2'>

	   
	  <script>
	        
			var tempo,aleatorio,bt1;
			
			document.getElementById("botao1").addEventListener("click",start());
	        
	        /*Essa é a função principal do programa é aonde as imagens aleatórias são fabricadas*/
	        function principal(){
			
			aleatorio = parseInt(Math.random()*7);/*gerador de números aleatórios*/
			
			switch(aleatorio){
			  
			  case 1:document.getElementById("exemplo").style.backgroundImage = "url('imagens/dora.jpg')";
			         
			  break;
			  
			  case 2:document.getElementById("exemplo").style.backgroundImage = "url('imagens/mario.png')";
			  
			  break;
			  
			  case 3:document.getElementById("exemplo").style.backgroundImage = "url('imagens/sonic.png')";
			  
			  break;
			  
			  case 4:document.getElementById("exemplo").style.backgroundImage = "url('imagens/batman.jpeg')";
			  
			  break;
			  
			  case 5:document.getElementById("exemplo").style.backgroundImage = "url('imagens/spiderman.png')";
			  
			  break;
			  
			  case 6 :document.getElementById("exemplo").style.backgroundImage = "url('imagens/wonderwoman.jpg')";
			  
			  break;
			}
			
		}
		/*Serve para inserir uma imagem no fundo da página, assim que o botão stop é clicado*/
		
		function fundo(){
		
		    switch(aleatorio){
			  
			  case 1:document.getElementById("fundo").style.backgroundImage = "url('imagens/dora.jpg')";
			         
			  break;
			  
			  case 2:document.getElementById("fundo").style.backgroundImage = "url('imagens/mario.png')";
			  
			  break;
			  
			  case 3:document.getElementById("fundo").style.backgroundImage = "url('imagens/sonic.png')";
			  
			  break;
			  
			  case 4:document.getElementById("fundo").style.backgroundImage = "url('imagens/batman.jpeg')";
			  
			  break;
			  
			  case 5:document.getElementById("fundo").style.backgroundImage = "url('imagens/spiderman.png')";
			  
			  break;
			  
			  case 6 :document.getElementById("fundo").style.backgroundImage = "url('imagens/wonderwoman.jpg')";
			  
			  break;
			}
		
		
		}
			
	
	/*Essa função  inicia o programa chamando a função principal*/
	function start(){
	
     tempo = setInterval(principal,1000);/*Mostra a imagem de 1 em 1 segundos*/
	}
	/*Essa função para a função start e chama a função fundo*/
	function stop(){
	
	clearInterval(tempo);
	fundo();
	}
	
	</script>
	
	
</body>
#2 
addEventListener("click", start())

O problema é que ao fazer start() (com parênteses) você já chamou a função start (ou seja, o setInterval já foi chamado).

E o retorno da função é que foi passado para addEventListener, mas como start não retorna nada, então addEventListener não recebeu nada.

Só que addEventListener deve receber a função a ser executada, então você tem que passar a própria função, assim:

addEventListener("click", start)

Repare que usei apenas start, sem os parênteses. Assim, addEventListener sabe que essa é a função a ser chamada.

2 curtidas
#3

Vlw man salvou minha vida kkk.