0

In this step of a Whack-a-Mole class project, https://jsfiddle.net/JennyF/vc2dum2y/, I am to make a mole appear in the #gamespace in random locations. These are the instructions (sciv is a dummy img):

--- To actually randomly move each mole, you will need to call your random number functions! Call each function once in the addMole() function and save the returned value to a variable (eg. xPos and yPos). Now that you have two random values, you will need to add a style attribute to the mole img tag. For example:

<img src="img/scify.jpg" style="" />

In this style attribute, you will need to add a "left" and "top" property. The values for each property will be your random numbers. When finished, the moles should appear all over #gamespace. Tweak the values of your random function to make the moles stay within the #gamespace. Do not copy this code. Use it as a guide. You should end up with something that looks like:

<img src="scify.jpg" style="top:'+yPos+'px;left:'+xPos+'px;" /> ----

This is my mole function. He tells me to make sure I have all my quotation marks closed but I don't understand how to do so within the parentheses unless there was a third type to use: 

var xPos;
var yPos;
function addMole(){
  $("#gamespace").append('<img src="img/mole.png"style="top:'+xPos+'px; left:'+yPos+'px;" />');
  randPosX();
  randPosY();
  t=setTimeout(addMole, 2000);
}; // end molee
DunDev
  • 210
  • 2
  • 13
Jenny
  • 27
  • 9

1 Answers1

0

By default an element's position is set to static. When elements have this positioning, the top and left properties have no effect.

You'll have to change your image's position to relative or something like that in order for it to be place as you want it to be.

Here is an example:

$("#gamespace").append('<img src="img/mole.png" style="position:relative; top:'+xPos+'px; left:'+yPos+'px;" />');

Here is a working version of your code.

https://jsfiddle.net/k6g6r2wh/

Beside the positioning thing there were some other problems. Your randPosX and randPosY functions do indeed generate random numbers but those numbers are not stored in any variables, they are just returned from the functions. You need to store them using something like this:

