当 Javascript 函数放置在 HTML 标头部分时，Javascript 事件“onclick”不呈现结果答案

【问题标题】：Javascript event 'onclick' not rendering result when the Javascript function is placed in HTML header section当 Javascript 函数放置在 HTML 标头部分时，Javascript 事件“onclick”不呈现结果
【发布时间】：2017-12-28 06:05:57
【问题描述】：

我正在尝试运行一个简单的 Javascript 代码，该代码会在单击按钮时更改元素的背景颜色。下面是代码，但它不起作用。请帮忙。

<html>
<head>
    <title>check</title>
        
    <script type='text/javascript'>
        
            
        function checkRun(){
            var btn = document.querySelector('button');
            btn.onclick = function() {
                 btn.style.backgroundColor='red';
            }
        }

    </script>

</head>

<body>

        <input type='text' name='checkName' id='check1' value='val1' class='class1'/><br><br>
        <button type='button' name='checkName' id='check3' value='val3' class='class3'>Hello</button>



</body>
</html>

虽然下面的代码有效，但我不想在 HTML 属性中使用事件。

<html>
<head>
    <title>check</title>
        
    <script type='text/javascript'>
        
            
        function checkRun(){
            var btn = document.querySelector('button');
            
                 btn.style.backgroundColor='red';
            
        }

    </script>

</head>

<body>

        <input type='text' name='checkName' id='check1' value='val1' class='class1'/><br><br>
        <button type='button' name='checkName' id='check3' value='val3' class='class3' onclick='checkRun()'>Hello</button>



</body>
</html>

【问题讨论】：

标签： javascript event-handling dom-events

【解决方案1】：

下面是代码，但它不起作用。请帮忙。

因为你还没有调用这个方法。

加载 DOM 后，您需要在 DOMContentLoaded 事件上调用它。

document.addEventListener( "DOMContentLoaded", checkRun );

只需将此代码放在同一个脚本标记中即可。

演示

<html>
<head>
  <title>check</title>
  <script type='text/javascript'>
    function checkRun() {
      var btn = document.querySelector('button');
      btn.onclick = function() {
        btn.style.backgroundColor = 'red';
      }
    }
    document.addEventListener("DOMContentLoaded", checkRun);
  </script>
</head>
<body>
  <input type='text' name='checkName' id='check1' value='val1' class='class1' /><br><br>
  <button type='button' name='checkName' id='check3' value='val3' class='class3'>Hello</button>
</body>
</html>

【讨论】：

效果很好！！但是，其他用户提供的答案也有效。最佳做法是什么？
最佳实践可能取决于您将在实际用例中使用它的上下文。您可以搜索window.onload与document.addEventListener等之间的差异

【解决方案2】：

您需要调用该方法，以便它在您的脚本中工作写下这一行

checkRun();

看下面的例子

function checkRun(){
            var btn = document.querySelector('button');
            btn.onclick = function() {
                 btn.style.backgroundColor='red';
            }
        }
checkRun()

<input type='text' name='checkName' id='check1' value='val1' class='class1'/><br><br>
        <button type='button' name='checkName' id='check3' value='val3' class='class3'>Hello</button>

【讨论】：

【解决方案3】：

您需要调用您的checkRun() 函数。

<html>
<head>
    <title>check</title>

    <script type='text/javascript'>


        function checkRun(){
            var btn = document.querySelector('button');
            btn.onclick = function() {
                 btn.style.backgroundColor='red';
            }
        }
        
        window.onload= checkRun;

    </script>

</head>

<body>

        <input type='text' name='checkName' id='check1' value='val1' class='class1'/><br><br>
        <button type='button' name='checkName' id='check3' value='val3' class='class3'>Hello</button>



</body>
</html>

【讨论】：

【解决方案4】：

只需将它放在窗口 onload 函数中并删除 checkrun 函数。它会起作用的

<html>
<head>
    <title>check</title>

    <script type='text/javascript'>

  window.onload = function(){
       
            var btn = document.querySelector('button');
            btn.onclick = function() {
                 btn.style.backgroundColor='red';
            }
        
        }

    </script>

</head>

<body>

        <input type='text' name='checkName' id='check1' value='val1' class='class1'/><br><br>
        <button type='button' name='checkName' id='check3' value='val3' class='class3'>Hello</button>



</body>
</html>

【讨论】：

【解决方案5】：

您需要在文档准备好时调用checkRun 方法

<script type='text/javascript'>

    document.addEventListener("DOMContentLoaded", function (event) {
        console.log("DOM fully loaded and parsed");
        checkRun();
    });

    function checkRun() {
        var btn = document.querySelector('button');
        btn.style.backgroundColor = 'red';

    }

 </script>

如果你使用Jquery，你也可以这样做

<script type='text/javascript'>

$(document).ready(function () {
checkRun();

function checkRun() {
    var btn = document.querySelector('button');
    btn.style.backgroundColor = 'red';

}
});

</script>

【讨论】：