画像がブラウザ内でずれることはありません

私は書籍から画像を配置する練習をしていました。それは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は、私はそれがtype="submit"ボタンなので、それが戻って投稿しているGoogle Chromeの

出典

2010-11-23 Nagaraj Tantri

一見大丈夫です。「Ctrl + Shift + J」を押し、「Console」をクリックしてJavaScriptエラーを表示してください –

のデフォルトのブラウザを持って

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

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

}

ファイルでありますもう一度同じページが表示されている場合は、return false;に送信してください。

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

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

はまた、これは、あなたの要素IDがオフになっているデモのセットアップに気づきました。

出典

2010-11-23 23:50:03

ありがとうございました:) –

あなたは大文字の問題（またはあなたの投稿のタイプミス）があります。あなたのページにidがyCOdの要素がありますが、コードがyCodのIDを探しています

出典

2010-11-23 23:50:25 Jacob

Thank support for ur assistance :) –

画像がブラウザ内でずれることはありません

答えて

関連する問題