[FIXED] How to get an image to pass variable to next page using Jquery

Issue

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 class="introbox">
  <div class="introtext"><h1>Pick an Avatar:</h1></div>
  <div class="avatarselection">
    <label>
      <input type="radio" name="test"  checked />
      <img src="Elements/images/Avatar1.png" alt="Blue Planet Avatar" class="Avatar Planet" value="Elements/images/Avatar1.png"/></label>
    <label>
    <input type="radio" name="test" />
    <img src="Elements/images/Avatar2.png" alt="Pink Spaceman Avatar" class="Avatar Spaceman" value="Elements/images/Avatar2.png"/></label>
    <label><input type="radio" name="test" />
    <img src="Elements/images/Avatar3.png" alt="Multicolour Spaceship Avatar" class="Avatar Spaceship" value="Elements/images/Avatar3.png" /></label>
    <label><input type="radio" name="test" />
    <img src="Elements/images/Avatar4.png" alt="Earth Planet Avatar" class="Avatar Earth" 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.

Solution

Consider the following.

HTML

<div class="introbox">
  <div class="introtext">
    <h1>Pick an Avatar:</h1>
  </div>
  <div class="avatarselection">
    <label>
      <input type="radio" name="test" checked value="Elements/images/Avatar1.png" />
      <img src="Elements/images/Avatar1.png" alt="Blue Planet Avatar" class="Avatar Planet" />
    </label>
    <label>
      <input type="radio" name="test" value="Elements/images/Avatar2.png" />
      <img src="Elements/images/Avatar2.png" alt="Pink Spaceman Avatar" class="Avatar Spaceman" />
    </label>
    <label>
      <input type="radio" name="test" value="Elements/images/Avatar3.png" />
      <img src="Elements/images/Avatar3.png" alt="Multicolour Spaceship Avatar" class="Avatar Spaceship" />
    </label>
    <label>
      <input type="radio" name="test" value="Elements/images/Avatar4.png" />
      <img src="Elements/images/Avatar4.png" alt="Earth Planet Avatar" class="Avatar Earth" />
    </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.

Answered By - Twisty

Answer Checked By - Clifford M. (PHPFixing Volunteer)