Question

我想使用id按钮调用myfunc（），我是怎么做到的？我不想只使用id来调用这个函数..我需要在脚本中添加哪些代码？

<html>

    <head>
        <script>
            function myfunc() {

                var count = 0;
                var line = 0;
                var i = 0;
                var phrase = document.getElementById('phrase').value;
                var filter = document.getElementById('filter').value;
                var arr = phrase.split(" ").reverse();

                for (i = 0; i < arr.length; i++) {

                    if (arr[i].search(filter) == -1) {
                        if (line % 2 == 0) {
                            document.getElementById('words').innerHTML += " <u><span class='word'  style='background:#D8D8D8; border:1px solid black; ' >
 " + arr[i] + "</span></u>";
                            line++;
                        } else {
                            document.getElementById('words').innerHTML += " <span class='word'  style='background:#D8D8D8; border:1px solid black; '>
 " + arr[i] + "</span>";
                            line++;
                        }
                    }

                    if ((arr[i].search(filter) != -1) && (filter)) {
                        count++;
                    }

                }
                document.getElementById('count').innerHTML = count + " word(s) filtered out";

            }
        </script>
    </head>

    <body>
         <h1>Sentence Reverser!</h1>

        <div>Phrase:
            <input id="phrase" type="text" size="40" />
        </div>
        <div>Filter:
            <input id="filter" type="text" size="10" />
        </div>
        <div>
            <button id="go">Go!</button>
        </div>
        <div id="words"></div>
        <div id="count"></div>
    </body>

</html>

Answer 1

要尽可能短，您可以在HTML之后或在文档加载事件中添加此脚本：

go.onclick = myfunc

但这远非最佳做法。更好的做法是在按钮上添加onclick属性：

<button id="go" type="button" onclick="myfunc()"> Go! </button>

Answer 2

您可以添加以下内容

document.getElementById('go').onclick = myfunc

元素加载后。实际上，这意味着在元素下方，或在窗口加载事件中的头部。

Answer 3

您可以使用addEventListener()在window.onload内附加特定事件的功能，如下所示。

window.onload = function (){
    document.getElementById('go').addEventListener('click', myfunc);

    function myfunc(){
        //your all code be here
    }
}

DEMO

从按钮ID调用javascript函数

3 个答案: