javascript - 我可以获得调用函数的按钮，但无法从搜索引发的 if 语句调用，但可以调用任何其他函数就好了

Question

// 这个函数从按钮而不是搜索中工作

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

score 1 · Accepted Answer

1

e.preventDefault();

还不能添加评论。

于 2013-08-01T22:25:54.457 回答

score 1 · Accepted Answer

防止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();

*检查小提琴*

javascript - 我可以获得调用函数的按钮，但无法从搜索引发的 if 语句调用，但可以调用任何其他函数就好了

2 回答 2

更新

Related

Reference