We Keep Coding

How to check if element ID is in a document? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
How to find if element with specific id exists or not
(8 answers)
Closed 5 years ago.
My site serves dynamic contents so the header and footer remains the same. In the footer is my JS script that has a few document.getElementById('ids').addEventListener('click',function(e).
How can I prevent the JS error TypeError: document.getElementById(...) is null when the content with the element ID was not yet served? See sample JS code below:
<script>
// DN_1, 1st page Switch On/Off
document.getElementById('dn_1_yes-no').addEventListener('click',function(e){
var attrChk = document.getElementById('dn_1_yes-no');
if( this.checked){
document.getElementById('external_dn_1').style.display='block';
}else{
document.getElementById('external_dn_1').style.display='none';
}
});
// DN_2, 2nd page Switch On/Off
document.getElementById('dn_2_yes-no').addEventListener('click',function(e){
var attrChk = document.getElementById('dn_2_yes-no');
if( this.checked){
document.getElementById('external_dn_2').style.display='block';
}else{
document.getElementById('external_dn_2').style.display='none';
}
});
// more.....
</script>

This works!
<script>
var dn1Ele = document.getElementById('dn_1_yes-no');
var dn2Ele = document.getElementById('dn_2_yes-no');
if(dn1Ele != null) {
// DN_1 Switch On/Off
document.getElementById('dn_1_yes-no').addEventListener('click',function(e){
var attrChk = document.getElementById('dn_1_yes-no');
if( this.checked){
document.getElementById('external_dn_1').style.display='block';
}else{
document.getElementById('external_dn_1').style.display='none';
}
});
}
if(dn2Ele != null) {
// DN_2 Switch On/Off
document.getElementById('dn_2_yes-no').addEventListener('click',function(e){
var attrChk = document.getElementById('dn_2_yes-no');
if( this.checked){
document.getElementById('external_dn_2').style.display='block';
}else{
document.getElementById('external_dn_2').style.display='none';
}
});
}
// more.....
</script>

Keypress check not working [duplicate]

This question already has an answer here:
Click event not working for dynamically added Li->span->id
(1 answer)
Closed 6 years ago.
If i add the search bar right away, it works, the console returns the value of the search field every time i press enter, but if i add the search bar after the image was clicked it doesn't work.
http://codepen.io/Nadaga/pen/QEVaGA
$('#glass-image').on('click', function() {
$('#main').html('<input id="search-field" type="text" placeholder="Search"></input>');
})
$('#search-field').keypress(function (e) {
if (e.which == 13) {
console.log($('#search-field').val());
return false;
}
});

Since, the search-field is dynamically created, It has to be added like this (on the $document),
$(document).on('keypress', '#search-field' ,function(e) {
if (e.which == 13) {
console.log($('#search-field').val());
return false;
}
});

$('#glass-image').on('click', function() {
$('#main').html('<input id="search-field" type="text" placeholder="Search"></input>');
$('#search-field').keypress(function(e) {
if (e.which == 13) {
console.log($('#search-field').val());
return false;
}
});
})
Click event only works if the element already exist in html code. So the click event doesn't fire.It won't consider the new element which is created dynamically after the page loaded. Dynamic elements are created with the help of javascript or jquery(not in html).
source: https://stackoverflow.com/a/29674985/1848140

Key press dont work on dynamicly created element [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
i am trying to add a new span of tag inside tags div.
my problem is that the code under span[id="newtag"] doesnt
work. how can i make this code work?
$(document).ready(function () {
$('#tags').on("click", function () {
$(this).append('<span id="newtag" contenteditable="true"></span>');
$(this).children(":last").focus();
});
$('span[id="newtag"]').keypress(function (k) {
if (k.which == 13 || k.which == 32) {
$(this).append('gfskjsokdfla');
}
});
});

Use event delegation for created dymanically dom elements.
$('#tags').on('keypress', 'span[id="newtag"]', function(k){
if (k.which == 13 || k.which == 32) {
$(this).append('gfskjsokdfla');
}
});

$(document).on("click"... only working occasionally [duplicate]

This question already has an answer here:
jQuery on(): strange behaviour
(1 answer)
Closed 9 years ago.
I am trying to create a script that updates a variable with the last-clicked element every time a div with the class furniture gets clicked.
Unfortunately, while it seems that this does work, It only appears to be working sometimes. And as far as consistency of any sort is concerned I have been unable to find any.
$(document).on("click", ".furniture", function() {
console.log("YouBeClickin'");
if ( isCurrentElem == 1) {
$(currentElem).removeClass("chosen")
}
currentElem = "#" + this.id;
$(currentElem).addClass( "chosen");
isCurrentElem = 1;
//alert(currentElem);
});
I am adding my furniture classed elements dynamically with JavaScript, otherwise I would post up the HTML. Upon inspecting the HTML, it is apparent that my divs to get classed with furniture so the problem doesn't lie there.
The click appears to never actually fire, noted not by the fact that I don't get the expected results on screen, but that nothing get's logged in my console. Again, it's not that it never happens just that it happens super infrequently.
Any help would be greatly appreciated.

You probably want something like this:
var currentFurniture; // predefine the "global"
$(document).on("click", ".furniture", function () {
console.log("YouBeClickin'");
if ( currentFurniture !== this ) {
$(currentFurniture).removeClass("chosen");
currentFurniture = this;
$(this).addClass("chosen");
}
});

Try:
$(document).bind(function() {
console.log("YouBeClickin'");
if ( isCurrentElem == 1) {
$(currentElem).removeClass("chosen")
}
currentElem = "#" + this.id;
$(currentElem).addClass( "chosen");
isCurrentElem = 1;
//alert(currentElem);
});
or with Jquery:
$(document).onclick(function() {
console.log("YouBeClickin'");
if ( isCurrentElem == 1) {
$(currentElem).removeClass("chosen")
}
currentElem = "#" + this.id;
$(currentElem).addClass( "chosen");
isCurrentElem = 1;
//alert(currentElem);
});

how to stop double javascript trigger at the bottm of the page [duplicate]

This question already has answers here:
Check if a user has scrolled to the bottom (not just the window, but any element) [duplicate]
(31 answers)
Closed 9 years ago.
How to prevent this double triggering at the bottom of the webpage.
Here is the option when you reach 100px from the bottom you see alert message but when you hit bottom you see it too and I only want to see it once even if you hit the bottom of the webpage.
Here is the link:
double triggering
And the code:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("bottom!");
}
});
EDIT:
Problem is that I am appending multiple divs to the website and I do not have fixed number of them, so that is why I need to check if I have hit the bottom of the page.

You can set a flag to control this behaviour:
var alerted = false;
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
if (!alerted) {
alert("bottom!");
alerted = true;
}
}
else alerted = false;
});
http://jsfiddle.net/gWD66/1117/

The general answer is to simply remove the event handler once it has triggered.
jQuery can do this for you, however, with its .one() event handler function.

try this:
var beenOnBottom = false;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
if(!beenOnBottom)
{
alert("bottom!");
beenOnBottom = true;
}
}
});
If you want to show the message when you go up again, you can reset the beenOnBottom variable as soon as go above the 100px value