Question

我正在使用echo nest API并且无法找到我的按钮的问题，为什么不能触发我的功能！我在chrome debug中检查了我的按钮并且没有显示任何活动。

如果我输入它会触发该功能，但是当我点击按钮时它不会触发我的功能？!!!

我需要另外一双眼来检查我的代码，请见：）

谢谢！

//Search artists.
  function search(){      
      inputField = document.getElementById("inputField");

      callApiSearch ( urlRoot + inputField , parseData);

    }

        //register click event handler for searchButton
      function start(){
          var searchButton = document.getElementById( "searchButton" );
          searchButton.addEventListener("click", search, false); 
        } // end function start

        window.addEventListener( "load", start, false );  
    </script>   



    </head>
    <body>
        <form id="searchForm" action="#">
    <center>
    <table>
        <thead style="align-text:center" ><img src="images/Logo.png" style="align:center"><br/></thead>

        <tr>
            <td>Search Artist:</td>
            <td> <input id="inputField" type="search"> </td>
            <td> <input id="searchButton" type="button" value="Search"></td>
        </tr>
    </table>
            <div id="results"></div>
    </center>
        </form>



    </body>
    </html>

in chrome ---＆gt; F12 ---＆gt;网络应该显示所有活动;然而，我的是空的......如果我错了，请纠正我？

Answer 1

尝试这个

HTML

<form action="#" id="searchForm" name="searchForm">
        <img src="images/Logo.png" style="align:center" /><br />

        <table>
            <tr>
                <td>Search Artist:</td>

                <td><input id="inputField" type="search" /></td>

                <td><input id="searchButton" type="button" value=
                "Search" /></td>
            </tr>
        </table>

        <div id="results"></div><br />
    </form>

的javascript

$("#searchButton").click(function() {
    inputField = document.getElementById("inputField");
    callApiSearch(urlRoot + inputField, parseData);
});

Answer 2

点击你的脚本＆＃39;阻止你的HTML代码结束。浏览器以自上而下的方式解析html文档，并且当您的浏览器解析以下方法时

//register click event handler for searchButton
      function start(){
          var searchButton = document.getElementById( "searchButton" );
          searchButton.addEventListener("click", search, false); 
        } // end function start

，它不知道＆＃39; searchButton＆＃39;是的，因为＆＃39; searchButton＆＃39;还没有解析过。因此，它无法向您的按钮添加事件侦听器，并且它无法单击

为什么我的HTML按钮不会触发启动功能？

2 个答案: