I've been experiencing an issue with my JavaScript code on an HTML file. Despite changing the top or left values, the image does not move as expected. I've spent hours searching for a solution and even tried copying tons of different code snippets to see if it would work, but unfortunately, nothing seems to be fixing the problem. Can someone please help me understand why this is happening and how I can resolve it?
<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>