JavaScript top and left positions not working as expected
Question
I have this code in JavaScript on a HTML file but when I run it the image that I have doesn't move when I change top or left. Why is this happening, I have been searching for hours and copying tones of code to see if it works but nothing. Why is this happening and how do I fix it? Here is the code:
<html>
<head>
<title>Website</title>
<h1 id="txt_1">Value: 0</h1>
<h2 id="txt_2">Increments: 0</h2>
<img src="---" id="img_1" style="width:40px;height:40px;top:1000px;left:100px">
</head>
<body>
<button type="button" onclick="down();"><</button>
<button type="button" onclick="up();">></button>
X<input type="text" id="box_x" value=0></input>
Y<input type="text" id="box_y" value=0></input>
</body>
<footer>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
</canvas>
</footer>
<script>
var val = 0;
var add = 0;
function up(){
add++;
updateUI();
}
function down(){
add--;
updateUI();
}
function updateUI(){
document.getElementById("txt_1").innerHTML = "Value: " + val;
document.getElementById("txt_2").innerHTML = "Increments: " + add;
document.getElementById("img_1").style.top = 80 + "px";
}
function update(){
val+=add;
document.getElementById("myCanvas").height = val + 10;
document.getElementById("myCanvas").width = val + 10;
document.getElementById("txt_1").innerHTML = "Value: " + val;
}
setInterval(update,100);
</script>
</html>
1 answers
solution1
0 2015-07-20 12:06:26
I don't see any defined styles or link to a .css file. But, your image should have a "position:absolute" in its style somewhere if you want to move it around.
Use this:
<img src="---" id="img_1" style=""position:absolute;width:40px;height:40px;top:1000px;left:100px">
Instead of this:
<img src="---" id="img_1" style="width:40px;height:40px;top:1000px;left:100px">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.