CODEWITHSUNDEEP
javascripthtml
Forzaferrarileo
Forzaferrarileo

Reputation: 25

getelementbyid onclick gives undefined after calling a function

I made this small test with 5 buttons ( now only 4 are considered ) . I don't have a lot of experience with javascript , and trying to change a variable using getelementbyid and a function , the only thing I got is an undefined number . I'm quite sure the button side is right , but I'm not sure about the 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>

what's I'm doing wrong? at the end there's the tag , but the post is not formatted well ( I don't know why ) and the tag is hidden

Upvotes: 1

Views: 644

Answers (3)

Guffa
Guffa

Reputation: 700212

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

Upvotes: 2

onof
onof

Reputation: 17367

And funar should be:

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

And indeed you don't need the global arrow variable

Upvotes: 3

Barrie Reader
Barrie Reader

Reputation: 10713

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

Should be:

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

VERY quick example Fiddle: http://jsfiddle.net/neuroflux/STU5x/ (note that only UP works)

Upvotes: 0

Related Questions