1

我用 5 个按钮做了这个小测试（现在只考虑 4 个）。我没有很多使用 javascript 的经验，并且尝试使用 getelementbyid 和函数更改变量，我得到的唯一东西是未定义的数字。我很确定按钮侧是正确的，但我不确定功能。

<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

当您使用arrow变量来设置innerHTML属性时，它不会将变量链接到元素的内容，它只是使用变量的当前值。稍后更改变量不会更改元素的内容。

当您有一个新值要放入元素时，您需要更改元素的内容：

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

arrow但是，根本不需要该变量，因为您可以直接使用该参数：

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

非常简单的示例小提琴： http: //jsfiddle.net/neuroflux/STU5x/（请注意，只有 UP 有效）

于 2013-10-23T22:08:57.007 回答