2013-06-01 13 views
5

Sto provando a modificare il innerHTML di un particolare div, ma non riesco a cancellare il contenuto di quello div. Ho il seguente codice:Impossibile modificare innerHTML di un div

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    </head> 
    <body> 
     <script type="text/javascript"> 
      function reset() { 
       document.getElementById("results").innerHTML = ""; 
      } 
      function check() { 
       document.getElementById("results").innerHTML = "foo"; 
      } 
     </script> 
     <form name="form1"> 
      <input type="button" value="Check" onclick="check();"> 
      <input type="button" value="Reset" onclick="reset();"> 
     </form> 
     <div id="results"></div> 
    </body> 
</html> 

Qualcuno può indicare dove sto sbagliando?

Grazie in anticipo.

+0

State ottenendo eventuali errori javascript nella vostra console? –

+0

Si prega di abituarsi a usare '$ ('div # id_name')' invece di 'getElementById'. L'unica cosa che sarà richiesta è aggiungere il plugin jQeury. ma ti aiuterà molto in futuro quando userai di più Js. – MaNKuR

+3

@MaNKuR È perfettamente accettabile non importare jQuery in tutti i tuoi siti. Dopotutto non è così leggero. –

risposta

8

Questo perché c'è già una funzione reset nel modulo e questa funzione viene chiamata al posto del proprio. Cambia quel nome e funzionerà.

<script type="text/javascript"> 
     function r2() { 
      document.getElementById("results").innerHTML = ""; 
     } 
     function check() { 
      document.getElementById("results").innerHTML = "foo"; 
     } 
    </script> 
    <form name="form1"> 
     <input type="button" value="Check" onclick="check();"> 
     <input type="button" value="Reset" onclick="r2();"> 
    </form> 
    <div id="results"></div> 

Demonstration

Questo tipo di problema è un ulteriore motivo per evitare chiamate di funzione in linea. Un modo preferito sarebbe

<form name="form1"> 
     <input type="button" value="Check" id=check> 
     <input type="button" value="Reset" id=reset> 
</form> 
<div id="results"></div> 
<script type="text/javascript"> 
     document.getElementById("reset").onclick = function() { 
      document.getElementById("results").innerHTML = ""; 
     } 
     document.getElementById("check").onclick = function(){ 
      document.getElementById("results").innerHTML = "foo"; 
     } 
</script> 
+1

È come 'con (this.form) con (this)/* metodo onclick * /' –

2

Dare

onclick="window.reset();" 
Problemi correlati