Question

working on a mini page for some homework and I’m stuck! What we’ve been told to do it to pull localStorage variables from a fake “registration” page we’ve made (which gets it’s information from a user’s choice of three radio buttons) and use that information to alter what the user will see on a fake, very basic “e-commerce” site.

What I’ve successfully done is wire my button from the registration page to open the e-commerce page upon click and I think I’ve properly coded in storing the variables of choice. Here’s my “registration page” code:

window.onload=init;
//setup commands
function init () {
    //wire button to function

    var submitButton=document.getElementById("submitButton");
    submitButton.onclick= travel;
    }   
function travel () {
    window.location="etzy.html"

    if (document.getElementById("Dog").checked) 
        localStorage.usercomputer = "Dog";
    else if (document.getElementById("Cat").checked) 
        localStorage.usercomputer = "Cat";
    else if (document.getElementById("Black").checked) 
        localStorage.usercomputer = "Black";
    else if (document.getElementById("Brown").checked) 
        localStorage.usercomputer = "Brown";
    else if (document.getElementById("White").checked) 
        localStorage.usercomputer = "White";
    else if (document.getElementById("Yes").checked) 
        localStorage.usercomputer = "Yes";
   else if (document.getElementById("No").checked) 
        localstorage.usercomputer = "No";
    }

Okay, so there’s that. And then here’s the e-commerce JS I’ve started working on:

window.onload=image;
    function image (){
    var images = document.getElementById("localStorage.usercomputer");

       if (images ="Dog"){
        //document.write('<img class="etsyimage" src="dog.jpg" alt="dog Image"/>');
             alert("dog");
       }
       else if (images ="Cat"){
        //document.write('<img class="etsyimage" src="cat.jpg" alt="cat Image" />');
            alert("cat");
        }
    }

I’ve commented out the document.write and put in an alert to test. Problem is, I keep getting the “Dog” alert when I test it (and choose “Cat”) and I have no idea why. So thus follows are some of my questions:
1) Why am I only getting the “Dog” alert and how can I fix that?
2) When I wasn’t using the alert and tried out the document.write function, the image ‘dog.jpg’ would overwrite all of the other HTML information on the page (banner, menu, etc.). Is there some way to fix this or use something other than document.write to put an image on the resulting page (HTML) but to not have it supersede everything else on the HTML so that it’s blank except for the new image?

I think those are my only questions in that if that stuff can be fixed then everything would be functional at least. Sorry for the novel of a post. Also feel free to judge the base-level javascript code and questions, I’m new to this so I’m just sort of struggling my way through as of now.
Thank you!

Answer 1

In your image() function your if statement is incorrect

window.onload=image;
    function image (){
    var images = document.getElementById("localStorage.usercomputer");

       if (images == "Dog") //Need two ='s for comparison
       { 
             alert("dog");
       }
       else if (images == "Cat")
       {
            alert("cat");
       }
   }

Using one = in javascript will assign values (i.e var bob = 'a person'), hence your function throwing up unexpected results. when testing values always use == or === for strict comparison to check if values are equal and of the same type.

In answer to your other question, I would add a container or area on the other page where you want the image to go. Perhaps using <div id="imgDiv"></div> tags and give it an ID as i’ve shown. You can style and position the div using CSS and then apend the image to this container rather than using document.write(). Something like the code below

window.onload=image;
    function image (){
    var images = document.getElementById("localStorage.usercomputer");
    var imgDiv = document.getElementById("imgDiv"); //setup variable to img container        

   if (images == "Dog")
   { 
         imgDiv.innerHTML = '<img class="etsyimage" src="dog.jpg" alt="dog image" />';    
   }
   else if (images == "Cat")
   {
        imgDiv.innerHTML = '<img class="etsyimage" src="cat.jpg" alt="cat image" />';
   }
}

Hope this helps