function getH4() {
    var xyz = document.getElementsByClassName('bucket_left');
    for(var i=0;i<xyz.length;i++){
        var x=document.getElementsByTagName("h4")[i].innerHTML;
        var current_bucket = xyz[i];
        var y=current_bucket.firstChild.href;
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<a href=\""+y+"\">"+x+"</a>";
        newdiv.className = "hover_title_h4";
        current_bucket.appendChild(newdiv);
    }
}

window.onscroll=getH4;

In above code i want to append new div in set of divs having class bucket_left and this divs generated from infinite scrolling. above code is working fine but on scroll it appends so many divs. so how do i append only once ?

function getH4() {
    var xyz = document.getElementsByClassName('bucket_left');
    for(var i=0;i<xyz.length;i++){
        var x=document.getElementsByTagName("h4")[i].innerHTML;
        var current_bucket = xyz[i];
        var y=current_bucket.firstChild.href;
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<a href=\""+y+"\">"+x+"</a>";
        newdiv.className = "hover_title_h4";
        current_bucket.appendChild(newdiv);
    }
}

window.onscroll=getH4;

In above code i want to append new div in set of divs having class bucket_left and this divs generated from infinite scrolling. above code is working fine but on scroll it appends so many divs. so how do i append only once ?

• javascript
• html

• Consider defining a global boolean variable that is set to initially to false and when the first scroll happens is set to true. Call the function only if the variable is false. – Raul Rene Commented Feb 20, 2013 at 9:13

4 Answers 4

Add the following line at the end of your function:

function getH4() {
    // ...

    window.onscroll = null;
}

create a global boolean variable and set it to false. again set it to true in the window scroll event and chk the variable is false using a if block. put your code inside that if block.

var isScrolled = false;

function getH4() {
    if(!isScrolled){
        //your code
    }
    isScrolled = true
}

You only have to set the onscroll property to none as following at the end of you JavaScript function:

window.onscroll = null;

Now when the script executes for the first time, it will perform its function and the above line will set the onscroll to null and thus will not invoke any event on scroll of your mouse and so your function wont be invoked again and again on the event except for the first time.

Or you could handle it logically by setting a public var say var check = 0 and then set the variable to 1 when entered for the first time. So you need to check the value of check and based on that execute the function

var check = 1;
function getH4() {
    if(check==1)
    {
    var xyz = document.getElementsByClassName('bucket_left');
    for(var i=0;i<xyz.length;i++){
        var x=document.getElementsByTagName("h4")[i].innerHTML;
        var current_bucket = xyz[i];
        var y=current_bucket.firstChild.href;
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<a href=\""+y+"\">"+x+"</a>";
        newdiv.className = "hover_title_h4";
        current_bucket.appendChild(newdiv);
     }
        check=0;
    }
}

you can try this: when scrolling,the check equal false, and the append event will happen just once; when the scroll end(mouseup or mouseout), the check equal true, you can append again.

var check = true;
function getH4(event) {
    event.target.onmouseup = function() {
        check = true;
    }
    event.target.onmouseout = function() {
        check = true;
    }
    if (check) {
        var xyz = document.getElementsByClassName('bucket_left');
        for(var i=0;i<xyz.length;i++){
            var x=document.getElementsByTagName("h4")[i].innerHTML;
            var current_bucket = xyz[i];
            var y=current_bucket.firstChild.href;
            var newdiv = document.createElement('div');
            newdiv.innerHTML = "<a href=\""+y+"\">"+x+"</a>";
            newdiv.className = "hover_title_h4";
            current_bucket.appendChild(newdiv);
        }
    check = false;
}

window.onscroll=getH4