2
> <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    marker = new google.maps.Marker({
    position : latlng,
    title : "hello world",
    draggable : true
    });
   marker.setMap(map)
  }
  function write(){
    //var positon = marker.getPosition()
    alert('position')
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
  <input type='button' value ='position' onClick="write()">
</body>
</html>

whenever i click on the button called position the map disappears why is that so ?

Bunny Rabbit
  • 8,213
  • 16
  • 66
  • 106

2 Answers2

15

+1 Jens's answer is correct. However saying write should not normally give you document.write. window properties act as globals, but document properties do not:

function write(){
    alert('position')
}

mybutton.onclick= function() {
    write(); // this is fine!
};

The trick is that when you write an inline event handler attribute, the properties of that element and its ancestor elements get dumped into your scope. I'm not sure this is actually documented anywhere, and certainly the exact behaviour will vary between browsers, but it's an old, well-established, and highly dangerous feature:

<input onclick="alert(value);" value="A"/>  // alerts A

<form method="get"><input onclick="alert(method)"/></form> // alerts get

Because document is the top ancestor of all DOM nodes in the page,

<div onclick="alert(write)"/> // alerts the `document.write` function

This means that you can't refer to any global variable or function in an inline event handler attribute that happens to have the same name as a member of an ancestor Node. And since new versions of browsers are released all the time, introducing new DOM properties, any use of any global variable or function in an event handler attribute is likely to break in the future.

This is another reason we never use inline event handler attributes.

[All these examples assume that alert resolves to window.alert, ie that no-one has happened to put an alert property on any of the ancestor DOM nodes...]

bobince
  • 528,062
  • 107
  • 651
  • 834
  • 1
    +1 for a great answer. I know write() would usually refer to window.write(), and I suspected the inline event handler was to blame for the strange scope (a side effect of Javascript closures, perhaps?), but I didn't actually know about the scary "alert(method)" trick – Jens Roland Mar 01 '11 at 22:08
2

write() is a reserved Javascript function -- when you call it, you are executing document.write() which (since you are calling it after the document has already finished writing) will rewrite the whole page.

Try renaming it myWrite() instead.

Jens Roland
  • 27,450
  • 14
  • 82
  • 104
  • 2
    `write` is not reserved. It's a method of `document`, but it's not a reserved function. However, because of the event attributes being used, `document` is acting like `window` (variables get pulled from there, sorta). So when you call `write` in an avent attribute, you're calling `document.write`, not `window.write`. – Nate Higgins Oct 02 '12 at 15:35
  • @NatIsGleek: You are correct -- bobince already pointed it out (and his answer has the most votes for that reason) – Jens Roland Oct 03 '12 at 20:23