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

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!

Solution

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?