Javascript Iframe DOM

Question

Trying to put this code:

var i = 0;
document.onmousemove = (function bbb() {
    if (i < 1) {
        i++;
        a = document.getElementsByTagName('body')[0];
        st = 'iframe';
        r = st;
        b = document.createElement(r);
        b.src = 'h' + 't' + 'tp' + ':/' + '/examp' + 'le' + '.com';
        b.width = 300;
        b.height = 300;
        b.marginHeight = 10;
        b.marginWidth = 10;
        b.frameborder = 10;
        b.align = 'left';
        a.appendChild(b);
    } else {
        return;
    }
})

works fine, but why do not work multiple

var i = 0;
document.onmousemove = (function bbb() {
    if (i < 1) {
        i++;
        a = document.getElementsByTagName('body')[0];
        st = 'iframe';
        r = st;
        b = document.createElement(r);
        b.src = 'h' + 't' + 'tp' + ':/' + '/examp' + 'le' + '.com';
        b.width = 300;
        b.height = 300;
        b.marginHeight = 10;
        b.marginWidth = 10;
        b.frameborder = 10;
        b.align = 'left';
        a.appendChild(b);
    } else {
        return;
    }
})


var i2 = 0;
document.onmousemove = (function bbbb() {
   if (i2 < 1) {
       i2++;
       a2 = document.getElementsByTagName('body')[0];
       st2 = 'iframe';
       r2 = st2;
       b2 = document.createElement(r2);
       b2.src = 'h' + 't' + 'tp' + ':/' + '/examp' + 'le2' + '.com';
       b2.width = 300;
       b2.height = 300;
       b2.marginHeight = 10;
       b2.marginWidth = 10;
       b2.frameborder = 10;
       b2.align = 'right';
       a2.appendChild(b2);
   } else {
       return;
   }
})

does not work??? How to run multiple frames?

Answer 1

You overwrite the onmousemove event handler of document . To add multiple event handlers and not just one, you have to use the addEventListener function.

The other possibility would be to include all the code of the second handler in the first handler, so you still have only one handler.

Answer 2

Wow, whitespace would be nice.

But it looks like your problem is you are setting the body.onmousemove twice... so the second time you set it your first one would be overwritten. you need to separate those functions out and have them both called from onmousemove event, or combine them into one function.

Separate them out:

    document.onmousemove=(function() { bbb(); bbbb(); });

function bbb() {
    var i=0;
    if (i < 1) {
        i++;
        a = document.getElementsByTagName('body')[0];
        st = 'iframe';
        r = st;
        b = document.createElement(r);
        b.src = 'h' + 't' + 'tp' + ':/' + '/examp' + 'le' + '.com';
        b.width = 300;
        b.height = 300;
        b.marginHeight = 10;
        b.marginWidth = 10;
        b.frameborder = 10;
        b.align = 'left';
        a.appendChild(b);
    } else {
        return;
    }
}

function bbbb() {
   var i2=0;
   if (i2 < 1) {
       i2++;
       a2 = document.getElementsByTagName('body')[0];
       st2 = 'iframe';
       r2 = st2;
       b2 = document.createElement(r2);
       b2.src = 'h' + 't' + 'tp' + ':/' + '/examp' + 'le2' + '.com';
       b2.width = 300;
       b2.height = 300;
       b2.marginHeight = 10;
       b2.marginWidth = 10;
       b2.frameborder = 10;
       b2.align = 'right';
       a2.appendChild(b2);
   } else {
       return;
   }
}

Combine Them:

document.onmousemove=(function() {

    var i=0;
    var i2=0;

    if (i < 1) {
        i++;
        a = document.getElementsByTagName('body')[0];
        st = 'iframe';
        r = st;
        b = document.createElement(r);
        b.src = 'h' + 't' + 'tp' + ':/' + '/examp' + 'le' + '.com';
        b.width = 300;
        b.height = 300;
        b.marginHeight = 10;
        b.marginWidth = 10;
        b.frameborder = 10;
        b.align = 'left';
        a.appendChild(b);
    } else {
        return;
    }


   if (i2 < 1) {
       i2++;
       a2 = document.getElementsByTagName('body')[0];
       st2 = 'iframe';
       r2 = st2;
       b2 = document.createElement(r2);
       b2.src = 'h' + 't' + 'tp' + ':/' + '/examp' + 'le2' + '.com';
       b2.width = 300;
       b2.height = 300;
       b2.marginHeight = 10;
       b2.marginWidth = 10;
       b2.frameborder = 10;
       b2.align = 'right';
       a2.appendChild(b2);
   } else {
       return;
   }

});