javascript/challenge2.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
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<!-- Step 1: Adding a function template
Add a JavaScript function to your page called setHomeAddress() 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 2: Getting the Postal Address
Before we can copy the address over, we need to know how to read it using JavaScript.  Use the .value property of the textarea. It contains the text typed into a form field. In your setHomeAddress() function, write a line of code to display the Postal Address textarea's value in an alert box. W3Schools Textarea value page has a useful example close to what you'll write.

Step 3: Setting the value for the Home Address
Now that we know how to find the value of any element in our document, the trick is to set our "homeaddress" element's value equal to the "postaladdress" element's value. To set the homeaddress we could do something like:
 document.getElementById("homeaddress").value = "Hi there";
Test and see if it works! You should find that when you click on your checkbox, the homeaddress is set to the text "Hi there".
Now see if you can modify the above line so that instead of placing "Hi there" in the box, it puts the value of the postaladdress field.

Step 4: Disabling the Home Address field
Use the W3Schools page about the HTML DOM TextArea object and see if you can find a property that will allow us to disable our textarea.
Try setting this property for your "homeaddress" element in your setHomeAddress() function. Make sure you test it out!

Step 5: Toggling the Home Address
Now when you test your form, you'll notice that when you un-check your checkbox, the home address field isn't enabled.
Add an if-else statement to your setHomeAddress() function so that when the checkbox is un-checked the Home address field is reset to empty and enabled again.-->
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Challenge Two</title>

    <script type="text/javascript">
    /*    Your code here  */
    function setHomeAddress() {
      // alert(document.getElementById("postaladdress").value)
      if (document.getElementById("homepostalcheck").checked == true) {
        document.getElementById("homeaddress").disabled == true;
        document.getElementById("homeaddress").value == document.getElementById("postaladdress").value;
      }
      else {
        document.getElementById("homeaddress").disabled == false;
        document.getElementById("homeaddress").value == "";
      }
    }
    </script>
</head>
<body>
	<fieldset>

  <legend>Billing Information</legend>

  <p>
    <label>
      Postal Address:<br>
    <textarea name="postaladdress" id="postaladdress"></textarea>
    </label>
  </p>

  <p>
    Home Address:<br>
    <label>
       <input type="checkbox" name="homepostalcheck" onclick = "setHomeAddress()" id="homepostalcheck">
       Same as above
    </label>
    <br>
    <textarea name="homeaddress" id="homeaddress"></textarea>
  </p>

</fieldset>

    <a href="challenge3.html">Challenge 3</a>
</body>
</html>