DOM manipulation using events

Functions

Objects

Array Properties and Methods

DOM

Built-in Objects

Using Events in JavaScript

Handling Input and Output

Ajax and JSON

Below are some examples of DOM manipulation using events.

1. Create a paragraph element with some text and change the font size by attaching an event handler to a button using addEventListener.

<html>
  <head></head>
  <body>
    <p id="para">This is a paragraph</p>
    <button id="btn">Change font size</button>
    <script>
      var para = document.getElementById('para');
      var btn = document.getElementById('btn');

      btn.addEventListener('click', changeFont);

      function changeFont() {
        para.style.fontSize = '24px';
      }
    </script>
  </body>
</html>

2. Create a div element of preferred height and width and change its background color using three different buttons.

<html>
  <head>
    <style>
      #d1{               
        width:200px;
        height:100px;
        border: 1px solid;     
      }
    </style>
  </head>
  <body>
    <div id="d1">
    </div>
    <button onclick="colorit('red')">Red</button>
    <button onclick="colorit('green')">Green</button>
    <button onclick="colorit('blue')">Blue</button>
    <script>
      function colorit(c){
        var x = document.getElementById("d1");
        x.style.backgroundColor = c;
      }
    </script>
  </body>
</html>

3. Take an array of strings and display the first string in a h1 tag. When clicked on the ‘next’ button, it should be able to cycle through all the strings and display it in the h1 tag.

<html>
  <head></head>
  <body>
    <h1 id="d1"></h1>
    <button onclick="nextitem()">Show Next</button>
    <script>
      var ar = ['kiran', 'sam', 'ramu', 'vijay'];
      var i = 0;
      var d1 = document.getElementById('d1');
      d1.innerHTML = ar[i];
      function nextitem() {
        if (i < 3) {
          i++;
          d1.innerHTML = ar[i];
        } else {
          i = 0;
          d1.innerHTML = ar[i];
        }
      }
    </script>
  </body>
</html>

4. Take an image url string in a variable. Set the src attribute of an image with that url on clicking a button.

<html>
  <head></head>
  <body>
    <button onclick="setSrc()">Show image</button><br>
    <img id="image" src="">
    <script>
      var imgUrl = "https://www.shutterstock.com/image-vector/peace-symbol-made-common-metal-600w-2161215447.jpg";
      var image = document.getElementById('image');
      function setSrc(){
        image.src = imgUrl;
        image.style.height = '100px';
      }
    </script>
  </body>
</html>

Show image

5. Create a calculator that can take two inputs and perform addition, subtraction, multiplication and division of the two numbers.

<html>
  <head></head>
  <body>
    Input 1: <input type="text" id="num1" /><br />
    Input 2: <input type="text" id="num2" /><br /><br />
    <button id="addition">Add</button>
    <button id="subtraction">Sub</button>
    <button id="multiplication">Mul</button>
    <button id="division">Div</button>
    <br /><br />
    Output: <input type="text" id="res" />
    <script>
      var addBtn = document.getElementById('addition');
      var subBtn = document.getElementById('subtraction');
      var multiBtn = document.getElementById('multiplication');
      var divBtn = document.getElementById('division');

      addBtn.addEventListener('click', function () {
        var val1 = +document.getElementById('num1').value;
        var val2 = +document.getElementById('num2').value;
        var result = val1 + val2;
        document.getElementById('res').value = result;
      });

      subBtn.addEventListener('click', function () {
        var val1 = +document.getElementById('num1').value;
        var val2 = +document.getElementById('num2').value;
        var result = val1 - val2;
        document.getElementById('res').value = result;
      });

      multiBtn.addEventListener('click', function () {
        var val1 = +document.getElementById('num1').value;
        var val2 = +document.getElementById('num2').value;
        var result = val1 * val2;
        document.getElementById('res').value = result;
      });

      divBtn.addEventListener('click', function () {
        var val1 = +document.getElementById('num1').value;
        var val2 = +document.getElementById('num2').value;
        var result = val1 / val2;
        document.getElementById('res').value = result;
      });
    </script>
  </body>
</html>

6. Create two buttons which can open and close a URL window using the window.open()/close() methods.

<html>
  <head></head>
  <body>
    <button onclick="openUrl()">Open Wikipedia</button>
    <button onclick="closeUrl()">Close Wikipedia</button>
    <script>
      var wref;
      function openUrl() {
        wref = window.open(
          'https://en.wikipedia.org',
          'wiki',
          '300px',
          '300px'
        );
      }
      function closeUrl() {
        wref.close();
      }
    </script>
  </body>
</html>

7. Create a toggle button to show or hide a paragraph text.