代码之家 › 专栏 › 技术社区 › Student

带有修改的javascript示例不起作用

javascript

Student · 技术社区 · 16 年前

我得到了一个“Making Layers that Move”javascript示例代码,并修改了左右移动的函数,创建了以下代码(我对修改后的行进行了注释,这样您就可以看到它是怎样的了):

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

现在,为什么修改后就不起作用了?

2 回复 | 直到 16 年前

LarsH 16 年前

尝试在js调试器中运行它,例如Firebug。我得到:

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

请注意layerElement.style.左是一个字符串,“130px”。难怪当我们试着从中减去10时,我们得到了NaN。

旧代码工作的原因是js显然在赋值时发挥了一些魔力

layerElement.style.left = x

将x转换为具有标注单位的字符串。

Anpher 16 年前

var step = 10;
function moveRight(){
  var myNode = document.getElementById("layer2");
  myNode.style.left = parseInt(myNode.style.left)+step;
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前