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! 应该显示在控制台中，但它保持为空！ 显然，无法识别按钮单击，因此 var portfolioPostsBtn 为 false，或 NULL... -> 方法 addEventListener() 未被触发？

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

谢谢！

Answer 1

我以前也遇到过这种情况，因为有两种方法可以做到这一点，我只是使用了另一种。

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

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

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

说明：当您将此属性添加到此元素时，我相信其他一些人在单击按钮时会运行属性引号内的指定代码。它不一定是数字，例如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" 没有更新 - 可能是我的错误，或者括号中的 SFTP 上传扩展 - 我没有看到错误消息！

不管怎样，问题解决了！

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

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