DEV Community

Kiruthiga S
Kiruthiga S

Posted on

DOM(part-9)

#javascript #dom 
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <button id="btn" onclick="change()">Change Color</button>
    <script>
        var button=document.getElementById("btn");
        console.log(button);

        function change(){
            button.style.backgroundColor="red";
        }
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode 


<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <h1 id="h1">Name</h1>
    <button id="btn-1" onclick="change(event)">Karthick</button>
    <button id="btn-2" onclick="change(event)">Raghu</button>
    <button id="btn-3" onclick="change(event)">Samy</button>

    <script>
          var h1=document.getElementById("h1");
          var btn=document.querySelectorAll("button");
          console.log(btn);

          function change(){
                  h1.innerText=event.target.innerText;
          }
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode 


<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <h1 onclick="delete1(event)">one</h1>
    <h1 onclick="delete1(event)">two</h1>
    <h1 onclick="delete1(event)">three</h1>
    <h1 onclick="delete1(event)">four</h1>
    <h1 onclick="delete1(event)">five</h1>
    <h1 onclick="delete1(event)">six</h1>
    <h1 onclick="delete1(event)">seven</h1>
    <h1 onclick="delete1(event)">eight</h1>
    <h1 onclick="delete1(event)">nine</h1>
    <h1 onclick="delete1(event)">ten</h1>

    <script>
        var h1=document.getElementById("h1");
        function delete1(event){
            event.target.remove();
        }
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)