Jquery - functions not loading

Question

I decided to try and challenge myself by making a dice roller for multiple die types; D20, D12,D10,D8,D6,D4 that will return an image connected to the result. The user can choose which die on the page to roll. The first die I made was a D20, so it has 20 results to return. I have a few of questions.

My first function the D20 works great! Except, that when it returns the result of 12. The image does not load. I checked, the image is there, the path seems correct but it just doesn't recognize it... Why is that?
I thought since the first one worked I could just use the same code and rename the variables to correspond with the new die... I did this but when I click any of the other dice rollers they don't run.
Is jQuery the best language to use for this example? Is there a way to simplify my code? Since I have to reference a different set of images for each die I was not sure how to break this up.

$(document).ready(function() {
  $('.rollDice20').on('click', function() {
    var randImage20 = Math.floor(Math.random() * 20) + 1;
    $('.imageGoHere20').html('');
    $('.random20').html(randImage20);
    $('.holder20 img#i' + randImage20).clone().appendTo('.imageGoHere20');
  });
  $('.imageGoHere20').html(randImage20);
});

$(document).ready(function() {
  $('.rollDice10').on('click', function() {
    var randImage10 = Math.floor(Math.random() * 10) + 1;
    $('.imageGoHere10').html('');
    $('.random10').html(randImage10);
    $('.holder10 img#a' + randImage10).clone().appendTo('.imageGoHere10');
  });
  $('.imageGoHere10').html(randImage10);
});

<style type="text/css">.floating-box {
  display: inline-block;
  width: 350px;
  height: 75px;
  margin: 10px;
  border: none;
  text-align: center;
}

img {
  height: 250px;
  width: 195px;
}

.holder20 {
  display: none;
}

.holder10 {
  display: none;
}

</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>


<div class='holder20'>
  <img id='i1' src='http://iambesser.me/DA/images/20/1D20.png' />
  <img id='i2' src='http://iambesser.me/DA/images/20/2D20.png' />
  <img id='i3' src='http://iambesser.me/DA/images/20/3D20.png' />
  <img id='i4' src='http://iambesser.me/DA/images/20/4D20.png' />
  <img id='i5' src='http://iambesser.me/DA/images/20/5D20.png' />
  <img id='i6' src='http://iambesser.me/DA/images/20/6D20.png' />
  <img id='i7' src='http://iambesser.me/DA/images/20/7D20.png' />
  <img id='i8' src='http://iambesser.me/DA/images/20/8D20.png' />
  <img id='i9' src='http://iambesser.me/DA/images/20/9D20.png' />
  <img id='i10' src='http://iambesser.me/DA/images/20/10D20.png' />
  <img id='i11' src='http://iambesser.me/DA/images/20/11D20.png' />
  <imd id='i12' src='http://iambesser.me/DA/images/20/12D20.png' />
  <img id='i13' src='http://iambesser.me/DA/images/20/13D20.png' />
  <img id='i14' src='http://iambesser.me/DA/images/20/14D20.png' />
  <img id='i15' src='http://iambesser.me/DA/images/20/15D20.png' />
  <img id='i16' src='http://iambesser.me/DA/images/20/16D20.png' />
  <img id='i17' src='http://iambesser.me/DA/images/20/17D20.png' />
  <img id='i18' src='http://iambesser.me/DA/images/20/18D20.png' />
  <img id='i19' src='http://iambesser.me/DA/images/20/19D20.png' />
  <img id='i20' src='http://iambesser.me/DA/images/20/20D20.png' />
</div>
<div class='holder10'>
  <img id='a20' src='http://iambesser.me/DA/images/10/1D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/2D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/3D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/4D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/5D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/6D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/7D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/8D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/8D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/9D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/10D10.png' />
</div>

<div class='floating-box'>
  <div class='imageGoHere20'></div>
  <p> You Rolled</p>
  <div class='random20'></div>
  <button class='rollDice20'>Roll D20 </button>
</div>

<div class='floating-box'>
  <div class='imageGoHere10'></div>
  <p> You Rolled</p>
  <div class='random10'></div>
  <button class='rollDice10'>Roll D10</button>
</div>

