Setting up a basic javascript script on an html page

Question

I am trying to display a basic set and allow a user to add elements to the set. Here is what I have thus far:

<head>
    <script>
    class _Set extends Set {
        add(...args) { 
            for (const x of args) {
                this.add(x)
            }
            return this;
        }
    }
    const s = new Set();
    const button = document.querySelector('button');
    const text = document.getElementById('theText');
    button.addEventListener('click', () => {
        let values, rawValue = document.getElementById('theValue');
        if (rawValue.includes(',')) {
            values = rawValue.split(',').map(x => x.trim());
        } else {
            values = [rawValue,];
        }
        for (value of values) {
            s.add(value);
        }
        text.textContent = `Set(${s.size}) = ${Array.from(s)}`;
    });
    </script>
</head>

<body>
    <input type="text" id="theText" placeholder="Enter in a value"/>
    <input type="button" value="submit"/>
    Your set now contains: <span id="theSet">{}</span>
</body>

I suppose this error is occurring because the javascript tries running before the html dom has been rendered and is ready for scripting. What am I doing wrong here and what would be the correct way to do something such as the above?

@David542 Please add the error message itself to the question as well, so everyone is on the same page even without running the snippet. Also that makes the question searchable. — Bergi, May 04 '22 at 22:24

score 0 · Answer 1 · answered May 04 '22 at 21:50

You should put the script before the closing body tag:

<head>
    
</head>

<body>
    <input type="text" id="theText" placeholder="Enter in a value"/>
    <input type="button" value="submit"/>
    Your set now contains: <span id="theSet">{}</span>

    <script>
    class _Set extends Set {
        add(...args) { 
            for (const x of args) {
                this.add(x)
            }
            return this;
        }
    }
    const s = new Set();
    const button = document.querySelector('button');
    const text = document.getElementById('theSet');
    button.addEventListener('click', () => {
        let values, rawValue = document.getElementById('theValue');
        if (rawValue.includes(',')) {
            values = rawValue.split(',').map(x => x.trim());
        } else {
            values = [rawValue,];
        }
        for (value of values) {
            s.add(value);
        }
        text.textContent = `Set(${s.size}) = ${Array.from(s)}`;
    });
    </script>
</body>

score 0 · Answer 2 · answered May 04 '22 at 21:52

There are two mistakes here.

First, you need to place your script at the end of the body, otherwise you will try to get elements not yet defined.

Second, the return of document.querySelector('button') is null. querySelector expects a valid CSS selector, but button is not. You could use input[type=button] as a valid selector in this case.

<body>
    <input type="text" id="theText" placeholder="Enter in a value"/>
    <input class="button" type="button" value="submit"/>
    Your set now contains: <span id="theSet">{}</span>

    <script>
    class _Set extends Set {
        add(...args) { 
            for (const x of args) {
                this.add(x)
            }
            return this;
        }
    }
    const s = new Set();
    const button = document.querySelector('input[type=button]');
    const text = document.getElementById('theSet');
    button.addEventListener('click', () => {
        let values, rawValue = document.getElementById('theValue');
        if (rawValue.contains(',')) {
            values = rawValue.split(',').map(x => x.strip());
        } else {
            values = [rawValue,];
        }
        for (value of values) {
            s.add(value);
        }
        text.textContent = `Set(${s.size}) = ${Array.from(s)}`;
    });
    </script>
</body>

thanks, I get an error when running though -- I think related to my usage of `contains` and `strip` rather than `includes` and `trim`. I added my own answer that works btw. — David542, May 04 '22 at 22:05

score -1 · Answer 3 · answered May 04 '22 at 22:05

There are a lot of things here, but let's go through them, with the comments in-line

<body>
    <input type="text" id="theText" placeholder="Enter in a value"/>
    <input type="button" value="submit"/>
    <div>Your set now contains: <span id="theSet">{}</span></div>
    
    <script>
        // move the script to execute within the body of the 
        // html, after the needed nodes have loaded
        class _Set extends Set {
            add(...args) { 
                for (const x of args) {
                    super.add(x)
                }
                return this;
            }
            // moving the helper function to parse strings 
            // into a static method
            static getArrayFromInput(text) {
                let arr = [];
                if (text.includes(',')) {
                    arr = text.split(',').map(x => x.trim());
                } else {
                    arr = [text,];
                }
                return arr;
            }
        }
        const s = new _Set();
        // css selector needs to be on input[type=button]
        // and not input[type="button"] or button
        const button = document.querySelector('input[type=button]');
        const text = document.getElementById('theSet');

        // now we can add the event listener, 
        // since the button node has been fetched
        button.addEventListener('click', () => {
            // get the input[type=text] Node
            const rawValueNode = document.getElementById('theText');
            // pass the value contained in the input 
            // to the function the get the vallues as arr
            const arr = _Set.getArrayFromInput(rawValueNode.value);
            // add the values into the set
            s.add(...arr);
            // finally, format how we want to response to look in the html
            text.textContent = `Set(${s.size}) = ${Array.from(s)}`;
        });
    </script>
</body>

Setting up a basic javascript script on an html page

3 Answers3