我可以得到按钮来调用该函数，但不能从搜索引发的if语句调用，但可以调用任何其他函数就好了

时间：2013-08-01 22:09:58

标签： 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: 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>

//这不起作用

//用于测试搜索值并根据结果调用函数的函数除了函数我试图调用之外，任何函数都可以在这里工作

<script type="text/javascript">
       function doSearch() {
            searchvalue = document.searchbox.searchterm.value 
            if (searchvalue == "1") {
                initialize2();
            }
            else {
               alert("no good");
            }
        }

</script>

//搜索表单

   <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" ONCLICK="Javascript:doSearch()" />
    </form>
 </div>

//完整代码

   <!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>

// css 

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;
}

2 个答案:

答案 0 :(得分：1)

e.preventDefault();

无法添加评论。

答案 1 :(得分：1)

阻止Form的默认操作。也不要定义内联事件，因为这是一种不好的做法。直接在脚本中绑定事件，以便您可以使用功能分离结构。

<强> 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>

<强> JS 

<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>

同样将事件附加到另一个按钮。

的更新

<强> HTML 

<!-- 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 -->

<强>的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 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();

<强> *Check Fiddle *

相关问题
最新问题