1

My class have been tasked with making a simple web based kids game using basic JQuery. I've been told JQuery is becoming more old school, but never the less, that's what we've to use along with HTML/CSS and JS to make the game.

I've been googling for a while now and can't quite find what I'm looking for.

My first screen is asking the user to select one of four displayed avatars and to enter their name which will be stored and shown throughout the game in the top corner.

I thought the best way to choose the avatars may be to do a radio button (button is hidden but the avatar image has a border when clicked on). I was trying to make a function that stores the selected image into a variable which I can then display whenever/wherever on the page but my brain is blanking on how to do this.

I expect the code will most likely be very simple and obvious and I'm maybe overthinking it. Thanks to anyone who takes time to help me - also this is my first post here so please excuse any formatting.

This is the code I have for the selection of the avatars:


      <div class="avatarselection">
        <label>
          <input type="radio" name="test"  checked />
          <img src="Elements/images/Avatar1.png" alt="Blue Planet Avatar" class="Avatar Planet"
        /></label>
        <label>
        <input type="radio" name="test"  checked />
        <img src="Elements/images/Avatar2.png" alt="Pink Spaceman Avatar" class="Avatar Spaceman" /></label>
        <label><input type="radio" name="test"  checked />
        <img src="Elements/images/Avatar3.png" alt="Multicolour Spaceship Avatar" class="Avatar Spaceship" /></label>
        <label><input type="radio" name="test"  checked />
        <img src="Elements/images/Avatar4.png" alt="Earth Planet Avatar" class="Avatar Earth" /></label>

        <button class="setAvatar">Save Avatar</button>
        <div class="showavatar"></div> //this div is for me to test if the avatar is stored in the variable
      </div>

This is the script I have so far to just store the name in a varible which is in a different div from the avatar selection - I'm including it because I feel like the avatar storing may be something similar... or I've just done it completely wrong!

$(".enter").on("click", displayName);
//$(".setAvatar").on("click", displayAvatar);

let nameValue = $(".name").val();

function displayName(){
  $(".submitted").text("Welcome " + nameValue + "!");
}

/* I thought this may have been what I was looking for, but clearly isn't 

let selectedavatar = $("input[type='radio']:checked").val();

function displayAvatar() {
  $(".showavatar").html("<img src=" + selectedavatar + "/>");
} 
*/

Answered! My issue was the file path on my second html folder plus I needed to do localstorage. Thanks!

3 Answers 3

0

Let me get this straight. If you want to save image, just get the source:

var selectedavatarImg = $("input[type='radio']:checked").attr("src");

then use it in same screen

function displayAvatar() {
  $(".showavatar").html("<img src=" + selectedavatarImg + "/>");
}

Or if you want to save image and then use it in different screens you can save the source in localStorage :

 var selectedavatarImg = $("input[type='radio']:checked").attr("src");
//save it in localStorage using a "key" to find it at the end
localStorage.setItem("avatar", selectedavatarImg);

Get Image source in different screen:

var avatar = localStorage.getItem("avatar");
function displayAvatar() {
   $(".showavatar").html("<img src=" + avatar + "/>");
}

Did I get that right?

3
  • So, yeah, that's exactly what I'm asking for and it seems like I wasn't too far from the solution, however, the selected avatar isn't showing in the .showavatar div, it's showing a broken file image and when I click 'open image in a new tab' is says 'Cannot GET /undefined/'. I'm assuming this means it's not saved the image in the variable?
    – Amy
    Nov 4, 2022 at 19:57
  • i'm gonna add a new solution. Check it out!
    – ObieTrz
    Nov 6, 2022 at 22:38
  • This code actually worked. My issue was my jquery path on my second html document, it was pointing to the wrong folder, doh! Thanks!
    – Amy
    Nov 8, 2022 at 13:36
0

sYour radio button inputs need to have the image path as the value.

Right now, your $("input[type='radio']:checked").val() is always going to return empty because there is no value property on the input.

Example:

<input type="radio" name="test" value="Elements/images/Avatar2.png" checked />

Also, you should only have 1 checked attribute on a radio button set, this indicates the radio button you want selected as default.

1
  • I was wondering about the value, thanks. I did add them in but it still isn't doing what I need it to unfortunately.
    – Amy
    Nov 4, 2022 at 20:06
-1

I took the other answers as a base. Try this:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>Trying to help </h2>
    <div class="avatarselection">
      <label>
        <input type="radio" name="test" value="https://cdn.icon-icons.com/icons2/1378/PNG/512/avatardefault_92824.png"/>
        <img
          src="https://cdn.icon-icons.com/icons2/1378/PNG/512/avatardefault_92824.png"
          value="https://cdn.icon-icons.com/icons2/1378/PNG/512/avatardefault_92824.png"
          alt="Blue Planet Avatar"
          class="Avatar Planet"
          width="50"
          height="50" /></label
      ><br />
      <label>
        <input type="radio" name="test" value="https://cdn2.iconfinder.com/data/icons/essenstial-ultimate-ui/64/avatar-512.png"/>
        <img
          src="https://cdn2.iconfinder.com/data/icons/essenstial-ultimate-ui/64/avatar-512.png"
          alt="Pink Spaceman Avatar"
          class="Avatar Spaceman"
          width="50"
          height="50" /></label
      ><br />
      <label
        ><input type="radio" name="test" value="https://i.pinimg.com/564x/4b/71/f8/4b71f8137985eaa992d17a315997791e.jpg"/>
        <img
          src="https://i.pinimg.com/564x/4b/71/f8/4b71f8137985eaa992d17a315997791e.jpg"
          alt="Multicolour Spaceship Avatar"
          class="Avatar Spaceship"
          width="50"
          height="50" /></label
      ><br />
      <label
        ><input type="radio" name="test" value="https://cdn.pixabay.com/photo/2020/07/14/13/07/icon-5404125_1280.png"/>
        <img
          src="https://cdn.pixabay.com/photo/2020/07/14/13/07/icon-5404125_1280.png"
          alt="Earth Planet Avatar"
          class="Avatar Earth"
          width="50"
          height="50" /></label
      ><br /><br />

      <button class="setAvatar">Save Avatar</button>
      <div class="showavatar"></div>
    </div>

    <script src="src/index.js"></script>
    <script>
      $(document).ready(function () {
        $(".setAvatar").click(function () {
          var selectedavatarImg = $("input[type='radio']:checked").val();
          $(".showavatar").html(
            "<img src='" + selectedavatarImg + "' width= '100' height='100'/>"
          );
        });
      });
    </script>
  </body>
</html>

let me know if it works

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.