Skip to content

B
BootcampWebDia6
Switch branch/tag
Find file
Normal viewHistoryPermalink
JsDomEj2.html 1.5 KB
Newer Older
Js Ejercicio 2
7df4616f
 
Cesar Giulano Gonzalez Maqueda committed
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 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Billing</title>
</head>
<body>
    <fieldset>
        <legend>Billing Information</legend>
        <p>
            <label>
                Postal Address:<br>
                <input name="postaladdress" id="postaladdress"></input>
            </label>
        </p>
        <p id="homeaddressdiv">
            Home Address:<br>
            <label>
                <input type="checkbox" name="homepostalcheck" id="homepostalcheck">
                Same as above
            </label>
            <br>
            <input name="homeaddress" id="homeaddress"></input>
        </p>
    </fieldset>
</body>
<script>
    const setHomeAddress = ()=>{
        document.querySelector('#postaladdress')
            .addEventListener('change', (e)=>{
                alert(e.target.value);
            });
        document.querySelector('#homeaddressdiv')
            .addEventListener('click', ()=>{
                const addressInput = document.querySelector('#homeaddress');
                const checkbox = document.querySelector('#homepostalcheck');
                const postalInput = document.querySelector('#postaladdress');
                if(checkbox.checked){
                    addressInput.disabled = true;
                    addressInput.value = postalInput.value;
                }else{
                    addressInput.disabled = false;
                    addressInput.value = "";
                }
            });
    }
    setHomeAddress();
</script>
</html>