How do I save user selected avatar in a variable using js or jquery-CodePudding

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 >
        <label>
          <input type="radio" name="test"  checked />
          <img src="Elements/images/Avatar1.png" alt="Blue Planet Avatar" 
        /></label>
        <label>
        <input type="radio" name="test"  checked />
        <img src="Elements/images/Avatar2.png" alt="Pink Spaceman Avatar"  /></label>
        <label><input type="radio" name="test"  checked />
        <img src="Elements/images/Avatar3.png" alt="Multicolour Spaceship Avatar"  /></label>
        <label><input type="radio" name="test"  checked />
        <img src="Elements/images/Avatar4.png" alt="Earth Planet Avatar"  /></label>

        <button >Save Avatar</button>
        <div ></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   "/>");
} 
*/

CodePudding user response：

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.

CodePudding user response：

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?