javascript/challenge1.html at master · eshwer/javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<!-- Step 1: Hiding the email fields by default
Add some plain old CSS style so that the "emailfield" paragraph isn't displayed when the page first loads (using the CSS 'display' property). Test to make sure this works.

Step 2: Adding a function template
Create a new function called toggleEmail() that simply displays an alert, ie. window.alert("Yep, my function is being called");
Add an event so that when the checkbox is clicked your function is called and test that it works!

Step 3: Display the email fields
Now we'll replace that alert() code so that our function actually does something useful! Using JavaScript, make the emailfield paragraph appear when the checkbox is clicked.

Step 4: Making the email field toggle
When you test your form at the moment, you'll notice that you can click on the checkbox and the email field displays, but when you un-check the checkbox the extra paragraph doesn't hide itself again!  Used the "checked" property to test whether a checkbox was checked.  Then use an if statement to toggle the emailfield appear and disappear as appropriate.
-->
  <head>
    <title>JavaScript Challenges</title>
    <style>
      #emailfield {
        display: none;
      }
    </style>

    <script type="text/javascript">
      function toggleEmail() {
        if(document.getElementById("subscribe").checked==true){
          document.getElementById("emailfield").style.display="initial";
        }
        else{
          document.getElementById("emailfield").style.display="none";
        }
      }
    </script>
  </head>
  <body>
    <form action="">
      <fieldset>

        <legend>Email subscriptions</legend>

        <p id="check">
          <label>
            <input type="checkbox" name="subscribe" id="subscribe" onchange="toggleEmail()">
            Yes! I would like to receive all of your free candy!
          </label>
        </p>

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

      </fieldset>
    </form>
    <a href="/challenge2.html"></a>
  </body>
</html>