title: Pulling a random image from imgur with Javascript
body: <p>I created a function with the help of some other StackOverflow answers - when the button is clicked, it generates a random image from imgur by using a 5-letter string and adding it to a url. Here's my code: <a href="http://codepen.io/kaisle/pen/ojbwQm" rel="nofollow">http://codepen.io/kaisle/pen/ojbwQm</a></p>
  
  <pre><code>function randomString() {
      var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz';
      var stringlength = 5;
      var text = '';
      for (var i = 0; i &lt; stringlength; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        text += chars.substring(rnum,rnum+1);
      }
      document.getElementById('output').innerHTML = text;
      var source = 'http://i.imgur.com/' + text + '.jpg';
      $('.stuff img').attr('src', source);
      var newimagewidth = $('.stuff img').width;
      avoidBrokenImages();
    }
  </code></pre>
  
  <p>This is successful besides the fact that I get the "removed" image a lot, because it's pulling deleted pictures from imgur, or images that never contained the random 5-letter string. To avoid this, I'm trying to create a way to detect this image (<a href="http://i.imgur.com/removed.png" rel="nofollow">http://i.imgur.com/removed.png</a>), which is 161px wide, and then re-run the function until it gets an image that is not 161px wide. I have attempted this in the Codepen above by running the following function at the end of my image generator function:</p>
  
  <pre><code>function avoidBrokenImages(){
    var newimagewidth = $('.stuff img').width;
    if ($('.stuff img').width() == 161) {
       randomString();
      } else {
        return false;
      }
  }
  </code></pre>
  
  <p>This "avoidBrokenImages" function doesn't seem to work because I'm still getting the "removed" image a lot.</p>
  
  <p>Any suggestions? I feel like this is something easy I'm missing.</p>