browser freezes with this js code, why?

by

You define numberOfFaces as 5, and then start a while loop which checks if that variable has a truthy value – anything above 0 is truthy. That variable will never change though, resulting in an infinite loop.

You need to decrement it somewhere inside the loop using numberOfFaces--; or similar. Maybe like this:

<script>
    var numberOfFaces = 5;
    function generateFaces() {
      while (numberOfFaces) {
        var smileFace = document.createElement("img");
        var random_number = Math.floor(Math.random() * 400);
        smileFace.src = "https://stackoverflow.com/questions/35727767/smile.png";
        smileFace.style.top = random_number + "px";
        smileFace.style.left = random_number + "px";
        document.getElementById('leftSide').appendChild(smileFace);
        numberOfFaces--;
      }
    }
</script>

Maybe do a tutorial on while loops to help understand this more: http://www.tutorialspoint.com/javascript/javascript_while_loop.htm

Note: Above while loop will stop when numberOfFaces becomes 0. In JS, 0 is falsy.

More Related Contents:

  1. Reading file contents on the client-side in javascript in various browsers
  2. How to detect Ctrl+V, Ctrl+C using JavaScript?
  3. How to show Page Loading div until the page has finished loading?
  4. Jquery load() only working in firefox?
  5. Get Base64 encode file-data from Input Form
  6. Play an audio file using jQuery when a button is clicked
  7. Get element at specified position – JavaScript
  8. AngularJS – ng-disabled not working for Anchor tag
  9. Drop-down box dependent on the option selected in another drop-down box
  10. Getting Bootstrap’s modal content from another page
  11. How to iterate through all attributes in an HTML element?
  12. Sort an html list with javascript
  13. Enter key press behaves like a Tab in Javascript
  14. JQuery Slider, how to make “step” size change
  15. Resize a div on border drag and drop without adding extra markup
  16. Best way to execute js only on specific page
  17. Cancel the keydown in HTML
  18. Does the tag position in HTML affects performance of the webpage?
  19. How to play only the audio of a Youtube video using HTML 5?
  20. HTML5 restricting input characters
  21. jQuery: Slide left and slide right
  22. How to specify download location in Html using JavaScript
  23. How to use JavaScript to change the form action [duplicate]
  24. How can I create unique IDs with JavaScript?
  25. JavaScript: get code to run every minute
  26. How do I pass along variables with XMLHTTPRequest
  27. JavaScript loading progress of an image
  28. Check if input is number or letter javascript
  29. visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
  30. What is the best way to parse html in google apps script

Leave a Comment