JsDomEj1.html 1.38 KB
Newer Older
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
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>JavaScript Challenges</title>
        <style>
            #emailpara{
                display: none;
            }
        </style>
    </head>
    <body>
    <form action="">
        <fieldset>
            <legend>Email subscriptions</legend>
            <p id="Ross">
                <label>
                    <input type="checkbox"
                           name="subscribe" id="subscribe">
                    Yes! I would like to receive all of your free candy!
                </label>
            </p>
            <p id="emailpara">
                <label>
                    Email Address:
                    <input type="text" name="email" id="email">
                </label>
            </p>
        </fieldset>
    </form>
    <script>
        const checkVisible = document.querySelector('#subscribe');
        const subscribre = document.querySelector('#emailpara');
        subscribre.style.backgroundColor = "blue";
        const toggleVisible = ()=>{
            const div = document.querySelector("#emailpara");
            if (div.style.display !== "block") {
                div.style.display = "block";
            } else {
                alert("Campos Ocultos")
                div.style.display = "none";
            }
        }
        checkVisible.addEventListener('click', toggleVisible);
    </script>
    </body>
</html>