W3Context Online Editor v1.1

<!DOCTYPE html>
<html>
<head>
    <title>HTML onclick Attribute Example</title>
    <meta charset="utf-8" />
    <style>
        input[type="button"] {
            width: 150px;
            height: 50px;
            background-color: #2e3e4e;
            font-size: 14pt;
            color: white;
            border-radius: 5px;
            margin-left: 140px;
        }

input[type="button"]:hover {
            background-color: #1d2d3d;
            color: white;
        }

input[type="text"],
        input[type="email"] {
            width: 230px;
            height: 30px;
            background-color: #efffff;
            font-size: 14pt;
            color: #000;
            border-radius: 5px;
            margin: 5px;
        }

input[type="text"]:hover,
        input[type="email"]:hover {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <h2>HTML onclick Attribute Example</h2>
    <p>This is for example purposes only, this example will not allow you to submit values.</p>
    <p id="mypara" onclick="myFunction()">Click on this paragraph to see the change.</p>
    <form action="#">
        Name: <input type="text" name="name" id="name"><br>
        Email: <input type="email" name="email" id="email"><br>
        <input type="button" value="Submit" id="button">
    </form>
    <script>
        function myFunction() {
            document.querySelector("#name").style.backgroundColor = "#d5d5d5";
            document.querySelector("#email").style.backgroundColor = "skyblue";
            document.querySelector("#button").value = "Click me";
            document.querySelector("#mypara").innerHTML = "A function is triggered when the onclick event occurs on an element.";
        }
        function myFunction2() {
            document.querySelector("#name").style.backgroundColor = "skyblue";
            document.querySelector("#email").style.backgroundColor = "#d5d5d5";
            document.querySelector("#button").value = "Submit";
            document.querySelector("#mypara").innerHTML = "<h2>Click on this paragraph to see the change.</h2>";
        }
        document.querySelector("#button").onclick = function () { myFunction2() };
    </script>
</body>
</html>