Question

我试图在单击按钮时仅弹出警报消息。

window.onload = function () {
    document.getElementById("search-button").addEventListener("click", () => {
        alert(document.getElementById("input-text").value)
    })
};

这就是我的脚本，下面是HTML

    <div class="row" style="
            margin-top: 1.5em;
            margin-bottom: 1.5em;">
        <div class="input-group" style="width: 50%; float: none; margin: 0 auto">
            <input type="text" class="form-control" placeholder="Search" id="input-text" />
            <div class="input-group-btn">
                <button id="search-button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </div>

        </div>
    </div>

我要执行的操作是警告我在input元素内键入的文本。我认为可以通过将window.onload放入其中来解决此问题，但仍然是相同的。

有帮助吗？

Answer 1

您的代码看起来不错，但是作为一种替代方法，您可以使用IIFE way

(function() {
  document.getElementById("search-button").addEventListener("click", () => {
    alert(document.getElementById("input-text").value)
  });
})();

<div class="row" style="
            margin-top: 1.5em;
            margin-bottom: 1.5em;">
  <div class="input-group" style="width: 50%; float: none; margin: 0 auto">
    <input type="text" class="form-control" placeholder="Search" id="input-text" />
    <div class="input-group-btn">
      <button id="search-button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-search">Test</span>
                </button>
    </div>

  </div>
</div>

Answer 2

您也可以将其包装在DOMContentLoaded中，而不是使用window.onload事件，另一个脚本可以覆盖您的函数。

window.addEventListener('DOMContentLoaded', (event) => {
    document.getElementById("search-button").addEventListener("click", () => {
        alert(document.getElementById("input-text").value)
    })
});

document.getElementById即使在window.onload之后也给我未定义

2 个答案: