0

在迷你页面上做一些家庭作业，我被困住了！我们被告知要从我们制作的虚假“注册”页面中提取 localStorage 变量（从用户选择的三个单选按钮中获取信息）并使用该信息来更改用户将看到的内容一个假的，非常基本的“电子商务”网站。

我已经成功完成的是从注册页面连接我的按钮以在单击时打开电子商务页面，我认为我已经正确编码存储选择的变量。这是我的“注册页面”代码：

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";
    }

好的，就是这样。然后是我开始研究的电子商务 JS：

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");
        }
    }

我已注释掉document.write并发出警报以进行测试。问题是，当我测试它（并选择“猫”）时，我不断收到“狗”警报，我不知道为什么。因此，以下是我的一些问题：1）为什么我只收到“狗”警报，我该如何解决？2) 当我不使用警报并尝试该document.write功能时，图像“dog.jpg”会覆盖页面上的所有其他 HTML 信息（横幅、菜单等）。除了将图像放在结果页面（HTML）上之外，是否有其他方法可以解决此问题或使用其他方法，document.write但不要让它取代 HTML 上的所有其他内容，以便除了新图像之外它是空白的？

我认为这些是我唯一的问题，如果这些东西可以修复，那么至少一切都会正常运行。对不起一个帖子的小说。也可以随意判断基本级别的 javascript 代码和问题，我是新手，所以我现在只是在努力通过自己的方式。谢谢！

4

1 回答 1

0

在您的image()函数中，您的 if 语句不正确

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");
       }
   }

=在 javascript 中使用一个将分配值（即var bob = 'a person'），因此您的函数会抛出意外的结果。当测试值时，总是使用==or===进行严格比较来检查值是否相等且类型相同。

在回答您的其他问题时，我会在您希望图像去的其他页面上添加一个容器或区域。也许使用<div id="imgDiv"></div>标签并给它一个ID，就像我展示的那样。您可以使用 CSS 设置 div 的样式和位置，然后将图像附加到此容器中，而不是使用document.write(). 类似于下面的代码

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" />';
   }
}

希望这可以帮助

于 2012-04-15T16:00:37.687 回答