In your jumping around, you neglected to also read [The Tour](https://stackoverflow.com/tour) to learn [how to ask questions](https://stackoverflow.com/help/how-to-ask) and [what topics are allowed here](https://stackoverflow.com/help/on-topic). — Rob, Jan 25 '18 at 18:56
there is another stack site for code review. this is not the right place for that. Regarding your specific question about the image for 12 you really need to debug and find out .. this is not the right place to ask such a question! ... Good luck — A Khudairy, Jan 25 '18 at 19:03

Ricky Notaro-Garcia · Answer 1 · 2018-01-25T19:08:10.827

You can't use var declared inside a function outside of them.

Read : What is the scope of variables in JavaScript?

You will need to move the $('.imageGoHereX').html(randImageX); inside the onClick functions.

$(document).ready(function() {
  $('.rollDice6').on('click', function() {
    var randImage6 = Math.floor(Math.random() * 6) + 1;
    $('.imageGoHere6').html('');
    $('.imageGoHere6').html(randImage6);
    $('.random6').html(randImage6);
    $('.holder6 img#c' + randImage6).clone().appendTo('.imageGoHere6');

  });
});

<style type="text/css">.floating-box {
  display: inline-block;
  width: 350px;
  height: 75px;
  margin: 10px;
  border: none;
  text-align: center;
}

img {
  height: 250px;
  width: 195px;
}

.holder6 {
  display: none;
}

</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>


<div class='holder6'>
  <img id='c1' src='http://iambesser.me/DA/images/6/1D6.png' />
  <img id='c2' src='http://iambesser.me/DA/images/6/2D6.png' />
  <img id='c3' src='http://iambesser.me/DA/images/6/3D6.png' />
  <img id='c4' src='http://iambesser.me/DA/images/6/4D6.png' />
  <img id='c5' src='http://iambesser.me/DA/images/6/5D6.png' />
  <img id='c6' src='http://iambesser.me/DA/images/6/6D6.png' />
</div>

<div class='floating-box'>
  <div class='imageGoHere6'></div>
  <p> You Rolled</p>
  <div class='random6'></div>
  <button class='rollDice6'>Roll D6</button>
</div>

@AshleyB I update my snippet ! Also you forgot to rename your IDs too! You named them all `a20`, `b20`, `c20` etc. — Ricky Notaro-Garcia, Jan 25 '18 at 19:10
Oh wow... yup, I totally missed that yesterday. Thank you I will go an update. — Ashley B, Jan 25 '18 at 19:18

j08691 · Accepted Answer · 2018-01-25T19:13:40.297

To answer your questions:

You had a typo in your twelvth <img> tag (<imd>)
You were duplicating IDs and had extra ones as well.
Using jQuery is fine, but that's just my opinion. You could combine all your document.ready calls into one as seen below. Plus there are ways to refactor your code to reduce it, but for that you may want to visit codereview.stackexchange.com
You also needed to declare some of the variables you were using outside of the many document.ready calls you had as their scope was being limited, however by reducing the use of document.ready to just one instance and declaring those variables first, you get rid of another problem.

Fixed:

$(document).ready(function() {
  var randImage20, randImage10, randImage8, randImage6, randImage4;
  $('.rollDice20').on('click', function() {
    randImage20 = Math.floor(Math.random() * 20) + 1;
    $('.imageGoHere20').html('');
    $('.random20').html(randImage20);
    $('.holder20 img#i' + randImage20).clone().appendTo('.imageGoHere20');
  });
  $('.imageGoHere20').html(randImage20);
  $('.rollDice10').on('click', function() {
    randImage10 = Math.floor(Math.random() * 10) + 1;
    $('.imageGoHere10').html('');
    $('.random10').html(randImage10);
    $('.holder10 img#a' + randImage10).clone().appendTo('.imageGoHere10');
  });
  $('.imageGoHere10').html(randImage10);
  $('.rollDice8').on('click', function() {
    randImage8 = Math.floor(Math.random() * 8) + 1;
    $('.imageGoHere8').html('');
    $('.random8').html(randImage8);
    $('.holder8 img#b' + randImage8).clone().appendTo('.imageGoHere8');
  });
  $('.imageGoHere8').html(randImage8);
  $('.rollDice6').on('click', function() {
    randImage6 = Math.floor(Math.random() * 6) + 1;
    $('.imageGoHere6').html('');
    $('.random6').html(randImage6);
    $('.holder6 img#c' + randImage6).clone().appendTo('.imageGoHere6');
  });
  $('.imageGoHere6').html(randImage6);
  $('.rollDice4').on('click', function() {
    randImage4 = Math.floor(Math.random() * 4) + 1;
    $('.imageGoHere4').html('');
    $('.random4').html(randImage4);
    $('.holder4 img#d' + randImage4).clone().appendTo('.imageGoHere4');
  });
  $('.imageGoHere4').html(randImage4);
});

<style type="text/css">.floating-box {
  display: inline-block;
  width: 350px;
  height: 75px;
  margin: 10px;
  border: none;
  text-align: center;
}

img {
  height: 250px;
  width: 195px;
}

.holder20 {
  display: none;
}

.holder12 {
  display: none;
}

.holder10 {
  display: none;
}

.holder8 {
  display: none;
}

.holder6 {
  display: none;
}

.holder4 {
  display: none;
}

</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>


<div class='holder20'>
  <img id='i1' src='http://iambesser.me/DA/images/20/1D20.png' />
  <img id='i2' src='http://iambesser.me/DA/images/20/2D20.png' />
  <img id='i3' src='http://iambesser.me/DA/images/20/3D20.png' />
  <img id='i4' src='http://iambesser.me/DA/images/20/4D20.png' />
  <img id='i5' src='http://iambesser.me/DA/images/20/5D20.png' />
  <img id='i6' src='http://iambesser.me/DA/images/20/6D20.png' />
  <img id='i7' src='http://iambesser.me/DA/images/20/7D20.png' />
  <img id='i8' src='http://iambesser.me/DA/images/20/8D20.png' />
  <img id='i9' src='http://iambesser.me/DA/images/20/9D20.png' />
  <img id='i10' src='http://iambesser.me/DA/images/20/10D20.png' />
  <img id='i11' src='http://iambesser.me/DA/images/20/11D20.png' />
  <img id='i12' src='http://iambesser.me/DA/images/20/12D20.png' />
  <img id='i13' src='http://iambesser.me/DA/images/20/13D20.png' />
  <img id='i14' src='http://iambesser.me/DA/images/20/14D20.png' />
  <img id='i15' src='http://iambesser.me/DA/images/20/15D20.png' />
  <img id='i16' src='http://iambesser.me/DA/images/20/16D20.png' />
  <img id='i17' src='http://iambesser.me/DA/images/20/17D20.png' />
  <img id='i18' src='http://iambesser.me/DA/images/20/18D20.png' />
  <img id='i19' src='http://iambesser.me/DA/images/20/19D20.png' />
  <img id='i20' src='http://iambesser.me/DA/images/20/20D20.png' />
</div>
<div class='holder10'>
  <img id='a1' src='http://iambesser.me/DA/images/10/1D10.png' />
  <img id='a2' src='http://iambesser.me/DA/images/10/2D10.png' />
  <img id='a3' src='http://iambesser.me/DA/images/10/3D10.png' />
  <img id='a4' src='http://iambesser.me/DA/images/10/4D10.png' />
  <img id='a5' src='http://iambesser.me/DA/images/10/5D10.png' />
  <img id='a6' src='http://iambesser.me/DA/images/10/6D10.png' />
  <img id='a7' src='http://iambesser.me/DA/images/10/7D10.png' />
  <img id='a8' src='http://iambesser.me/DA/images/10/8D10.png' />
  <img id='a9' src='http://iambesser.me/DA/images/10/9D10.png' />
  <img id='a10' src='http://iambesser.me/DA/images/10/10D10.png' />
</div>
<div class='holder8'>
  <img id='b1' src='http://iambesser.me/DA/images/8/1D8.png' />
  <img id='b2' src='http://iambesser.me/DA/images/8/2D8.png' />
  <img id='b3' src='http://iambesser.me/DA/images/8/3D8.png' />
  <img id='b4' src='http://iambesser.me/DA/images/8/4D8.png' />
  <img id='b5' src='http://iambesser.me/DA/images/8/5D8.png' />
  <img id='b6' src='http://iambesser.me/DA/images/8/6D8.png' />
  <img id='b7' src='http://iambesser.me/DA/images/8/7D8.png' />
  <img id='b8' src='http://iambesser.me/DA/images/8/8D8.png' />
</div>
<div class='holder6'>
  <img id='c1' src='http://iambesser.me/DA/images/6/1D6.png' />
  <img id='c2' src='http://iambesser.me/DA/images/6/2D6.png' />
  <img id='c3' src='http://iambesser.me/DA/images/6/3D6.png' />
  <img id='c4' src='http://iambesser.me/DA/images/6/4D6.png' />
  <img id='c5' src='http://iambesser.me/DA/images/6/5D6.png' />
  <img id='c6' src='http://iambesser.me/DA/images/6/6D6.png' />
</div>
<div class='holder4'>
  <img id='d1' src='http://iambesser.me/DA/images/4/1D4.png' />
  <img id='d2' src='http://iambesser.me/DA/images/4/2D4.png' />
  <img id='d3' src='http://iambesser.me/DA/images/4/3D4.png' />
  <img id='d4' src='http://iambesser.me/DA/images/4/4D4.png' />
</div>

<div class='floating-box'>
  <div class='imageGoHere20'></div>
  <p> You Rolled</p>
  <div class='random20'></div>
  <button class='rollDice20'>Roll D20 </button>
</div>

<div class='floating-box'>
  <div class='imageGoHere10'></div>
  <p> You Rolled</p>
  <div class='random10'></div>
  <button class='rollDice10'>Roll D10</button>
</div>

<div class='floating-box'>
  <div class='imageGoHere8'></div>
  <p> You Rolled</p>
  <div class='random8'></div>
  <button class='rollDice8'>Roll D8</button>
</div>

<div class='floating-box'>
  <div class='imageGoHere6'></div>
  <p> You Rolled</p>
  <div class='random6'></div>
  <button class='rollDice6'>Roll D6</button>
</div>

<div class='floating-box'>
  <div class='imageGoHere4'></div>
  <p> You Rolled</p>
  <div class='random4'></div>
  <button class='rollDice4'>Roll D4</button>
</div>

Thank you I will head over to that site now. I feel silly the amount of times I looked at i12 and didn't see the d instead of a g... — Ashley B, Jan 25 '18 at 19:13

Jquery - functions not loading

2 Answers2