Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Getting and Setting Text with textContent and innerHTML

Vijayalaxmi vastrad
Vijayalaxmi vastrad
2,789 Points

add event listener not working, can anyone tell me whats wrong in my code pls

I have 3 popups on click <div id="bg-support-popUp"> <div id="support-popUp"> <h1 class="support-head-text">Communication<br>Error</h1> <img class="close-btn" src="./assets/images/x.png" alt="x"> <img class="support-img" src="./assets/images/help.png" alt="help"> <img class="personaggio-img" src="./assets/images/personaggio.png" alt=""> <h1 class="bottom-headText"> Do you need <br> assistance?</h1> <p>Technnical support <br> toll-free number <br> <span>800-801-213</span> </p> </div> </div> <div id="bg-ProductCode-popUp"> <div id="ProductCode-popUp"> <img class="close-btn2" src="./assets/images/x.png" alt="x"> <div id="language-btns"> <h1 class="head-text">Change language</h1> </div> </div> <div id="bg-language-popUp"> <div id="language-popUp"> <img class="close-btn2" src="./assets/images/x.png" alt="x"> <div id="language-btns"> <h1 class="head-text">Change language</h1> <button class="language">Italiano</button> <button class="language">English</button> <button class="language">Francais</button> <button class="language">Espanol</button> </div>

        </div>
    </div>

//Footer help Button onclick document.querySelector('#help-btn').addEventListener('click', function() { document.getElementById('bg-support-popUp').style.display = 'block'; }); document.querySelector('.close-btn').addEventListener('click', function() { document.getElementById('bg-support-popUp').style.display = 'none'; });

// ***************************** //

//Footer  Product Code button onclick
document.querySelector('#productCode-btn').addEventListener('click', function() {
    document.getElementById('bg-ProductCode-popUp').style.display = 'block';
});
document.querySelector('.close-btn').addEventListener('click', function () {
    document.getElementById('bg-ProductCode-popUp').style.display = 'none';
});

    // ***************************** //

//Footer Language Button onclick
document.querySelector('#language-icon').addEventListener('click', function() {
    document.getElementById('bg-language-popUp').style.display = 'block';
});
document.querySelector('.close-btn2').addEventListener('click', function() {
    document.getElementById('bg-language-popUp').style.display = 'none';
});

5 Answers

Cory Harkins
Cory Harkins
16,500 Points

Please format your code properly so we can read it easier.

Clear reading makes for clear answers.

Some things to look at in your html:

  • You have no reference to your script (that you posted)
  • You have used id="language-btns" more than once
  • You have an unclosed div
  • You have a class for "close-btn" and two for "close-btn2". Maybe you meant ids for close-btn1, close-btn2, close-btn3,
  • You should run your html through a validator

Some thing to look at in your javascript:

  • You are selecting ids that don't exist (#help-btn, #productCode-btn, #language-icon)
  • You are adding two click event listeners using .close-btn
  • You are using .close-btn2 to add an event listener with querySelector of which there are two. querySelector will return the first one.
Vijayalaxmi vastrad
Vijayalaxmi vastrad
2,789 Points

Thank you so much for your valuable time, I missed div tag thats what cause problem.....

Vijayalaxmi vastrad
Vijayalaxmi vastrad
2,789 Points

Again two buttons not working, i have checked code many times. i have checked it validator i have find any errors

<div class="settings"> <div class="settings-item" id="help-btn"><img src="./assets/images/-e-HELP.png" alt=""></div> <div class="settings-item" id="productCode-btn"><img src="./assets/images/icona-tastierino.png" alt=""> </div> <div class="settings-item" id="language-icon"> <img class="flag" src="./assets/images/flagesp.png" alt=""> <img class="flag" src="./assets/images/flagfr.png" alt=""> <img class="flag" src="./assets/images/flagit.png" alt=""> <img class="flag" src="./assets/images/flaggb.png" alt=""> </div> </div> </div>

<div id="bg-support-popUp">
    <div id="support-popUp">
        <h1 class="support-head-text">Communication<br>Error</h1>
        <img class="close-btn" src="./assets/images/x.png" alt="x">
        <img class="support-img" src="./assets/images/help.png" alt="help">
        <img class="personaggio-img" src="./assets/images/personaggio.png" alt="">
        <h1 class="bottom-headText"> Do you need <br> assistance?</h1>
        <p>Technnical support <br> toll-free number <br>
            <span>800-801-213</span>
        </p>
    </div>
</div>
<!--Product code button -->
<div id="bg-ProductCode-popUp">
    <div id="ProductCode-popUp">
        <img class="close-btn1" src="./assets/images/x.png" alt="x">
        <h1 class="head-text">Enter the code <br> of your product</h1>
        <div class="NumbarPad">
            <div id="output"></div>
            <div class="row">
                <div class="digit" id="one">1</div>
                <div class="digit" id="two">2</div>
                <div class="digit" id="three">3</div>
            </div>
            <div class="row">
                <div class="digit" id="four">4</div>
                <div class="digit" id="five">5</div>
                <div class="digit" id="Six">6</div>
            </div>
            <div class="row">
                <div class="digit" id="seven">7</div>
                <div class="digit" id="eight">8</div>
                <div class="digit" id="nine">9</div>
            </div>
            <div class="row">
                <div class="digit" id="a">A</div>
                <div class="digit" id="zero">0</div>
                <div class="digit" id="b">B</div>
            </div>
        </div>
    </div>
</div>
<!-- MultiLanguage Selection -->
<div id="bg-language-popUp">
    <div id="language-popUp">
        <img class="close-btn2" src="./assets/images/x.png" alt="x">
        <div id="language-btns">
            <h1 class="head-text">Change language</h1>
            <button class="language">Italiano</button>
            <button class="language">English</button>
            <button class="language">Francais</button>
            <button class="language">Espanol</button>
        </div>
    </div>
</div>
Vijayalaxmi vastrad
Vijayalaxmi vastrad
2,789 Points

and javacsript part is

//Footer help Button onclick window.onload = function(){ document.getElementById('help-btn').addEventListener('click',function(){ document.querySelector('#bg-support-popUp').style.display='block'; }); document.querySelector('.close-btn').addEventListener('click',function(){ document.querySelector('#bg-support-popUp').style.display='none'; }); } //Footer Product Code button onclick window.onload = function () { document.querySelector('#productCode-btn').addEventListener('click', function () { document.getElementById('bg-ProductCode-popUp').style.display ='block'; }); document.querySelector('.close-btn1').addEventListener('click', function () { document.getElementById('bg-ProductCode-popUp').style.display = 'none'; }); } //Footer Language Button onclick window.onload = function () { document.querySelector('#language-icon').addEventListener('click', function () { document.getElementById('bg-language-popUp').style.display = 'block'; }); document.querySelector('.close-btn2').addEventListener('click', function () { document.getElementById('bg-language-popUp').style.display = 'none'; }); }