Swap div position

Swap div position with an array of divs.

by Craig Martin

HTML

Click on it to swap div contents.
<br><br>

CSS

div{cursor: pointer;}
#div1{color: yellow; background-color: blue;}
#div2{color: blue; background-color: yellow;}


.vframe {
border: 3px solid red;
}

.main_vframe {
border: 3px solid #000000;
}

.main_vframe iframe {
  width:450px;
  height:auto;
}

JavaScript

var div_cont = document.createElement('div');
div_cont.setAttribute('id', 'vcont');

var div1 = document.createElement('div');
div1.setAttribute('id', 'div1');
//div1.setAttribute('class', 'main_vframe');
div1.innerHTML = '<iframe src="https://vdo.ninja/vdo.ninja.js?view=kSW3GZn"></iframe><div>CAM 1</div>';

var div2 = document.createElement('div');
div2.setAttribute('id', 'div2');
div2.setAttribute('class', 'vframe');
div2.innerHTML = 'CAM 2';

var div3 = document.createElement('div');
div3.setAttribute('id', 'div3');
div3.setAttribute('class', 'vframe');
div3.innerHTML = 'CAM 3';

var div_array = [];
div_array[0] = div1;
div_array[1] = div2;
div_array[2] = div3;

for (var i=0; i<div_array.length; i+=1) {
    div_cont.appendChild(div_array[i]);
}

document.body.appendChild(div_cont);

div_cont.onclick = function() {
    
    if (div_array[0] === div1){
        div_array[0] = div2;
        div2.setAttribute('class', 'vframe main_vframe');       
        div3.setAttribute('class', 'vframe');        
        div1.setAttribute('class', 'vframe');
        div_array[1] = div3;
        div_array[2] = div1;
    } else if (div_array[0] === div2){
        div_array[0] = div3;        
        div3.setAttribute('class', 'vframe main_vframe');       
        div2.setAttribute('class', 'vframe');        
        div1.setAttribute('class', 'vframe');    
        div_array[1] = div1;
        div_array[2] = div2;
    } else if (div_array[0] === div3){
        div_array[0] = div1;
        div1.setAttribute('class', 'vframe main_vframe');       
        div2.setAttribute('class', 'vframe');        
        div3.setAttribute('class', 'vframe');     
        div_array[1] = div2;
        div_array[2] = div3;
 }
    
    for (var i=0; i<div_array.length; i+=1) {
        div_cont.appendChild(div_array[i]);
    }
    
}