Question

我正在使用java配置构建百万美元和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准备好后才应添加click事件。

注意：对于jsfiddle，这是默认行为。

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

JavaScript不会运行，说元素为空，但代码运行在小提琴中

1 个答案: