Evento onclick si attiva in automatico

di il
4 risposte

Evento onclick si attiva in automatico

Salve, mi sono approcciato da poco a javascript e mi sono appena imbattuto in un problema che proprio non riesco a comprendere nè tantomeno a risolvere. In sostanza, sto creando un sito web e vorrei semplicemente associare all'evento onclick di un toggle una funzione, non specifico quale perchè il problema è a monte: una volta fatto partire gestoreLoad tramite “window.onload” nel file .js associato, anzichè semplicemente associarmi la variabile .js all'elemento con l'id corrispondente nella pagina HTML, mi fa partire l'evento associato ad onclick sebbene l'unica cosa che faccia sia semplicemente aprire la pagina web. E' come se aprendo la pagina, il toggle venisse cliccato in automatico, ma ho anche provato ad associare la funzione ad altri elementi della pagina HTML e il risultato è sempre lo stesso: si attiva la funzione chiamata dall'evento onclick, anche se apro soltanto la pagina. Comunque, vi scrivo i codici. Ho ridotto il codice JS ad un semplice alert perchè il problema è proprio il fatto che la funzione parte da sola. Grazie mille per l'aiuto.

var toggle;




function gestoreSaluta() {
	try{
		alert("saluta");
	}
	catch (e){
		
		alert ("gestoreSaluta " + e);
	}
	
	
}
function gestoreLoad (){
	try{
	toggle = document.getElementById("toggle");
	toggle.onclick = gestoreSaluta();
	
	}
	catch (e){
		alert ("gestoreLoad " + e)
	}
}
window.onload=gestoreLoad;
<!DOCTYPE html> 
<html>
<ul id="menuMobile">
					<li class= "navigationMob">  <a  href= ""> Opzione 1 </a> </li>
					<li class= "navigationMob">  <a  href= ""> Opzione 2 </a> </li>
					<li class= "navigationMob">  <a  href= ""> Opzione 3 </a> </li>
					<li class= "navigationMob">  <a  href= ""> Opzione 4 </a> </li>
					<li class= "navigationMob">  <a  href= "Form.html"> Form </a> </li>
				</ul>
<input id="tastoSidebar" type="button" value="-->">
	<head> 
		<meta charset= "utf-8">
		<meta name="viewport" content="initial-scale=1.0, width=device-width" />
		<script src="carosello.js"> </script> 
		<script src="aperturaMenu.js"> </script>
		<title> HomePageLaVolpiglia </title>
		<link rel= "stylesheet" href= "LaVolpigliaStyleSheet.css"> 
	</head>
	<div id= "inizio">
		<div class= "sezioneLogo">
			<a = href= "HomePageLaVolpiglia.html"> <img src= "LogoVolpiglia.png" class= "logo" alt= "Logo Oleificio Volpiglia"> </a>
		</div>
		<nav> 
				<ul id= "dashboard">
					
					<li class= "navigation">  <a  href= ""> Opzione 1 </a> </li>
					<li class= "navigation">  <a  href= ""> Opzione 2 </a> </li>
					<li class= "navigation">  <a  href= ""> Opzione 3 </a> </li>
					<li class= "navigation">  <a  href= ""> Opzione 4 </a> </li>
					<li class= "navigation">  <a  href= "Form.html"> Form </a> </li>
					
				</ul>
				
		</nav>
	
		
			<a href= "" id= "toggle"> &#9776 </a>
	</div>
	<div id= "carosello">
		<div id="slider">
			<img src="foto1.jpeg" id="foto"/>
		
		</div>
	</div>
		
	<body>
		
		
		<header> 
			
				
				<ul class= "bread">
					
					<li> <a  href= ""> Oggetto </a> </li>
					
					<li> <a  href= ""> Oggetto </a> </li>
					
					<li> <a  href= ""> Oggetto </a> </li>
					
			
				</ul>
				
		</header>
		
			<div class= "content_container">
				
			<main>
			
			<p> <img src= "alberi.jpeg" alt= "alberi" class= "albero"/>  Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, 
			quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio 
			alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano 
			passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.Lorem Ipsum è un testo segnaposto utilizzato nel
			settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e 
			li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu 
			reso popolare, negli anni ’60, con la diffusione dei fogli di </p> <h4>  Questa è una potenziale foto  </h4> <p> caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione 
			come Aldus PageMaker, che includeva versioni del Lorem Ipsum.Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo 
			segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più 
			di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili 
			“Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum. </p>
			
			</main>
		
				<aside class= "sidebar"> 
					<dl id= "listaBar"> 
						<dt id "stc" class= "listaSide"> Lynotype</dt> 
						<dd class= "listaSide"> Lorem Ipsum è un testo </dd>
						<dt class= "listaSide"> Ambarabà </dt> 
						<dd class= "listaSide"> Lorem Ipsum è considerato </dd> 
						<dt class= "listaSide"> software </dt>
						<dd class= "listaSide"> diffusione dei fogli </dd>
					</dl>
			  
				</aside>
		
			</div>
	
	</body>
	<hr>
	<footer id= "footer"> 
		
		<br>
		<br>
		<div class= "boxFooterContatti">
			<div class= "spazioContatti">
			<img src="wh.png" class= "contatti" >
			<img src="mail.png" class= "contatti">
			</div>
		</div>
		<div class="boxFooterSocial"> 
			<img src="LogoFB.png" class= "social"> 
			<img src= "LogoIG.png" class= "social">
			<img src= "LogoTwitter.png" class="social">

		</div>
		
	</footer>
</html>

4 Risposte

  • Re: Evento onclick si attiva in automatico

    Il problema sta nel toggle.onclick dove in pratica esegui la funzione anziche passare il riferimento della stessa, dunque dovresti cambiare:

    toggle.onclick = gestoreSaluta();

    in :

    toggle.onclick = gestoreSaluta;

    Comunque a parte questo, il codice html è pieno di errori, ma anche il javascript non scherza.

  • Re: Evento onclick si attiva in automatico

    Grazie mille, proprio non la conoscevo ancora questa differenza, adesso funziona. Ma, in generale, che tipo di errori ci sono nei codici?

  • Re: Evento onclick si attiva in automatico

    Figurati, guarda in generale una struttura html valida dovrebbe essere circa cosi :

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
      
    </body>
    
    </html>

    mentre per quanto riguarda javascript dovresti iniziare a capire i concetti base, l'utilizzo di var è sempre da sconsigliare ( vedi let / const), inoltre l'utilizzo che fai di try..catch non è proprio adatto a quel contesto. ciao

  • Re: Evento onclick si attiva in automatico

    Comunque sto cercando qualcuno che possa darmi lezioni online in privato. Si tratterebbe, penso, di 2/ 3 lezioni al massimo, focalizzate principalmente su JavaScript, ma relative anche a HTML e CSS. Non so se è lecito scriverlo qui, ma non ho trovato una sezione adatta sul forum. 

Devi accedere o registrarti per scrivere nel forum
4 risposte