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

Question

I am using echo nest API and can't find the problem with my button, why doesn't trigger my function at all! 我正在使用echo nest API，但找不到按钮的问题，为什么根本不触发我的函数！ I check my button in chrome debug and shows no activity. 我在chrome调试中检查了我的按钮，但未显示任何活动。

If I enter it trigger the function, but when I click on the button it doesn't trigger my function ?!!! 如果我输入它会触发功能，但是当我单击按钮时它不会触发我的功能吗？！！

I need another pair of eyes to check my codes , pleaseeee :) 我需要另一双眼睛来检查我的密码，请：e）

Thank you! 谢谢！

//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 --- > F12 --- > Network should display all the activities; 在chrome ---> F12 --->网络中应显示所有活动； however mine is empty ... please correct me if I'm wrong? 但是我是空的...如果我错了请纠正我吗？

Answer 1

try this one 试试这个

html 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 JavaScript的

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

Answer 2

Put your 'script' block at the end of your html code. 将您的“脚本”块放在html代码的末尾。 Browsers parses html document in top-down fashion and when your following method parsed by your browser 浏览器以自上而下的方式以及当您的浏览器解析以下方法时解析html文档

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

, it doesnt know what 'searchButton' is, since 'searchButton' hasn't been parsed yet. ，它不知道什么是“ searchButton”，因为尚未解析“ searchButton”。 Thus it is unable to add event listener to your button and it doesn't work on click 因此，它无法将事件侦听器添加到您的按钮，并且在单击时不起作用

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-03-20 07:08:14

解决方案2
0 2014-03-20 06:20:13

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-03-20 07:08:14

解决方案2 0 2014-03-20 06:20:13

解决方案1
1 已采纳 2014-03-20 07:08:14

解决方案2
0 2014-03-20 06:20:13