有没有朋友熟悉js操作dom的阿？

mmxcq · #1

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js operation dom</title>
<script type="text/javascript">

function create()
{
var imgElement=document.getElementById("add");
var buttonElement=document.getElementById("change");
imgElement.src="images/q.jpg"
buttonElement.onclick=replace;
}
function replace()
{
var imgElement=document.getElementById("add");
var buttonElement=document.getElementById("change");
imgElement.src="images/1.jpg";
buttonElement.onclick=create;
}

</script>
</head>
<body id="body">
<img id="add" src="images/1.jpg" />
<input id="change" type="button" value="改变图片" onclick="create()"/>
</body>
</html>
上面这个是一切正常
但是为什么我把它换成全局变量的时候就不行了阿？就是这两个变量imgElement buttonElement

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js operation dom</title>
<script type="text/javascript">
var imgElement=document.getElementById("add");
var buttonElement=document.getElementById("change");
function create()
{
imgElement.src="images/q.jpg"
buttonElement.onclick=replace;
}
function replace()
{

imgElement.src="images/1.jpg";
buttonElement.onclick=create;
}

</script>
</head>
<body id="body">
<img id="add" src="images/1.jpg" />
<input id="change" type="button" value="改变图片" onclick="create()"/>
</body>
</html>

bones7456 · #2

是执行顺序不对，后面那个那两行是在浏览器加载head段的时候就执行了，而那时候body都还么加载，所以是取不到你要的对象的。

mmxcq · #3

一语惊醒梦中人阿
兄弟谢了你是作什么开发的阿
以后多交流阿
呵呵
你
应该很强
哦

winstars · #4

尽量少用全局变量，容易出问题，出了问题也比较隐蔽