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:

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.

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>

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.