> <script type="text/javascript"
src="">
</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 ?
> <script type="text/javascript"
src="http://maps.google./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 ?
Share Improve this question asked Feb 26, 2011 at 12:58 Bunny RabbitBunny Rabbit 8,41117 gold badges69 silver badges108 bronze badges 2- the whole markup not posted here for brevity's sake , also the doc type is html making it a html5 document. – Bunny Rabbit Commented Feb 26, 2011 at 12:59
-
Related: JS function named
animatedoesn't work in Chrome, but works in IE. – Sebastian Simon Commented Apr 6, 2022 at 20:19
2 Answers
Reset to default 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...]
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.