Document Object Model (JS)

Hello everyone,I’m having trouble with the Document Object Model (DOM) in JavaScript.If anyone has any tips or suggestions for how to learn the DOM in JavaScript or if anyone could offer guidance on adding functionality to an HTML page, I would really appreciate it.

Thank you :slight_smile:

What specifically is giving you trouble?

What is the specific functionality you are attempting to add to an HTML page?

Please post the code you have tried and maybe when can guide you to a solution.

I am just learning DOM and was trying to apply basic functionality like when we click on restart button everything should get erase, and I was trying text highlighter / text finder when I will enter that particular word it will highlight.

For us to guide you to a solution, you will need to show us your existing code and explain in detail what is working and what is not.

1 Like

This is the question. I have just created the HTML but don’t know how to proceed for DOM.

  1. Take input numbers in form of string by separating numbers with ,. If there is an invalid number throw and error in id #error. Display the input in #display after clicking the button #add
  2. Implement js filter by writing code for even numbers and odd numbers separately and display them in #display after clicking buttons #even #odd respectively
  3. Implement Join method without any space between elements and display in #display after clicking #join button

Note: Use JSON.stringify for displaying arrays and display strings normally

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Methods</title>
    <style>
        .d-none{
            display: none;
        }
    </style>
</head>
<body>
    <h3>JS Array Properties</h3>
    <div>
        <label for="input">Array</label>
        <input type="text" id="input">
        <button id="add">Add</button>
    </div>
    <div style="margin: 10px 0;">
        <button id="join">Join</button>
        <button id="even">Filter Even</button>
        <button id="odd">Filter Odd</button>
    </div>
    <p id="display"></p>
    <p id="error">Wrong Input!!</p>
    <script >
const input = document.getElementById('input');
const addBtn = document.getElementById('add');
const display = document.getElementById('display');
const even = document.getElementById('even');
const odd = document.getElementById('odd');
const join = document.getElementById('join');



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

You need to add a click event listener for the Add button. When clicked, you need to need to validate the input of numbers (it will actually be a string) entered are numbers. How would you think about approaching to accomplish this first?

Can we use numbers.toString ( ) and then use split( " ") to insert , in between them ?

The input is already a string, so there is no need to use toString, but you could definitely use split to create an array of elements and then iterate through the elements to check if they are all numbers.

1 Like