CODEWITHSUNDEEP
javascripthtmlcss
Lanka Patrudu
Lanka Patrudu

Reputation: 31

how to use for loop in javascript and how to call in css

Hi I used this code to draw 12 lines, but now I want to use for loop and to call in CSS, please tell me how to use.

    <!DOCTYPE html>
<html>
<head>

<style>

#straight{
height: 30px;
border-right: 1px solid blue; 
-webkit-transform: rotate(deg);
transform: rotate(deg); 
position: absolute;
top:40px;
left:400px;
}





#circle {
  height: 30px;
  width: 31px;
  margin-left: 81px;
  margin-top: 0px;
  background-color: #fff;
  border: 2px solid blue;
  border-radius: 65px;
  position:absolute;

}





</style>

</head>

<body>



                    <div>

                        <div id="circle">                       
                             <div style="position:relative; top:-40px; left:-385px;">
                                <div id="straight"></div>

                         </div>
                    </div>




</body>
</html>

Upvotes: 0

Views: 141

Answers (2)

sam
sam

Reputation: 376

css 

.straight {
        height: 30px;
        border-right: 1px solid blue; 
        -webkit-transform: rotate(deg);
        transform: rotate(deg); 
        position: absolute;
        top:40px;
        left:400px;
    }

javascript

var str_div = '';
for (var i = 0; i < 12; i++) {
    str_div += '<div class="straight" >test</div>';
}
document.getElementById("idName").innerHTML = str_div;

in html body

<div id="idName"></div>

Upvotes: 1

Tushar
Tushar

Reputation: 87203

Change the id to class

CSS:

.straight {
    height: 30px;
    border-right: 1px solid blue; 
    -webkit-transform: rotate(deg);
    transform: rotate(deg); 
    position: absolute;
    top:40px;
    left:400px;
}

Javascript:

for (var i = 0; i < 12; i++) {
    document.write('<hr class="straight" />');
}

Upvotes: 1

Related Questions