Aiuto sono un neofita di javascript

di Anonimizzato10491 il
16 risposte
/
Anonimizzato10491
Utente anonimizzato
Salve,
ho creato questa funzione in un file .js collegato ad un html dove l'id "button" è un pulsante e l'id "due" è un tag section.

Ho creato questa funzione per nascondere la section ma non va..
var button=document.getElementById("button");
button.click=function nascondi(){
var prova=document.getElementById("due");
prova.style.visibility="hidden";
}
Non capisco dov'è il problema

16 Risposte

  • /
    Anonimizzato4485
    Utente anonimizzato
    Ciao

    Prova con questo
    
var loadFunc = function () {
            var button = document.getElementById("button");
            button.onclick = function nascondi() {
                var prova = document.getElementById("due");
                prova.style.display = "none";
            } 
        }
    loadFunc viene richiamato all'onLoad del body, necessario perchè le variabili javascript vengano istanziate quando il dom è completamente caricato, altrimenti i vari elementi non verrebbero trovati
    <body onload="loadFunc()">
  • /
    Anonimizzato10491
    Utente anonimizzato
    Ma quindi è necessario inserire l'evento nel tag html?Non si può fare senza scrivere niente nei tag?
  • /
    Anonimizzato4485
    Utente anonimizzato
    Puoi usare l'evento document.onload. Io l'ho messo nel tag perchè è una delle possibilità.

    Se posso darti un consiglio inizia a valutare anche l'utilizzo di framework come jQuery o dojo (scelte in base alle esigenze). Datti un occhio alla documentazione. Vedrai che ti semplificano di molto la vita.

    Per esempio il tuo codice in jQuery diventerebbe
    
jQuery(Document).ready(function(){
   jQuery("#button").click(function(){
      jQuery("#due").css("display", "none");
   });
});
    Ovviamente per cose semplici tanto vale utilizzare javascript senza l'ausilio di framework, ma dato che l'utilizzo di javascript oramai è ovunque, sopratutto per quanto riguarda ajax, il mio consiglio è iniziare ad imparare ad utilizzare tali strumenti
  • /
    Anonimizzato10491
    Utente anonimizzato
    Ok grazie per il consiglio. Se volessi scrivere lo stesso codice di prima senza però aggiungere niente ai tag html?
  • /
    Anonimizzato4485
    Utente anonimizzato
    Come ti ho scritto nel post, usanto l'evento document.onload.

    codificato diventa
    
      document.onload = function () {
            var button = document.getElementById("button");
            button.onclick = function nascondi() {
                var prova = document.getElementById("due");
                prova.style.display = "none";
            }
        }
  • /
    Anonimizzato10491
    Utente anonimizzato
    Purtroppo non funziona....
    ho aggiunto il document.onload ed eliminato l'evento dal tag body ma non va
  • /
    Anonimizzato4485
    Utente anonimizzato
    Perdono errore mio

    usa window.onload
  • /
    Anonimizzato10491
    Utente anonimizzato
    Se metto un alert document.onload=alert('ciao'); funziona ma se metto il codice di prima no...
  • /
    Anonimizzato4485
    Utente anonimizzato
    È corretta la cosa... effettivamente con document.onload non funziona il getElementById. Usa window.onload
  • /
    Anonimizzato10491
    Utente anonimizzato
    Nemmeno con window.onload funziona!!
  • /
    Anonimizzato10491
    Utente anonimizzato
    Guarda nemmeno così funziona...ho copiato questo esempio di script da un libro ma non va nemmeno così...
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Prova</title>
        <link rel="stylesheet" href="css.css" type="text/css"> 
        <script  >
            
    var b=document.getElementById(button);
    b.onclick=function(){alert("grazie");};
    
        </script>
        
    </head>
    <body >
        
        <button id="button">Cliccami</button>
        
        <section id="uno">
            <h1>Sezione 1</h1>
        </section>
        
        <section id="due">
            <h1>Sezione 2</h1>
        </section>
    </body>
</html>
  • /
    Anonimizzato4485
    Utente anonimizzato
    I miei test li ho fatti con questo codice:
    
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var button = document.getElementById("button");
            button.onclick = function nascondi() {
                var prova = document.getElementById("due");
                prova.style.display = "none";
            } 
        }
    </script>
</head>
<body>
    <input type="button" id="button" value="nascondi" />

    <section id="due">test</section>
</body>
</html>
    Il codice che hai postato ha lo stesso errore che ti ho fatto notare all'inizio. Il tuo codice javascript viene eseguito prima che la pagina viene caricata. Quindi il tuo codice non riesce a trovare l'elemento html cercato. Apri lo strumento dei sviluppatori del tuo browser (F12 generalmente) e controlla che errori ti da lo script e riferiscimi.
  • /
    Anonimizzato10491
    Utente anonimizzato
    Al mio codice dice che button in not defined.
    Quindi è perchè non ha ancora caricato l'html?
  • /
    Anonimizzato10491
    Utente anonimizzato
    Ho risolto, avevi ragione tu per il fatto che veniva eseguito prima lo script del caricamento dell html5.

    Ho risolto così: <script defer src="newjavascript.js">;
    inserendo "defer" lo script viene eseguito solo dopo che la paina viene caricata tutta.

    Grazie per avermi portato sul giusto ragionamento.
Devi accedere o registrarti per scrivere nel forum
16 risposte