www.webdeveloper.com
Results 1 to 2 of 2

Thread: Random timing event

  1. #1
    Join Date
    Jun 2014
    Posts
    1

    Unhappy Random timing event

    Ok so I'm new to JavaScript so I'm probably making a stupid mistake, or I'm missing the plot completely...

    Anyway what I,m trying to do is set the width of a div to change randomly every second, so sort of like a "music bar". I've set the default width and height of the div as well as changed the background color. Like so:
    HTML
    <div id = "dynamic-bar" onload = "setwidth()"></div>
    CSS
    #dynamic-bar{float:left;
    height: 50px;
    width: 300px;
    background-color: blue;}

    Javascript well that I've attempted
    function setwidth() {
    window.setInterval("setwidth", 1000);
    var index = Math.round(Math.random() * 9);
    var wValue = "0px";
    if(index == 1) wValue = "100px";
    if(index == 2) wValue = "200px";
    if(index == 3) wValue = "300px";
    if(index == 4) wValue = "400px";
    if(index == 5) wValue = "500px";
    if(index == 6) wValue = "600px";
    if(index == 7) wValue = "700px";
    if(index == 8) wValue = "800px";
    if(index == 9) wValue = "900px";
    document.getElementById("dynamic-bar").style.width = wValue;
    }

    All my links are working. And I've made no stupid spelling errors. Please help!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389

    Lightbulb

    You never call the setwidth() function to start the process.

    Here is a different version without all the 'if' statements

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Variable DIV width </title>
    <style type="text/css">
    #dynamic-bar{
      float:left;
      height: 50px;
      width: 300px;
      background-color: blue;
    }
    </style>
    
    </head>
    <body>
    <div id = "dynamic-bar" onload = "setwidth()"></div>
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?297039-Random-timing-event
    
    function setwidth() {
      var wValue = Math.floor(Math.random() * 9) * 100 + 'px';
      document.getElementById("dynamic-bar").style.width = wValue;
      setTimeout("setwidth()", 1000);
    }
    
    window.onload = function() { setTimeout('setwidth()',1000); }
    </script>
    
    </body>
    </html>
    BTW: You should enclose your script between [ code] and [ /code] tags (without the spaces)
    to make it easier to view and test your code. It also preserves the formatting and indentation.

    Good Luck!


    Note, you could also use the setInterval() function as in your original code with a minor change...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Variable DIV width </title>
    <style type="text/css">
    #dynamic-bar{
      float:left;
      height: 50px;
      width: 300px;
      background-color: blue;
      text-align:center;
      color:white;
    }
    </style>
    
    </head>
    <body>
    <div id = "dynamic-bar"></div>
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?297039-Random-timing-event
    
    function setwidth() {
      var wValue = Math.floor(Math.random() * 9) * 100 + 'px';
      document.getElementById("dynamic-bar").style.width = wValue;
      document.getElementById("dynamic-bar").innerHTML = wValue;
    }
    
    window.onload = function() { setInterval('setwidth()',1000); }
    </script>
    
    </body>
    </html>
    Last edited by JMRKER; 06-25-2014 at 09:41 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles