Week 11 - Cookie Clicker Concepts (template)

Web Editor - Week 11 - Cookie Clicker Concepts (template)

<!DOCTYPE html>
<html>
    <head>

</head>
    <body style="height:1000px">
        <h1>
            Week 11
        </h1>
        <p>
            
        </p>
        <div id="div1" onclick="function1()">
            Sample Text 1
        </div>
        <hr>
        <div id="div2">
            Sample Text 2
        </div>
        <hr>
        <div id="div3" onclick="function3(this)">
            This text will turn green, then 3 seconds later, blue.
        </div>

<script>                        
            function function1(){
                var div1 = document.querySelector("#div1");
                div1.innerText = "Changed \n content";
                div1.style.color = "#ff0000";
            }

var div2 = document.querySelector("#div2");  
            div2.addEventListener("click", function(){
                div2.innerHTML = "<ul><li>Changed content</li></ul>";
            });            
            
            /*Iterating through a list of elements*/
            var divs = document.querySelectorAll("div");
            for(var i = 0; i < divs.length; i++){
                divs[i].style.color = "#a4534a"; //set to reddish color
            }
            
        </script>

<script>
            function function3(elem) {
                elem.style.color = "#00ff00";
                setTimeout(blueFunction, 3000); //1000 milliseconds
            }
            
            function blueFunction(){
                var div3 = document.querySelector("#div3");
                div3.style.color = "#0000ff";
            }
        </script>
    </body>
</html>

WebEditor - an OYOclass application, own your own class today.

Page Live Preview

Open page in New Window

Console

Created on 2021-05-03T16:16:24Z

Author: Mentor Doug