<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>模仿短信对话</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
#div1 {
width: 300px;
height:300px;
border: 1px solid red;
position: absolute;
}
#div2{
width: 240px;
height: 200px;
border:1px solid black;
padding: 10px;
margin: 10px auto}
#div3{float: left}
#button{height: 40px;width: 60px;
margin-left: 20px}
#text{ height: 40px;width:150px;line-height: 20px;
margin-left: 40px}
#img1{height: 20px;width: 20px;border: 1px solid black;
}
</style>
<script>
window.onload=function oo(){
var oDiv2=document.getElementById("div2");
var oBtn1=document.getElementById("button1");
var oText=document.getElementById("text");
var oImg=document.getElementById("img1");
var arrUrl=["img1.jpg","img2.jpg"]
var num=0
oBtn1.onclick=function(){
num=0;
oImg.src=arrUrl[num];
oDiv2.innerHTML=oText.value;
oText.value="";
}
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
<div id="div3">
<img id="img1">
<input id="text" type="text">
<input id="button1" type="button" value="发送">
</div>
</div>
</body>
</html>
2 回答
已采纳
陈士愚
TA贡献44条经验 获得超44个赞
var oImg = document.getElementById("img1");
var arrUrl = ["img1.jpg", "img2.jpg"];
var num = 0;
oBtn1.onclick = function() {
num = 0;
oImg.src = arrUrl[num];
oDiv2.innerHTML = oText.value;
oText.value = "";
};我摘出来的这段代码，是你用来设置图片的。可以看到，你的html代码中本身没有为#img1设置src属性，js代码里也没有初始化，只在#button1的点击事件里设置了为图片改变src属性；所以页面刚打开的时候，img1位置肯定是空白的；你的代码逻辑和你标题描述的现象是符合的。
当你点击发送按钮时，出发click事件，这时候为oImg对象（即#img1）设置src属性，并且因为每次重置num=0，所以始终使用arrUrl[0]（img1.jpg）。
所以如果你的想法是默认开始的时候显示img2.jpg，当点击发送时显示img1，那么可以这么写：
<script>
window.onload = function oo() {
var oDiv2 = document.getElementById("div2");
var oBtn1 = document.getElementById("button1");
var oText = document.getElementById("text");
var oImg = document.getElementById("img1");
var arrUrl = ["img1.jpg", "img2.jpg"];
var num = 1;
oImg.src = arrUrl[num]; // 默认显示img2.jpg，当用户点击发送时，更换为img1.jpg
oBtn1.onclick = function() {
num = 0;
oImg.src = arrUrl[num];
oDiv2.innerHTML = oText.value;
oText.value = "";
};
};
</script>
- 2 回答
- 0 关注
- 1598 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消