javascript - JavaScript 関数が機能していないようです。理由がわかりません

Question

関数が正しく実行されていないようです。なにが問題ですか？私はすでに 5 時間を費やして、この dang 関数を機能させようとしました。最後に写真にリンクを貼っておきます。

 <html>
    <head>
        <script type="text/javascript">
            var pagenumber=1;
            function increase()
            {
                if(pagenumber == 1)
                {
                return
                }
                pagenumber++;
            }
            function decrease()
            {
                if(pagenumber == 5)
                {
                return
                }
                pagenumber--;
            }
            function slider() {
                if(pagenumber == 1)
                {
                document.getElementById('pg1').style.display='inline';
                document.getElementById('pg2').style.display='none';
                document.getElementById('down').style.cursor='not-allowed';
                document.getElementById('down').style.background-position='top';

            }
            if(pagenumber == 2)
            {
                document.getElementById('pg1').style.display='h';
                document.getElementById('pg3').style.display='none';
                document.getElementById('pg2').style.display='inline';                  
                document.getElementById('down').style.cursor='pointer';
                document.getElementById('down').style.background-position='bottom';

            }
            if(pagenumber == 3)
            {
                document.getElementById('pg2').style.display='none';
                document.getElementById('pg4').style.display='none';
                document.getElementById('pg3').style.display='inline';
            }
            if(pagenumber == 4)
            {
                document.getElementById('pg3').style.display='none';
                document.getElementById('pg5').style.display='none';
                document.getElementById('pg4').style.display='inline';
                document.getElementById('down').style.cursor='pointer';
                document.getElementById('up').style.background-position='top';

            }
            if(pagenumber == 5)
            {
                document.getElementById('pg4').style.display='none';
                document.getElementById('pg5').style.display='inline';
                document.getElementById('up').style.cursor='not-allowed';
                document.getElementById('up').style.background-position='bottom';
            }
        }
    </script>
</head>
<body height="183px" bgcolor="#F3F3F3" style="width:279px">
    <div id="down" style="float:left;margin-top:29px;height:27px;width:15px;display:block;cursor:pointer;background:url('website/arrow_left.png') no-repeat top left;background-repeat:no-repeat;background-position:top">
        <img src="website/pixel.png" width="15px" height="30px" onclick="decrease()" onclick="slider()">
    </div>
    <div id="up" style="float:right;margin-top:29px;height:27px;width:15px;display:block;cursor:pointer;background:url('website/arrow_right.png') no-repeat top left;background-repeat:no-repeat;background-position:top">
        <img src="website/pixel.png" width="15px" height="30px" onclick="increase()" onclick="slider()">
    </div>
    <table style="background:url('website/arrow_middle.png') no-repeat center" align="center">
            <tr id="pg1" style="display:inline">
                <td style="padding-left:25px; padding-right:25px">
                    <a href="google.com">
                        <img src="website/oil.jpg" width="75px" height="75px">
                    </a>
                </td>
                <td style="padding-right:25px">
                    <a href="amazon.com">
                        <img src="website/gas.jpg" width="75px" height="75px">
                    </a>
                </td>
            </tr>
            <tr id="pg2" style="display:none">
                <td style="padding-left:25px; padding-right:25px">
                    <a href="google.com">
                        <img src="website/nuclear.jpg" width="75px" height="75px">
                    </a>
                </td>
                <td style="padding-right:25px">
                    <a href="amazon.com">
                        <img src="website/solar.jpg" width="75px" height="75px">
                    </a>
                </td>
                </tr>
                <tr id="pg3" style="display:none">
                    <td style="padding-left:25px; padding-right:25px">
                        <a href="google.com">
                            <img src="website/wind.jpg" width="75px" height="75px">
                        </a>
                    </td>
                    <td style="padding-right:25px">
                        <a href="amazon.com">
                            <img src="website/hydro.jpg" width="75px" height="75px">
                        </a>
                    </td>
                </tr>
                <tr id="pg4" style="display:none">
                    <td style="padding-left:25px; padding-right:25px">
                        <a href="google.com">
                            <img src="website/electric.jpg" width="75px" height="75px">
                        </a>
                    </td>
                    <td style="padding-right:25px">
                        <a href="amazon.com">
                            <img src="website/thermal.jpg" width="75px" height="75px">
                        </a>
                    </td>
                </tr>
                <tr id="pg5" style="display:none">
                    <td style="padding-left:25px; padding-right:25px">
                        <a href="google.com">
                            <img src="website/mining.jpg" width="75px" height="75px">
                        </a>
                    </td>
                    <td style="padding-right:25px">
                        <a href="amazon.com">
                            <img src="website/transversal.jpg" width="75px" height="75px">
                        </a>
                    </td>
                </tr>
        </table>
    </body>
 </html>

score 2 · Accepted Answer

変数のドル記号は、PHP などの言語でのみ使用されます。7 行目で、if 内の変数を比較するときにドル記号を削除すると、準備完了です。

if($pagenumber == 1)

に

if(pagenumber == 1)

更新 1:

また、要素には 2 つの異なるonclick属性が設定されています。onclick2 つの関数を呼び出したい場合は、次のようにしてください。

<img src="website/pixel.png" width="15px" height="30px" onclick="increase();slider()">

更新 2:

background-positionJavaScript を使用して CSS 属性を変更するには、プロパティをと呼びbackgorundPositionます。だからこれを試してください：

document.getElementById('down').style.backgroundPosition = 'bottom';

score 1 · Accepted Answer

問題 1:

この行が問題です：

if($pagenumber == 1)

この行を次のように変更します。

if(pagenumber == 1)

変数名は次のpagenumberとおりです。

var pagenumber=1;

問題 2:

チェック後すぐに戻るpagenumber == 1ため、インクリメントされません。コードを次のように変更します。

if(pagenumber == 1)
   return ++pagenumber;

関数から値を返したくない場合は、次のようにします。

function increase() {
   if(pagenumber == 1)
       pagenumber++;
}

またonclick、HTML コードにイベントハンドラーを 1 つだけ含めるようにしてください。

score 0 · Accepted Answer

動作しました: http://jsfiddle.net/xGWp3/1/

問題1

$pagenumberでなければなりませんpagenumber

問題 2

pagenumber増加することはありません。開始位置がの場合1、increase()関数はインクリメントする前に戻ります。

書き直してみてincrease()くださいdecrease()：

function increase()
{
    if (pagenumber < 5)
    {
        pagenumber++;
    }
}

function decrease()
{
    if (pagenumber > 1)
    {
        pagenumber--;
    }
}

問題 3

onclick属性を次の形式に変更する必要がある場合もありますonclick="increase(); slider()"。1 つの HTML タグに 2 つの onclick 属性を含めることはできないと思います。

問題4

あなたの関数は、宣言されているようにグローバルスコープにありません。次のように宣言してみてください。

increase = function ()
{
    //...
}

問題5

document.getElementById('pg1').style.display='h';

する必要があります

document.getElementById('pg1').style.display='none';

これらすべてに対処すると、コードが機能するように見えます: http://jsfiddle.net/xGWp3/1/

javascript - JavaScript 関数が機能していないようです。理由がわかりません

3 に答える 3

問題1

問題 2

問題 3

問題4

問題5

Related

Reference