JavaScript和WordPress：addEventListener找不到按钮单击

Question

为防止出现诸如“是否加载了JavaScript文件？”之类的答案。 ->是的，它已加载到页面的页脚部分！ 我已经通过显示到控制台的简单消息检查了该消息！

但：

我有一个带有按钮的页面：

<button id="portfolio-posts-btn">Load portfolio related blog posts</button>

还有一个文件main.js：

var portfolioPostsBtn = document.getElementById('portfolio-posts-btn');
var portfolioPostsContainer = document.getElementById("portfolio-posts-container");

if (portfolioPostsBtn) {
  portfolioPostsBtn.addEventListener("click", function () {
    console.log("the button was clicked!");
  });
}

the button was clicked!的文字the button was clicked! 应该显示在控制台中，但保持空白！ 显然，无法识别按钮单击，因此var PortfolioPostsBtn为false，或者为NULL ...->未触发方法addEventListener() ？

我看不出原因。 我检查了拼写，应该使用单引号还是双引号？ 请帮忙？

谢谢！

Answer 1

我以前曾经发生过这种情况，因为有两种方法可以做到这一点，所以我只是使用了另一种方法。

第一个是onclick="function()" ，它用作元素内的属性。 例如：

 function clicked(){ alert("button clicked"); } 

 <button onclick="clicked();">Press me</button> 

exaplaination：当您将此属性添加到此元素时，我确实相信其他一些内容，当单击按钮时，将运行attibute引号内的指定代码。 它不必是数字，例如onclick="alert(12+4/2);" 。 但这比使用此版本的JavaScript更像HTML

另一种方法是使用您所拥有的（对我而言）要困难得多的东西。 这是我的例子

 var b = document.getElementById("btn"); b.addEventListener("click", blogged); function blogged(){ alert("this post has been blogged"); } 

 <button id="btn">Blog it</button> 

这方面与JavaScript和事件侦听器有更多关系。 但是代码的问题在于，在调用if语句之后放置事件侦听器。 这是我的解决方案

 var portfolioPostsBtn = document.getElementById('portfolio-posts-btn'); portfolioPostsBtn.addEventListener("click", function(){ check(); }); function check(){ if(portfolioPostsBtn){ console.log("posted"); } } 

 <button id="portfolio-posts-btn">press this to post<button> 

Answer 2

大概您已经决定不使用jQuery。 您需要将代码包装在事件侦听器中，以便在DOM准备就绪时执行代码。

document.addEventListener("DOMContentLoaded", function(event) {
  var portfolioPostsBtn = document.getElementById("portfolio-posts-btn");
  var portfolioPostsContainer = document.getElementById("portfolio-posts-container");
  if (portfolioPostsBtn) {
    portfolioPostsBtn.addEventListener("click", function () {
      console.log("the button was clicked!");
    });
  }
});

Answer 3

答案可以在文件page-portfolio.php的上传中找到！

我发现后来添加的id="portfolio-posts-btn"没有更新-可能是我的错误，或者Brackets中的SFTP上传扩展名-我没有看到错误消息！

无论如何，问题解决了！

还有一个问题：“是否有方法检查id存在？”。 这样可以使生活更轻松！

所有贡献者，谢谢您的回答！