2

これは、3つのラジオボタンから背景画像を選択できるWebページです。選択したものをlocalstorageに保存したいので、ページが更新されると、最後に選択した背景画像が表示されます。そうではなく、理由がわかりませんね。前もって感謝します ：）

 <!DOCTYPE html>
    <html manifest="my.manifest">
    <head>
    <script src="modernizr.js"></script> 

    <script>
    function setBg() {
        myForm = document.getElementById("bgList");
        for (var i = 0; i < myForm.land.length; i++) {
            if (myForm.land[i].checked) {
                break
            }
        }
        document.body.style.backgroundImage="url('" + myForm.land[i].value + "')";

        if (Modernizr.localstorage) { 
            localStorage.setItem("background", i); 
            //alert(localStorage.getItem("background"));
        }
        else{
            alert("Can not be saved to localstorage!");
        }
    }
    </script>
    </head>

    <body>

    // Sørger for å velge et bakgrunnsbilde når siden lastes
    <script src="modernizr.js">
        window.onload = function(e){
            mittLand = 0;
            if (localStorage.getItem("background") != null) {
                mittLand = parseInt(localStorage.getItem("background")); 
                alert(mittLand); 
            }
            myForm = document.getElementById("bgList");
            myForm.land[mittLand].checked=true;
            setBg();
        }
    </script>

    <form id="bgList">
        <h1>Velg ditt favorittland</h1>
        <input type="radio" name="land" value="norge.png" onClick="setBg()">Norge</input>
        <input type="radio" name="land" value="sverige.png" onClick="setBg()">Sverige</input>
        <input type="radio" name="land" value="danmark.png" onClick="setBg()">Danmark</input>
    </form>

    </body>
    </html>
4

1 に答える 1

1

どの部分が機能しないのかわかりませんか？アラートは選択したオプションを正しく表示しますが、背景を設定する前にアラートを実行しているため、アラートを押した後、画像が正しく設定されているため、アラートの時点では背景がスタイル設定されていません。

<!DOCTYPE html>
<html>
<head>
    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>

    <script>
        function setBg() {
            myForm = document.getElementById("bgList");
            for (var i = 0; i < myForm.land.length; i++) {
                if (myForm.land[i].checked) {
                    break
                }
            }
            document.body.style.backgroundImage="url('" + myForm.land[i].value + "')";

            if (Modernizr.localstorage) {
                localStorage.setItem("background", i);
                //alert(localStorage.getItem("background"));
            }
            else{
                alert("Can not be saved to localstorage!");
            }
        }
    </script>
</head>

<body>

// Sørger for å velge et bakgrunnsbilde når siden lastes
<script>
    window.onload = function(e){
        mittLand = 0;
        if (localStorage.getItem("background") != null) {
            mittLand = parseInt(localStorage.getItem("background"));
            alert(mittLand);
        }
        myForm = document.getElementById("bgList");
        myForm.land[mittLand].checked=true;
        setBg();
    }
</script>

<form id="bgList">
    <h1>Velg ditt favorittland</h1>
    <input type="radio" name="land" value="norge.png" onClick="setBg()">Norge</input>
    <input type="radio" name="land" value="sverige.png" onClick="setBg()">Sverige</input>
    <input type="radio" name="land" value="danmark.png" onClick="setBg()">Danmark</input>
</form>

</body>
</html>

このコードを試してみました。modernizrで更新

于 2013-03-26T23:50:47.927 に答える