<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0 ; padding: 0; } div{ width: 150px; height: 150px; background: red; border-radius: 50%; float: left; line-height: 150px; text-align: center; } div:nth-of-type(7){ background: blue; } </style> </head> <body> <div class="div"></div> <div class="div"></div> <div class="div"></div> <div class="div"></div> <div class="div"></div> <div class="div"></div> <div class="div1"></div> <script> var redDiv=document.getElementsByClassName("div"); var blueDiv=document.getElementsByClassName("div1"); blueDiv[0].innerHTML=Math.ceil(Math.random()*15+1); for(x=0;x<redDiv.length;x++) { redDiv[x].innerHTML = Math.ceil(Math.random() * 32 + 1); for(j=0;j<x;j++){ if(redDiv[x].innerHTML==redDiv[j].innerHTML){ x--; } } } for(y=0;y<redDiv.length;y++){ for(k=0;k<y;k++){ if (Number(redDiv[k].innerHTML)>Number(redDiv[y].innerHTML)){ c=redDiv[y].innerHTML; redDiv[y].innerHTML=redDiv[k].innerHTML; redDiv[k].innerHTML=c; } } } console.log(redDiv); </script> </body> </html>
