javascript function does not work when used <!DOCTYPE html>

Question

javascript function does not work when used <!DOCTYPE html>

712 views Asked by Kakar At 10 November 2014 at 20:02

Given the following code:

function move()
{
    dom = document.getElementById('image');
    dom.style.top=event.clientY+"px";
    dom.style.left=event.clientX+"px";
}

<!DOCTYPE html>
 <html>
 <head>
  <title>Program 3</title>
  <script type="text/javascript" src="pr3.js"></script>
 </head>
 <body onmousedown="move();">
  <img src="image.jpg" id="image" width="300px" height="200px" style="position:absolute; left:100px; top:100px;"/>
 </body>
 </html>

Edit

The image only moves when clicked on the image. But when clicked outside the image, it does not move.

However, without <!DOCTYPE html>, it moves wherever clicked inside the browser window and not explicitly on the image.

Original Q&A

There are 2 answers

**apsillers** · Answer 1 · 2014-11-10 20:44:35

Absolutely-positioned elements to not affect the size of their containing element. Consider a case where we use a red-colored <div> instead of <body> as the clickable element:

function move() {
    dom = document.getElementById('image');
    dom.style.top=event.clientY+"px";
    dom.style.left=event.clientX+"px";
}

div { background-color: red; }

<!DOCTYPE html>
<html><body>
    <div onmousedown="move();">
      <img src="image.jpg" id="image" width="300px" height="200px" style="position:absolute; left:100px; top:100px;"/>
    </div>
</body></html>

This snippet should contain a red-colored <div>, but it doesn't, because the <div> is empty or anything that would cause it to have a size greater than 0. The image it contains is absolutely-positioned, which does not affect the size.

Now consider a similar <div> with a CSS-specified size:

function move() {
    dom = document.getElementById('image');
    dom.style.top=event.clientY+"px";
    dom.style.left=event.clientX+"px";
}

div {
      background-color: red;
      width: 400px;
      height: 400px;
  }

<!DOCTYPE html>
<html><body>
    <div onmousedown="move();">
      <img src="image.jpg" id="image" width="300px" height="200px" style="position:absolute; left:100px; top:100px;"/>
    </div>
</body></html>

Now the div is larger than zero, and clicking inside produces the expected result.

this is why your <body> clicks don't work: the <body> has a width and height of 0. If you instead place the onclick listener on the <html> element (which is full-width and full-height by default) or on an element with non-zero dimensions, you'll see your code works. I'm not sure I'd advise putting binding click listeners on the <html> element; I would advise using a CSS-sized <div>.

**Bogdan Savluk** · Answer 2 · 2014-11-10 20:44:49

The problem is that in "quirks mode" body height is set to 100%, while in "standards mode" it is determined by its content. So without doctype(rendering in quirks mode) whole page area is body - so it is clickable, but in "standards mode" it is only image...

if you want you can also do this in "standards mode", by applying following css:

html, body {
  height: 100%;
}

working example: http://plnkr.co/edit/wrHS3b8nQ9tfi5AMWqoE?p=preview

TechQA.

javascript function does not work when used <!DOCTYPE html>

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in DOCTYPE

Popular Questions

Popular Tags

Trending Questions