Javascript 我可以通过按钮调用函数,但无法从搜索设置的if语句调用,但可以调用任何其他函数
//此功能通过按钮工作,而不是通过搜索Javascript 我可以通过按钮调用函数,但无法从搜索设置的if语句调用,但可以调用任何其他函数,javascript,Javascript,//此功能通过按钮工作,而不是通过搜索 function initialize2() {// google maps load function var mapOptions = { center: new google.maps.LatLng(33.319914, 44.304771), zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI
function initialize2() {// google maps load function
var mapOptions = {
center: new google.maps.LatLng(33.319914, 44.304771),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
marker.setMap(map); // set marker
}
google.maps.event.addDomListener(window, 'load', initialize); // initializ map
//这个按钮很好用
<div id="sscbc">
<div id="ssi"></div>
<div id="sscb">
<button onclick="initialize2()">Enter ID</button> // loads map with marker
</div>
</div>
e.preventDefault()代码>
尚无法添加注释。阻止表单的默认操作。也不要定义内联事件,因为这是一种不好的做法。直接在脚本中绑定事件,这样就可以用功能分离出结构
HTML
<div id="searchwrapper">
<form name="searchbox">
<input type="text" class="searchbox" name="searchterm"/>
<input type="image" src="images/opacbox1.png" class="searchbox_submit" value="Search" />
</form>
</div>
<div id="sscbc">
<div id="ssi"></div>
<div id="sscb">
<button onclick="initialize2()">Enter ID</button> // loads map with marker
</div>
</div>
<!-- Did not close the div properly -->
<div id="map-canvas"></div>
<!-- Added an id for the button -->
<button id="button1">Enter ID</button>
<form name="searchbox">
<input type="text" class="searchbox" name="searchterm" />
<input type="image" src="images/opacbox1.png" class="searchbox_submit" Id="imageButton" value="Search" />
</form>
<!-- Did not close the form properly -->
*您需要防止表单的默认行为。默认情况下,当单击其中的按钮时,表单会提交。我不确定如何防止表单的取消行为以获得我想要的结果。是否有任何建议或示例?我非常困惑,为什么如果我编写任何其他函数,if语句调用它时没有问题。它只是不能调用GoogleMapsAPI函数。我对该api不熟悉,因此我认为它与函数有关。错误:无法获取属性“addEventListener”的值:对象为null或未定义我编写的代码中有一个小错误elems.addE
应该是elem.addE
。。有一个额外的s
。如果有多个元素具有相同的类,则为该元素提供一个ID
。然后使用document.getElementById('id')
选择元素,尝试使用id代替错误:对象不支持属性或方法“getElementsByID”,为什么这是唯一一个不能与原始if语句一起使用的函数?
<!DOCTYPE html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="style2.css">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&sensor=true">
</script>
<script type="text/javascript">
var myLatlng = new google.maps.LatLng(33.319914, 44.304771);
var marker = new google.maps.Marker({map: map, position:myLatlng, title:"Hello World!"});
var map = null;
function initialize()
{
var mapOptions =
{
center: new google.maps.LatLng(33.319914, 44.304771),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// marker.setMap(map);
}
function initialize2()
{
var mapOptions =
{
center: new google.maps.LatLng(33.319914, 44.304771),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<head>
<body>
<div id="map-canvas"/>
</div>
<button onclick="initialize2()">Enter ID</button>
<form name="searchbox">
<input type="text" class="searchbox" name="searchterm"/>
<input type="image" src="images/opacbox1.png" class="searchbox_submit" Id="imageButton" value="Search" />
<script type="text/javascript">
function doSearch(e)
{
var elem = document.getElementsById('imageButton')[0];
elem.addEventListener('click', doSearch);
e.preventDefault();
searchvalue = document.searchbox.searchterm.value
if (searchvalue == "1")
{
initialize2();
}
else
{
alert("no good");
}
}
</script>
</body>
</html>
body
{
}
#map-canvas
{
height: 500px;
width: 500px;
margin: 50px 50px 50px 50px;
}
#searchwrapper
{
width:310px;
height:40px;
background-image:url('images/searchbox6.png');
background-repeat:no-repeat;
padding:0px;
margin:0px;
position:relative;
}
#searchwrapper form
{
display: inline;
}
.searchbox
{
border:0px;
background-color:transparent;
position:absolute;
top:4px;
left:9px;
width:256px;
height:28px;
color: #fff;
}
.searchbox_submit
{
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:265px;
width:32px;
height:28px;
}
<div id="searchwrapper">
<form name="searchbox">
<input type="text" class="searchbox" name="searchterm"/>
<input type="image" src="images/opacbox1.png" class="searchbox_submit" value="Search" />
</form>
</div>
<div id="sscbc">
<div id="ssi"></div>
<div id="sscb">
<button onclick="initialize2()">Enter ID</button> // loads map with marker
</div>
</div>
<script type="text/javascript">
var elem = document.getElementsByClassName('searchbox_submit')[0];
elem.addEventListener('click', doSearch);
function doSearch(e) {
e.preventDefault();
searchvalue = document.searchbox.searchterm.value
if (searchvalue == "1") {
initialize2();
}
else {
alert("no good");
}
}
</script>
<!-- Did not close the div properly -->
<div id="map-canvas"></div>
<!-- Added an id for the button -->
<button id="button1">Enter ID</button>
<form name="searchbox">
<input type="text" class="searchbox" name="searchterm" />
<input type="image" src="images/opacbox1.png" class="searchbox_submit" Id="imageButton" value="Search" />
</form>
<!-- Did not close the form properly -->
var myLatlng = new google.maps.LatLng(33.319914, 44.304771);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: "Hello World!"
});
var map = null
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(33.319914, 44.304771),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
marker.setMap(map);
}
function doSearch(e) {
// The 2 lines below have to be moved out of the function
// As this is the place where you are binding the event
// So this function will never be called when event is not attached
///var elem = document.getElementsById('imageButton')[0];
///elem.addEventListener('click', doSearch);
e.preventDefault();
var searchvalue = document.searchbox.searchterm.value
if (searchvalue == "1") {
initialize();
} else {
alert("no good");
}
}
// This was calling initialize2
//google.maps.event.addDomListener(window, 'load', initialize2);
// You can directly call initialize and there is
// no difference between initialize and initialize2
google.maps.event.addDomListener(window, 'load', initialize);
// Attach the event to the button
var button = document.getElementById('button1');
button.addEventListener('click', function() {
initialize()
});
// Attach the event to the Image
// Was var search = document.getElementsById('imageButton')[0];
// It is getElementById without the s
// Remember that ID is unique so no plural
// But className and tags are plural
// SO you have a s in them
// Also index is not required
var search = document.getElementById('imageButton');
search.addEventListener('click', doSearch);
// Call the function so that map is initialized when called
// You can also attach this to the window load event if you want
initialize();