JavaScript 不会运行，表示元素为空，但代码运行s 在 fiddle

Question

我正在使用 java 配置构建 thymeleaf 和 spring 项目。当我在 jsfiiddle 中尝试这段代码时它工作正常，但是当我在我的应用程序中尝试运行时我得到这个： TypeError: document.getElementById(...) is null.

javascrips 的导入没有任何问题，源代码渲染了它们，html 就好了。

代码：

HTML:

<a href="#" id="buybutton" th:id="buybutton" th:text="#{cart.buy}">Buy</a>

JavaScript:

document.getElementById('buybutton').addEventListener("click", function(e){
   console.log("bought"); 
});

Thymeleaf 配置（如果它很重要）：

@Configuration
public class ThymeleafConfig {

@Bean
public ServletContextTemplateResolver templateResolver() {
    ServletContextTemplateResolver resolver = new ServletContextTemplateResolver();
    resolver.setPrefix("/WEB-INF/pages/");
    resolver.setSuffix(".html");
    resolver.setTemplateMode("HTML5");
    resolver.setOrder(1);
            resolver.setCacheable(false);
            resolver.setCharacterEncoding("UTF-8");

    return resolver;
}

}

Answer 1

您应该仅在 DOM 准备就绪时添加点击事件。

注意： 在 jsfiddle 的情况下，这是 默认行为 。

document.addEventListener("DOMContentLoaded", function(event) { 
  document.getElementById('buybutton').addEventListener("click", function(e){
   console.log("bought"); 
  });
});

JavaScript 不会运行，表示元素为空，但代码运行s 在 fiddle

JavaScript won't run, says element is null, but code runs in fiddle

html

javascript

spring-mvc

thymeleaf

JavaScript 不会 运行，表示元素为空，但代码 运行s 在 fiddle

JavaScript won't run, says element is null, but code runs in fiddle

html

javascript

spring-mvc

thymeleaf

JavaScript 不会运行，表示元素为空，但代码运行s 在 fiddle