Week 10 - Template - Web Editor

Web Editor - Week 10 - Template

<!DOCTYPE html>
<html>
    <head>

</head>
    <body>
        <h1>
            Three ways to use event listeners
        </h1>
        <p onclick="function1()">
            Paragraph 1
        </p>
        <p>
            Paragraph 2
        </p>
        <p>
            Paragraph 3
        </p>

<label>Enter something: </label>
        <input type='text' id='myInputID' />
        <button id='btn'>
            Submit
        </button>
        <script>
            //Paragraph 1
            function function1() {
                var para1 = document.querySelectorAll("p")[0];
                para1.innerText = "Clicked";
                para1.style.backgroundColor = "blue";
                para1.style.fontFamily = "Helvetica";
            }
            
            //Paragraph 2
            var para2 = document.getElementsByTagName("p")[1];
            para2.addEventListener('click', function2);
            function function2() {
                para2.innerText = "Clicked";
                para2.style.fontSize = "30px";
            }
            
            //Paragraph 3
            var para3 = document.querySelectorAll('p')[2];
            para3.addEventListener('click', function(){
                para3.innerHTML = "<p><a>Clicked</a></p>";
                var anchor = para3.querySelector('a');
                anchor.setAttribute('href', 'https://highered.oyoclass.com/mine');
            });
            
            //Input
            var btnVar = document.getElementById('btn');
            btnVar.addEventListener('click', inputFunction);
            function inputFunction(){
                var myInput = document.getElementById("myInputID");                
                console.log(myInput.value);
            }

</script>
    </body>
</html>

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

Page Live Preview

Open page in New Window

Console

Created on 2021-04-26T16:10:31Z

Author: Mentor Doug