Question

我正在练习从图书中定位图像。它说，使用DOM，即图像的位置，顶部和左侧值，我们可以使用JavaScript在浏览器窗口中移动图像。

事情是我有图像显示但是当我输入坐标时它不会移位到它的新值。如果有人能告诉我哪里出错了？

这是HTML文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="newjavascript.js">
    </script>
  </head>
  <body>
      <form action="">
          <p>
              Xcordinate : <input type="text" id="xCod" /><br/>
              Ycordinate : <input type="text" id="yCOd" /><br/>
          </p>
          <br/>
          <input type="submit" value="Set the Coordinates" onclick = "moveIt('image', document.getElementById('xCod').value,
              document.getElementById('yCod').value )" />
      </form>
      <div id="image" style="position: absolute; left:0; top:200px" >
          <img src="testing.jpg" alt="Picture Cannot be displayed" />
      </div>
  </body>
</html>

和JavaScript文件

function moveIt (movee, newTop, newLeft){
    dom = document.getElementById(movee).style;

    dom.top=newTop+"px";
    dom.left=newLeft+"px";

}

我有谷歌浏览器的默认浏览器

Answer 1

因为它是type="submit"按钮，它会回发并且您再次看到同一页面，您需要return false;来阻止提交，如下所示：

<input type="submit" value="Set the Coordinates" onclick = "moveIt('image', document.getElementById('xCod').value,
          document.getElementById('yCod').value); return false;" />

在设置演示时，您的元素ID也已关闭，请注意：

Ycordinate : <input type="text" id="yCOd" /><br/>

应该是：

Ycordinate : <input type="text" id="yCod" /><br/>

You can test it out (with both of the above fixes) here

Answer 2

您有大写问题（或帖子中的拼写错误）。您的网页中有一个ID为yCOd的元素，但您的代码正在寻找ID yCod

图片不会在浏览器中被取代

2 个答案: