JSFiddle - React, Tailwind, and code Playground

by jfreiheit

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
</head>
<body>
    <h1 onmouseover="changeColor()">Ăśberschrift</h1>
    <button type="button" onclick="myFunction1()">Klick mich</button>
    <div id="demo1"></div>
    <input id="input1" type="text" placeholder="Gibt etwas ein" onkeyup="myFunction2()"/>
    <div id="demo2"></div>
</body>
</html>

CSS

* {
            padding: 5px;
            margin: 5px;
        }

JavaScript

function myFunction1() {
            document.getElementById("demo1").innerHTML = "Hallo FIW!";
        }
        
        function myFunction2() {
            document.getElementById("demo2").innerHTML = document.getElementById("input1").value;
        }

        function changeColor() {
            var h1arr = document.getElementsByTagName('h1');
            h1arr[0].style.color = "red";
        }