0

いくつかの宿題のためにミニページに取り組んでいて、私は立ち往生しています！作成した偽の「登録」ページ（ユーザーが選択した3つのラジオボタンから情報を取得）からlocalStorage変数を取得し、その情報を使用してユーザーに表示される内容を変更するように指示されたこと偽の非常に基本的な「eコマース」サイト。

私が成功したのは、登録ページからボタンを配線して、クリックするとeコマースページを開くことです。選択した変数を格納するように適切にコーディングしたと思います。これが私の「登録ページ」コードです：

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

さて、それがあります。そして、これが私が取り組み始めたeコマース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情報（バナー、メニューなど）を上書きしていました。これを修正するかdocument.write、結果のページ（HTML）に画像を配置する以外の方法を使用して、新しい画像を除いて空白になるように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 に答える