Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Adam Penner
Adam Penner
15,779 Points
Posted by Adam Penner
Adam Penner
15,779 Points

Random Image from library with Javascript?

Hello everyone, I've been working on my own little project and I am running into some problems almost right away haha. I am trying to generate 6 random images from my image library which are all numbered png files, on the top of my page. However I can't get them to be added into the proper <div> I want, and they aren't even showing up. Any ideas?

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Site title</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
        <link rel="stylesheet" href="styles/main.css">
        <script src="js/script.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    </head>
    <body>
        <header>

        </header>
        <div class="row">
            <div class="col-sm-2">
                <div class="sidebar-nav">
                    <div class="navbar navbar-default" role="navigation">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <span class="visible-xs navbar-brand"><img class="poke" src="img/banner.png">Test</span>
                        </div>
                    <div class="navbar-collapse collapse sidebar-navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Menu Item 1</a></li>
                            <li><a href="#">Menu Item 2</a></li>
                            <li><a href="#">Menu Item 4</a></li>
                        </ul>
                    </div>
                </div>
            </div>
          </div>
            <div class="col-xs-12 col-sm-4" id="image">test</div>


        </div>


        <footer>&copy2015 </footer>

        <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    </body>
</html>

CSS

/* make sidebar nav vertical */ 
@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }
  .sidebar-nav .navbar ul {
    float: none;
  }
  .sidebar-nav .navbar ul:not {
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

span .poke {
    height: 24px;
    float: left;
    padding-right: 20px;
}

#img div {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin: 5px;
}

Javascript

var html; 
var image;

function randomImg() {
  return Math.floor(Math.random() * 720 );
}

for (var i = 1; i <= 6; i += 1 ) {
  image = randomImg();
  html += '<div style="background-image:url(sugimori/' + image + '.png)"></div>';  
}

document.write(html)

1 Answer

Seth Kroger
Seth Kroger
56,409 Points
Seth Kroger
Seth Kroger
56,409 Points

First, because your script gets loaded in the head, not the body, the call to document.write() is putting the divs where they don't belong.

Second, you shouldn't be using document.write(). It's fine for learning JavaScript in the beginning but you should really be using the DOM (or Jquery since you're loading it anyway). That involves using container div to your HTML and adding the images into it with your JavaScript. You seem to have a such a div already. It's just a matter of using the DOM/Jquery.

Third, in the CSS you're selecting the id of "img" instead of the id used in the HTML, "image", so the empty divs won't have their width and height set properly.

Adam Penner
Adam Penner
15,779 Points
Adam Penner
Adam Penner
15,779 Points

Thanks! I moved the script to the body where it should be, I wasn't thinking there obviously, and also I totally missed the 'img' and 'image', thanks for that too.

Tomorrow morning when I'm up and at this again I'm going to try to use more jQuery to get my desired effect thanks... I was probably looking at it so long today that some of these things just flew past me.

Adam Penner
Adam Penner
15,779 Points
Adam Penner
Adam Penner
15,779 Points

GOT IT!! 

for (var i = 1; i <= 6; i += 1){
$('<img src="sugimori/' + Math.floor(Math.random() * 720 + 1) + '.png' + '">').appendTo('#image');
}