How can I fix this javascript function?

Question

I made a function which (have to )change body background image, but it shouldn't work ( although I used it for an other site long time ago and there it do it's job). So here's the code, but I dunno whats wrong:

function bgChange()
{
    var totalcount=7;
    var num;
    num = Math.ceil( (Math.random() * totalCount) );
    $('#divID').css("background", "url(kepek/"+num+".jpg)");
    /*document.body.style.background=url(kepek/"+num+".jpg);*/
    setInterval(bgChange(),10000);
}

[EDIT] If helps anything, here's the html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>To infinity... and beyond!</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="content.css"/>
    <script type="text/javascript" src="bgchange.js"></script>
</head>

<body>
    <div id="wrapper">
        <h1>Galaxis útikalauz (nem csak) stopposoknak</h1>
        <div id="left_side">
            <h2>Menü</h2>
            <ul id="menu">
                <li class="menu_element"><a class="" href="#">menupont</a></li>
                <li class="menu_element"><a class="" href="#">menupont</a></li>
                <li class="menu_element"><a class="" href="#">menupont</a></li>
                <li class="menu_element"><a class="" href="#">menupont</a></li>
                <li class="menu_element"><a class="" href="#">menupont</a></li>
            </ul>
        </div>
        <div id="main_content" onload="bgChange()">
            <h2>Témacím 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus risus risus, congue tempus turpis dapibus in. Donec posuere, felis non aliquam pulvinar, est ante luctus nunc, vel mollis velit turpis non est. Vivamus ut neque a nulla euismod ultricies in vel lectus. Quisque quis mauris felis. Mauris pellentesque eu ante ac semper. Morbi nec dapibus odio, ut lobortis orci. Vivamus eget sem porta orci condimentum facilisis. Suspendisse id tortor adipiscing, tincidunt diam vitae, lacinia velit. Proin sit amet rhoncus sapien, sed auctor nisl. Donec ullamcorper nibh vel faucibus lacinia. Ut sed faucibus eros, vel molestie dui. Nunc auctor ac nibh vel varius. Integer quis nisi facilisis orci laoreet dictum. <a href="#">Tovább >></a></p>
            <h2>Témacím 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus risus risus, congue tempus turpis dapibus in. Donec posuere, felis non aliquam pulvinar, est ante luctus nunc, vel mollis velit turpis non est. Vivamus ut neque a nulla euismod ultricies in vel lectus. Quisque quis mauris felis. Mauris pellentesque eu ante ac semper. Morbi nec dapibus odio, ut lobortis orci. Vivamus eget sem porta orci condimentum facilisis. Suspendisse id tortor adipiscing, tincidunt diam vitae, lacinia velit. Proin sit amet rhoncus sapien, sed auctor nisl. Donec ullamcorper nibh vel faucibus lacinia. Ut sed faucibus eros, vel molestie dui. Nunc auctor ac nibh vel varius. Integer quis nisi facilisis orci laoreet dictum. <a href="#">Tovább >></a></p>
            <h2>Témacím 3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus risus risus, congue tempus turpis dapibus in. Donec posuere, felis non aliquam pulvinar, est ante luctus nunc, vel mollis velit turpis non est. Vivamus ut neque a nulla euismod ultricies in vel lectus. Quisque quis mauris felis. Mauris pellentesque eu ante ac semper. Morbi nec dapibus odio, ut lobortis orci. Vivamus eget sem porta orci condimentum facilisis. Suspendisse id tortor adipiscing, tincidunt diam vitae, lacinia velit. Proin sit amet rhoncus sapien, sed auctor nisl. Donec ullamcorper nibh vel faucibus lacinia. Ut sed faucibus eros, vel molestie dui. Nunc auctor ac nibh vel varius. Integer quis nisi facilisis orci laoreet dictum. <a href="#">Tovább >></a></p>
        </div>
        <div id="right_side">
            <img src="Me.jpg" alt="Én vagyok" />
            <h4>Ez Injektív!</h4>
            <p>Quisque congue nunc vel bibendum dictum. Curabitur elit ligula, auctor viverra mauris eu, mollis luctus libero. Aliquam vel semper tortor, eu vestibulum risus. Nullam scelerisque malesuada lectus ut fermentum. Phasellus gravida felis ut laoreet mollis. </p>
        </div>
    </div>
    <div id="footer">
        <p>Soha Művek Zrt.</p>
    </div>
</body>
</html>

Lots of things could be wrong. . Do you have a node with id divID, do you have a directory kepek` with a file named 1.jpg, etc ?? — karthikr
– karthikr, Commented Feb 28, 2014 at 21:01
setInterval(bgChange, 10000) or setInterval("bgChange()", 10000) — tymeJV
– tymeJV, Commented Feb 28, 2014 at 21:02

Quentin · Accepted Answer · 2014-02-28 21:03:05Z

4

The last thing you do, every time you run the function, is to run the function again.

This locks up the event loop so there will never been a repaint of the DOM.

Take the () off the end of bgChange so that you pass the bgChange itself function to setInterval instead of the return value (undefined) of calling that function.

Then change setInterval to setTimeout so that you don't say "Every time this function runs, run it again every 10 seconds" since that would increase the number of times the function ran every 10 seconds exponentially.

setInterval(bgChange(),10000); should be setTimeout(bgChange ,10000);

answered Feb 28, 2014 at 21:03

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrew Templeton · Accepted Answer · 2014-02-28 21:06:50Z

-1

I assume you are trying to make this happen on page load:

$(document).ready(function(){
  var repeater = setInterval(bgChange, 10000);
  function bgChange(){
    var totalcount=7,
      num = Math.ceil( Math.random() * totalCount ),
      target = $('#divID');
    if(target.length)
      target.css("background", "url(kepek/"+num+".jpg)");
    else
      clearInterval(repeater);
  }
});

answered Feb 28, 2014 at 21:06

Andrew Templeton

1,69610 silver badges13 bronze badges

2 Comments

NeverJr Over a year ago

And if I would like use it on body?

Andrew Templeton Over a year ago

Edited to fix the typo and actually set the target :)

Collectives™ on Stack Overflow

How can I fix this javascript function?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related