I am making four buttons (input type="button") in html and want them to run function on click but nothing happening.

the html code is:

<div id="newtext" style="position:absolute; top:100px;">
    <p>this is Text</p>
</div>
<form>
    <input type="button" name="moveLayer" value="move Left" onclick="move('left');">
    <input type="button" name="moveLayer" value="move Right" onclick="move('right');">
    <input type="button" name="moveLayer" value="move Up" onclick="move('up'); ">
    <input type="button" name="moveLayer" value="move Down" onclick="move('down'); ">
</form>

and the script is :

function move(direction) {
    var layerText = document.getElementByID("newtext");

    switch(direction) {
    
    case "left":
        layerText.style.left=50;
        break;
        
    case "right":
        layerText.style.right=150;
        break;
    
    case "up":
        layerText.style.up=50;
        break;
    case "down":
        layerText.style.down=150;
        break;
    default:
    it is not working;
    }
}

thanks in advance..

I am making four buttons (input type="button") in html and want them to run function on click but nothing happening.

the html code is:

<div id="newtext" style="position:absolute; top:100px;">
    <p>this is Text</p>
</div>
<form>
    <input type="button" name="moveLayer" value="move Left" onclick="move('left');">
    <input type="button" name="moveLayer" value="move Right" onclick="move('right');">
    <input type="button" name="moveLayer" value="move Up" onclick="move('up'); ">
    <input type="button" name="moveLayer" value="move Down" onclick="move('down'); ">
</form>

and the script is :

function move(direction) {
    var layerText = document.getElementByID("newtext");

    switch(direction) {
    
    case "left":
        layerText.style.left=50;
        break;
        
    case "right":
        layerText.style.right=150;
        break;
    
    case "up":
        layerText.style.up=50;
        break;
    case "down":
        layerText.style.down=150;
        break;
    default:
    it is not working;
    }
}

thanks in advance..

• javascript

• 1 Replace getElementByID with getElementById..and also mention unit i.e "px". For example, layerText.style.left = 50 + "px"; .check errors in console. – Mr_Green Commented Oct 14, 2013 at 13:35
• yes still not working :( – melomane Commented Oct 14, 2013 at 13:39
• melomane, what is it is not working part in default? try to keep some alert or console instead of that to test it.. and also check errors in the console of your browser developer tool. – Mr_Green Commented Oct 14, 2013 at 13:43
• yeah..after correcting defalt it is working and also i have made one more mistake that layerText.style.up while there must be top not up.. :p thanks a lot Mr_Green – melomane Commented Oct 14, 2013 at 13:55

2 Answers 2

This should work (there's no such thing as style.up and style.down):

function move(direction) {
    var layerText = document.getElementById("newtext");

    switch (direction) {

        case "left":
            layerText.style.left = "50px";
            break;

        case "right":
            layerText.style.left = "150px";
            break;

        case "up":
            layerText.style.top = "50px";
            break;

        case "down":
            layerText.style.top = "150px";
            break;
    }
}

Demo: http://jsfiddle/GE3C5/2/

layerText.style.up=50;
                 ^

layerText.style.down=150;
                 ^

no property up and down. use top and bottom instead;

default:
    it is not working;

may cause syntax error