为什么我的HTML代码在Javascript代码之前运行[重复]

Question

这个问题在这里已有答案：

• How to invoke a JSF managed bean on a HTML DOM event using native JavaScript? 1回答

我有多个帖子要在单页中显示。我的Java代码动态生成html，并为每个div分配一个数字。

<div onclick=\"postClicked(" + i + ");\" style=\"cursor: pointer;\">

当我点击一个div时，我想去ReadPost.xhtml页面并显示有关点击帖子的详细信息。

function postClicked(id) {  
  localStorage.setItem( 'objectToPass', id );
  location.href = 'ReadPost.xhtml';
}

在ReadPost页面中，我有以下代码：

<h:inputHidden id="postInput" value="#{postManager.clickedPostId};"/> 
 <script>                    
   var myData = localStorage['objectToPass'];
   document.getElementById("postInput").value = myData;
 </script>          

<h:outputText value="#{postManager.displaySinglePost()}" escape="false" />

我想用localStorage中的数据设置隐藏的输入值。这样当displaySinglePost（）方法运行时，clickedPostId将会更新，我可以显示具有正确帖子ID的页面。但是，postManager.displaySinglePost（）在脚本之前运行。如何在调用postManager.displaySinglePost（）方法之前运行脚本？

Answer 1

您可能在dom中的按钮之前注入了javascript。要解决此问题，请在事件中包装您的javascript以确保您的dom已加载：

document.addEventListener("DOMContentLoaded", function(event) { 
Your javascript goes here
 });