How to get an image to pass variable to next page using Jquery-CodePudding

I'm making a game where I need the user's name and selected image to pass to the next page. The code I've used does this for the name and I think the image information has also been passed, but the image doesn't show on the second page, it just shows a broken icon.

This must be done using only JS/Jquery.

This is the HTML - I've used radio buttons for this and set the value as the image path.

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

This is the JS/JQuery I'm trying.

$(".enter").on("click", setStorage)

function setStorage(){

    //save name input
    let usernameval = $(".name").val();
    localStorage.setItem('usernameval', usernameval);
    //save avatar input
    let avatarval = $("input[type='radio']:checked").val();
    localStorage.setItem('avatarval', avatarval);
    //shows message name & avatar are saved
    $(".submitted").text("Thanks "   usernameval);
}

window.onload = function(){
    let getName = localStorage.getItem('usernameval');
    $(".username").html(getName);

    let getAvatar = localStorage.getItem('avatarval');
    $(".useravatar").html("<img src="   getAvatar   "/>");
}

This is what's happening, there should be the user selected avatar above the name.

CodePudding user response：

Consider the following.

HTML

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

The value attribute is only assigned to Form Elements. You can assign it to your Image Element, yet this is bad practice. Moving the value to the input allows you to call .val() and get the proper value back.