2010-12-30 17 views
0

LIVE CODE: http://jsfiddle.net/vy4nY/Was mache ich falsch?

Ich folge this challenge, aber ich habe einige Probleme. Ich versuche, das Feld "E-Mail-Adresse" nur anzuzeigen, wenn das Kontrollkästchen aktiviert ist. Was habe ich falsch gemacht?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
    <head> 
    <title>JavaScript Challenges</title> 
    <style type="text/css"> 
    #emailpara {visibility:hidden;} 
    </style> 
    </head> 
    <body> 
    <form action=""> 
     <fieldset> 

     <legend>Email subscriptions</legend> 

     <p id="subscribepara"> 
      <label> 
      <input type="checkbox" name="subscribe" id="subscribe"> 
      Yes! I would like to receive the occasional newsletter via email. 
      </label> 
     </p> 

     <p id="emailpara"> 
      <label> 
      Email Address: 
      <input type="text" name="email" id="email"> 
      </label> 
     </p> 

     </fieldset> 
    </form> 
     <script type="text/javascript"> 
document.getElementById('subscribe').onclick = (document.getElementById('subscribe').checked ? (document.getElementById('emailpara').style.visibility = 'visible') : (document.getElementById('emailpara').style.visibility = 'hidden')); 
     </script> 
    </body> 
</html> 

Antwort

3

Der Onclick-Handler eine Funktion sein sollte. Verwenden Sie:

document.getElementById('subscribe').onclick = function() { 
    document.getElementById('emailpara').style.visibility = this.checked ? 'visible' : 'hidden'; 
} 
+0

dang! 3 Sekunden schneller und du hattest Zeit den Code zu verbessern .. :-) –

+1

Heh, ich kenne das Gefühl ... sie sollten einen Summer haben, wie in diesen Gameshows :) –

1

Sie müssen es als Funktion haben:

document.getElementById('subscribe').onclick = function() { 
      document.getElementById('subscribe').checked ? document.getElementById('emailpara').style.visibility = 'visible' : document.getElementById('emailpara').style.visibility = 'hidden'; 
      } 

Aktualisiert jsFiddle: http://jsfiddle.net/yahavbr/vy4nY/1/