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 trialVijayalaxmi vastrad
2,789 Pointsadd 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
16,500 PointsPlease format your code properly so we can read it easier.
Clear reading makes for clear answers.
KRIS NIKOLAISEN
54,971 PointsSome 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
2,789 PointsThank you so much for your valuable time, I missed div tag thats what cause problem.....
Vijayalaxmi vastrad
2,789 PointsAgain 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
2,789 Pointsand 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'; }); }