代码之家 › 专栏 › 技术社区 › Nagaraj Tantri

图像在浏览器中不会被替换

html javascript

Nagaraj Tantri · 技术社区 · 14 年前

我在做一个定位图片的练习,从一本书。它说,使用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";

}

我有Google Chrome的默认浏览器

2 回复 | 直到 14 年前

Nick Craver 14 年前

因为它是 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 .

Jacob 14 年前

你有一个大写的问题(或在你的文章中的拼写错误)。您的页面中有一个id为的元素 yCOd ,但您的代码正在查找 yCod

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前