CODEWITHSUNDEEP
javascript
Samee
Samee

Reputation: 67

how to get dom element , whitch created in another function

I don't know it on I describe the Title correctly, however I have the following problem, in a Function that is started with the click on the button, results is generated in a Table, in this Table I want to give a an ID ( in table is the id "clickme" below) and after that, I created a new variable that is connected to this above id, this variable I gave him event, when you click on this area (the created tabel) should start a new event,m however it does not work, I get the error message(

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') ) do you have an idia of this?

            const select = document.querySelector('#select')
            const show = document.querySelector('#show')
            const table = document.querySelector('#table')
            const btn = document.querySelector('#send')
            const arr = [{
                name: 'Mark',
                alter: 22,
            }, {
                name: 'Emil',
                alter: 33,
            }, {
                name: 'Sohab',
                alter: 64,
            }, ]
    
            btn.addEventListener('click', () => {
                table.innerHTML = ''
                const res = arr.forEach((info) => {
                    table.innerHTML += `
                    <tr>
                        <td id="clickme" class="bg bg-info">${info.name}</td>
                        <td>${info.alter}</td>
                    </tr>
    
                    `
                })
            })
    
            clickME = document.querySelector('#clickme')
            clickME.addEventListener('click', () => {
                alert('TEST clickme')
            })
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
        
        <div class="container">
    
            <div id="show"></div>
            <table class="table table-bordered table-striped mt-2 mb-2">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Alter</th>
                    </tr>
                </thead>
                <tbody id="table"></tbody>
            </table>
    
            <button class="btn btn-danger" id="send">Add</button>
        </div>

Upvotes: 1

Views: 76

Answers (1)

s.kuznetsov
s.kuznetsov

Reputation: 15213

The problem with your code is that the targeted element clickme is dynamical, so the javascript does not see this element during DOM rendering. In my example I used delegation.

And... you have another error. You are using id #clickme for many, but the id should be unique, so I redid to class:

<td class="clickme bg bg-info">${info.name}</td>

Demo:

    <!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>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
</head>

<body>
    <div class="container">

        <div id="show"></div>
        <table class="table table-bordered table-striped mt-2 mb-2">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Alter</th>
                </tr>
            </thead>
            <tbody id="table"></tbody>
        </table>

        <button class="btn btn-danger" id="send">Add</button>
    </div>

    <script>
        const select = document.querySelector('#select')
        const show = document.querySelector('#show')
        const table = document.querySelector('#table')
        const btn = document.querySelector('#send')
        const arr = [{
            name: 'Mark',
            alter: 22,
        }, {
            name: 'Emil',
            alter: 33,
        }, {
            name: 'Sohab',
            alter: 64,
        }, ]

        btn.addEventListener('click', () => {
            table.innerHTML = ''
            const res = arr.forEach((info) => {
                table.innerHTML += `
                <tr>
                    <td class="clickme bg bg-info">${info.name}</td>
                    <td>${info.alter}</td>
                </tr>

                `
            })
        })

        document.addEventListener('click', (event) => {
         if (event.target.closest('.clickme')) {
          alert('TEST clickme')
         }
        });
    </script>
</body>

</html>

Upvotes: 1

Related Questions