var xPos = randPosX();
var yPos = randPosY();
Titus
  • 22,031
  • 1
  • 23
  • 33
  • We have the position changed in the css, sorry, didn't think to mention that. `div#gamespace{positionn: relative;}` and `div#gamespace img{position:absolute;}` – Jenny Nov 20 '17 at 22:09
  • @Jenny Beside that (the `position`), there is nothing wrong with the HTML you append to the `#gamespace` element. – Titus Nov 20 '17 at 22:13
  • @Jenny It still has a couple of problems. You don't need to use ` – Titus Nov 20 '17 at 22:29
  • Sorry, I did in Notepad, forgot to change it there. I'm trying to add it, nothings happening when I type it in and press enter or click on the + – Jenny Nov 20 '17 at 22:33
  • @Jenny If you've managed to test it and it works, that should be enough, there is no need for a fiddle. – Titus Nov 20 '17 at 22:36
  • It's not working. The mole appears in a random position when I click 'start' but then no other moles appear. They are supposed to appear every 2 seconds for this step. Which we then alter to have them disappear when clicked and then not only appear in different locations, but at different intervals – Jenny Nov 20 '17 at 22:45
  • I don't get it, I put the link to the jQuery library in but the Mole and other script still doesn't happen – Jenny Nov 20 '17 at 22:50
  • @Jenny you can continue the fiddle that I've created. There is a link to it in my answer. – Titus Nov 20 '17 at 22:51
  • Wow, it works! Can't figure out where to put the mole img in the fiddle, though – Jenny Nov 20 '17 at 23:09
  • What is keeping them contained within the `#gamespace`? When I run mine, the moles appear too far to the right, over the border. – Jenny Nov 20 '17 at 23:16
  • @Jenny When you set an element's position to `absolute`, it will align itself relative to the first element that is positioned `relative`. In my case, I've set the image's position to `relative` so it's `top` and `left` are set relative to the element's default position. – Titus Nov 21 '17 at 00:32
  • @Jenny you can find here more details about using images in jsfiddle https://stackoverflow.com/questions/13172762/adding-images-in-jsfiddle – Titus Nov 21 '17 at 00:35
  • I can't seem to save yours with the css and such. I've added almost everything to mine and it seems to work fine in the fiddle but not when I have the actual game in Firefox. (thank you for the link) – Jenny Nov 21 '17 at 00:40
  • @Jenny You can use the `fork` or `update` buttons. To figure out what is wrong, you can open FireFox's dev tools and take a look at the console to see if there are any errors. https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console – Titus Nov 21 '17 at 00:42
  • @Jenny All this becomes much easier if you learn how to debug your code, how to use the dev tools. – Titus Nov 21 '17 at 00:43
  • It doesn't show anything. He shows us how to fix all are code from the previous project before we start this one so the only thing new is what I'm asking about. – Jenny Nov 21 '17 at 00:52
  • @Jenny You should also take a look at the **Network** tab to see if all the required files are loaded (your CSS and JavaScript files and the jQuery library) – Titus Nov 21 '17 at 00:54
  • I don't understand. Everything works correctly for the steps so far except the moles show up about a half inch too far to the right. They do in the fiddle, too, the words are just smaller – Jenny Nov 21 '17 at 01:00
  • @Jenny The anchor point af an element is the top left corner which means that the image's top left corner will be placed at the `left` position you set, maybe that is the problem. To deal with that you should limit the maximum `x` position (maximum `left`) to `[available width] - [image width]` so the image won't be placed off screen. – Titus Nov 21 '17 at 01:33
  • Okay, I figure out where to change the width. Kind of obvious when you step back and look at it! Thank you. Now to get it to disappear when clicked, but I haven't researched that yet – Jenny Nov 21 '17 at 02:09
  • Any way to keep him from always appearing in the top left first? – Jenny Nov 21 '17 at 02:10
  • @Jenny You're probably calling `$("#gamespace").append(....)` before you set the `posX` and `posY` variables. You need to move the `posX = randPosX()` and `posY = randPosY()` before `$("#gamespace").append(....)`. I hope that makes sense. As for hiding, it can be as simple as `$("img").click(function(){$(this).remove();});` – Titus Nov 21 '17 at 02:15
  • He says we're to "add a line of code to our `.on()` function that makes them disappear. Thank you for the calling out of order reminder – Jenny Nov 21 '17 at 02:18
  • @Jenny In that case, just add `$(this).remove();`. – Titus Nov 21 '17 at 02:20
  • @Jenny The second parameter to the `setTimeout` function is the time for the timeout in milliseconds which means that, in order to show the mole at a random interval you just need to pass a random number as the second parameter to this function (random in a specific range of course). – Titus Nov 21 '17 at 02:25
  • I thought of that, but he suggested the function. I typed in this `t=setTimeout(addMole, 1000-2000);` and they just appear like mad! I must be doing the range wrong – Jenny Nov 21 '17 at 02:28
  • @Jenny `1000-2000` means `-1000` which means the function will be called instantly (no timeout). You need to use something similar to the code in the `randPosY` or `randPosX` to generate a random number. Those function generate random numbers from `0` to `300` and from `0` to `600` – Titus Nov 21 '17 at 02:31
  • @Jenny For the timeout, you'll probably need a more reasonable range like `1000 -> 5000` – Titus Nov 21 '17 at 02:33
  • Is this how I would do the function: `function randMole(){ return Math.floor(Math.random()*2000); };` Are we supposed to be doing this in chat? – Jenny Nov 21 '17 at 02:42
  • @Jenny That will give you a random number in the `0 -> 2000` range, you should increase the minimum value, you can just add `1000` to the result (eg: `function randMole(){ return 1000 + Math.floor(Math.random()*2000); };`). Yes, we should have probably used the chat. – Titus Nov 21 '17 at 02:45
  • or: `function randMole(from, to){return Math.floor((Math.random()*(to - from + 1))+from); };` – Jenny Nov 21 '17 at 02:52
  • Sorry, didn't see that first – Jenny Nov 21 '17 at 02:54
  • @Jenny Yes, your approach is more flexible. – Titus Nov 21 '17 at 02:59
  • Okay, I take it this isn't how I call the function: `t=setTimeout("randMole()");` – Jenny Nov 21 '17 at 02:59
  • @Jenny No, you need to use `setTimeout("addMole()", randMole(1000, 2000));`. So, the first parameter is the function that should be called and the second parameter is the delay. Your `randMole` function expects 2 parameters (*range start* and *range end*), you need to call it like this `randMole(1000, 2000)` because of that. – Titus Nov 21 '17 at 03:02
  • I was going to just update my fiddle and show you what I have but the most recent version with the jQuery Library didn't save like it said it did and nothing works. I put the `randMole(1000, 2000)` in place of the `t=setTimeout(randMole());' and it isn't making a difference. I have the function the way you said. – Jenny Nov 21 '17 at 03:13
  • @Jenny `t = setTimeout(addMole, randMole(1000, 2000));` should work. Make sure there aren't any errors by looking at the browser's console. – Titus Nov 21 '17 at 03:17
  • God bless you!! It doesn't notify me that you posted until a few minutes later, I didn't see your last one before I posted my link – Jenny Nov 21 '17 at 03:24
  • @Jenny I'm glad I could help. Good luck. – Titus Nov 21 '17 at 03:25
  • How did you attach the jQuery library? Everything I tried came up with an error. The only way I got it was to drag it off of yours. That won't work in the furture. – Jenny Nov 21 '17 at 03:28
  • @Jenny You need to use a link to the library, I've used `https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js`. You can search on Google for this *jQuery CDN* to find a link. – Titus Nov 21 '17 at 03:30
  • The link didn't work. So is jsbin.com a replacement for jsfiddle, without having to split it all up? – Jenny Nov 21 '17 at 03:36
  • @Jenny Yes, http://jsbin.com has a **Add Library** which makes things easier and it also has a **Console** tab so you can see if there are any errors. – Titus Nov 21 '17 at 03:39
  • Wonderful! Thank you so much. Have a blessed night. I'm spent. I get to work on Photoshop tomorrow, that's exciting. Gee, until next week...lol – Jenny Nov 21 '17 at 03:40
  • @Jenny Thanks. Here is actually very early in the morning. In any case, have a good night and I hope all this will work out for you. – Titus Nov 21 '17 at 03:43
  • Jsfiddle has a dialog in the JavaScript pane top right. You choose jQuery and - no need to add as external resource unless you want a version not in the dialog. Remember to change to plain js if you use external jQuery – mplungjan Nov 21 '17 at 04:56
  • @mplungjan That is good to know. I've never noticed those options. – Titus Nov 21 '17 at 20:31