Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    apply css to for Loop

    This might be a really stupid question. I'm new to javascript, and I'm wondering if it is possible to add a css class to a for Loop? Just so that I get this result without having to write every paragraph:

    <code>
    example
    {
    text-align:center;
    height:100cm;
    }
    </style>
    </head>

    <body>
    <p>0m</p>
    <p>1m</p>
    <p>2m</p>
    <p>3m</p>
    </body>
    </code>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    You don't really need any JS to do what you want
    (which assumes I truly understand what you want).
    Code:
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    
    </script>
    
    <style type="text/css">
    p {
      text-align:center;
      height:10cm;
    }
    </style>
    </head>
    <body>
    
    <p>0m</p>
    <hr>
    <p>1m</p>
    <hr>
    <p>2m</p>
    <hr>
    <p>3m</p>
    
    </body>
    </html>
    Added a bit of code for clarity of the display.
    Good Luck!

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Obs, I see that the code I originally wrote was wrong anyway. The reason why I wanted to add javascript is because I want it to go 7000 meters, and not just 3 meters. And typing 7000 paragraphs would be very time-consuming. But maybe for Loop isn't the right way to do it?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Is this what you mean?

    Code:
    <style type="text/css">
    p {text-align:center;  height:1cm;}
    </style>
    </head>
    
    <body>
    <div id = "div1">
    </div>
    
    <script type="text/javascript">
    for (var i =0; i<10; i++) {
    document.getElementById("div1").innerHTML += "<p>" + i + "m</p><hr>"
    }
    
    </script>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wow, that's magic. perfect!

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by viscomvibz View Post
    wow, that's magic. perfect!
    Being a bit more specific on the requirements would result in a much more desirable result.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •