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

Share Improve this question Follow edited Apr 18, 2023 at 12:47 InSync 11.1k44 gold badges1818 silver badges5656 bronze badges asked Oct 14, 2013 at 13:34 melomanemelomane 5322 gold badges33 silver badges99 bronze badges 4

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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