Question

我用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>

我做错了什么？最后有标签，但帖子格式不好（我不知道为什么），标签是隐藏的

Answer 1

而funar应该是：

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

确实，您不需要全局arrow变量

Answer 2

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

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

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

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

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

Answer 3

 document.getElementById("AdvancedButton1").onclick = function(){
            funarr('1');
        }

应该是：

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

非常快速的例子小提琴：http://jsfiddle.net/neuroflux/STU5x/（注意只有UP有效）

getelementbyid onclick在调用函数后给出undefined

3 个答案: