Home/ Questions/Q 1023365
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T11:36:25+00:00

I got a Making Layers that Move javascript sample code and modified the functions

  • 0

I got a “Making Layers that Move” javascript sample code and modified the functions that move left and right, creating the following code (I commented the modified lines, so you can see how it was):

<html>
<head>
<title>JavaScript Radio Example</title>
<script language=javascript type="text/javascript">

//var x=10;

function moveRight( )
{
        var layerElement = document.getElementById("layer2");
        //x+=10;
        //layerElement.style.left=x;
        layerElement.style.left += 10;
}

function moveLeft( )
{
        var layerElement = document.getElementById("layer2");
        //x-=10;
        //layerElement.style.left=x;
        layerElement.style.left -= 10;
}


</script>
</head>

<body>
<style type="text/css">

#layer1 {
background-color: yellow;
position: absolute;
height:90px;
width:90px;
left:0px;
top:100px;
}

#layer2 {
background-color: red;
position: absolute;
height:90px;
width:90px;
left:10px;
top:100px;
}

</style>

<p id="layer1">This is layer 1</p>
<p id="layer2">This is layer 2</p>

<form action="" name="orderForm">
<input type="BUTTON" value="Move Left" onClick="moveLeft()" />
<input type="BUTTON" value="Move Right" onClick="moveRight()" />
</form>

</body>
</html>

Now, why isn’t it working after the modification?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try running this in a js debugger, e.g. Firebug. I get:

    >>> var layerElement = document.getElementById("layer2")
>>> layerElement
<p id="layer2" style="left: 130px;">
>>> layerElement.style.left
"130px"
>>> layerElement.style.left -= 10
NaN

    Notice that the value of layerElement.style.left is a string, “130px”. No wonder when we try to subtract 10 from it, we get NaN.

    The reason the old code works is that js apparently does some magic when you assign

    layerElement.style.left = x

    to convert x to a string with dimensional units.

    • 0