Javascript Basic Badge Challenge

The work for my Javascript basic badge at P2PU

by mendahu

HTML

<form action="">
      <fieldset>

        <legend>Email subscriptions</legend>

        <p id="subscribepara">
          <label>
<!-- Challenge 1, Step 2: Add onclick event to checkbox to call "toggleEmail" function -->
              <input type="checkbox" name="subscribe" id="subscribe" onclick="toggleEmail()" />
            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>

CSS

#emailpara { /* Challenge 1, Step 1: This CSS hides the "emailpara" on load */
    display: none;
}

JavaScript

// Challenge 1, Step 2: Create a function called "toggleEmail"
function toggleEmail() {
    // alert("You have toggled!"); Challenge 1, Step 2: used to test function
    // document.getElementById("subscribepara").style.backgroundColor = "blue";
    // document.getElementById("emailpara").style.display = "block"; Challenge 1, Step 3: Toggles visibility of the emailpara element
    (document.getElementById("subscribe").checked) ? document.getElementById("emailpara")
}