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

Vijayalaxmi vastrad
Vijayalaxmi vastrad
2,781 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,468 Points

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

Clear reading makes for clear answers.

KRIS NIKOLAISEN
PRO
KRIS NIKOLAISEN
Pro Student 51,836 Points

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,781 Points

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

Vijayalaxmi vastrad
Vijayalaxmi vastrad
2,781 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,781 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'; }); }