1

私はこの小さなテストを 5 つのボタンで行いました (現在は 4 つだけが考慮されています)。私は javascript の経験があまりなく、 getelementbyid と function を使用して変数を変更しようとすると、未定義の数値しか得られませんでした。ボタン側は正しいと確信していますが、機能についてはよくわかりません。

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <style>
    body {
        overflow    : hidden;
        padding     : 0;
        margin      : 0;
        background-color: #BBB;

    }
    #AdvancedButton1
    {
        border: 1px #A9A9A9 solid;
        background-color: #F0F0F0;
    }
    #AdvancedButton2
    {
        border: 1px #A9A9A9 solid;
        background-color: #F0F0F0;
    }
    #AdvancedButton3
    {
        border: 1px #A9A9A9 solid;
        background-color: #F0F0F0;
    }
    #AdvancedButton4
    {
        border: 1px #A9A9A9 solid;
        background-color: #F0F0F0;
    }
    #AdvancedButton5
    {
        border: 1px #A9A9A9 solid;
        background-color: #F0F0F0;
    }
    #info {
        position    : absolute;
        top     : 0px;
        width       : 100%;
        padding     : 5px;
        text-align  : center;
    }
    #info a {
        color       : #66F;
        text-decoration : none;
    }
    </style>
</head>
<body>
    <div id="info">
        <span id="result"></span>
    </div> 
    <button id="AdvancedButton1" type="button" name="" value="" style="position:absolute;left:896px;top:14px;width:102px;height:138px;z-index:1;" >
    <div style="text-align:center"><span style="color:#FF0000;font-family:Arial;font-size:19px"><b>UP</b></span></div>
    </button>
    <button id="AdvancedButton2" type="button" name="" value="" style="position:absolute;left:896px;top:327px;width:102px;height:138px;z-index:2;">
    <div style="text-align:center"><span style="color:#FF0000;font-family:Arial;font-size:16px"><b>DOWN</b></span></div>
    </button>
    <button id="AdvancedButton3" type="button" name="" value="" style="position:absolute;left:720px;top:181px;width:138px;height:102px;z-index:3;">
    <div style="text-align:center"><span style="color:#FF0000;font-family:Arial;font-size:19px"><b>LEFT</b></span></div>
    </button>
    <button id="AdvancedButton4" type="button" name="" value="" style="position:absolute;left:1028px;top:181px;width:138px;height:102px;z-index:4;">
    <div style="text-align:center"><span style="color:#FF0000;font-family:Arial;font-size:19px"><b>RIGHT</b></span></div>
    </button>
    <button id="AdvancedButton5" type="button" name="" value="" style="position:absolute;left:896px;top:181px;width:102px;height:105px;z-index:5;">
    <div style="text-align:center"><span style="color:#DC143C;font-family:'Arial Black';font-size:27px">FIRE</span></div>
    </button>
    <script>

        var outputEl    = document.getElementById('result');
        var arrow;

        document.getElementById("AdvancedButton1").onclick = function(){
            funarr('1');
        }
        document.getElementById("AdvancedButton2").onclick = function(){
            funarr('2');
        }
        document.getElementById("AdvancedButton3").onclick = function(){    
            funarr('3');
        }
        document.getElementById("AdvancedButton4").onclick = function(){
            funarr('4');
        }


        function funarr(value){

            arrow = value ;
        }

        outputEl.innerHTML  = '<b>Result:</b> '
            + arrow ;

    </script>
</body>
</html>

私は何が間違っているのですか？最後にタグがありますが、投稿が適切にフォーマットされておらず (理由はわかりません)、タグが隠されています

4

3 に答える 3

3

そして funar は次のようになります。

function funarr(value){
     arrow = value ;
     outputEl.innerHTML  = '<b>Result:</b> '
            + arrow ;
}

arrow実際、グローバル変数は必要ありません

于 2013-10-23T22:11:07.423 に答える
2

When you are using the arrow variable to set the innerHTML property, that doesn't link the variable to the content of the element, it just uses the current value of the variable. Changing the variable later on doesn't change the content of the element.

You need to change the content of the element when you have a new value to put in it:

function funarr(value){
  arrow = value;
  outputEl.innerHTML  = '<b>Result:</b> ' + arrow;
}

The arrow variable is however not needed at all, as you can use the parameter directly:

function funarr(value){
  outputEl.innerHTML  = '<b>Result:</b> ' + value;
}
于 2013-10-23T22:14:28.560 に答える
0 
 document.getElementById("AdvancedButton1").onclick = function(){
            funarr('1');
        }

次のようにする必要があります。

var thisClickyThing = document.getElementById("AdvancedButton1");
thisClickyThing.addEventListener('click', function(){
    funarr('1');
});

非常に簡単な例 Fiddle: http://jsfiddle.net/neuroflux/STU5x/ (UP のみが機能することに注意してください)

于 2013-10-23T22:08:57.007 に答える