Question

我正在创建一个简单的JS游戏，它将在浏览器中运行并直接从PC中提取文件。由于这需要将“交叉原点”错误变为一种变通方法，因此我将所有HTML放在JS中并从index.html中的标记加载JS。到目前为止，一切都很顺利。

点击“按任意键继续” - ＆gt;但接下来你点击“新游戏”，你得到事件监听器错误“无法设置null属性”。我不明白它是如何发生的，因为元素已经在“DOM”中，css可以把它拿起来，但是事件监听器不能？所以我尝试将所有脚本移到顶部，重新排列，没有任何效果。将所有HTML预加载到index.html中，而不执行它肯定会有效，但我怎样才能完全实现这一目标？我的配置atm是：

index.html（根文件夹）
/components/main_menu.js
/components/character_creation.js

function MainMenu()
{/*
<div id="mm_wrapper_grid">
	<div id="mm_subgrid1">
		
	</div>
	<div id="mm_subgrid2">
		<div id="mm_subgrid2_image"></div>
		<div id="mm_new_game"><p id="mm_new_game_p" class="grow">New Game<p></div>
		<div id="mm_load_game"><p id="mm_load_game_p" class="grow">Load Game</p></div>
		<div id="mm_options"><p id="mm_options_p" class="grow">Options</p></div>
		<div id="mm_credits"><p id="mm_credits_p" class="grow">Credits</p></div>
	</div>
</div>
*/}

function CharacterCreation()
{/*
<div> Character Creation test
</div>
*/}

<div id ="game">
	<div id="loading_screen">Press Any Key To Continue</div>
</div>

<script type="text/javascript">
document.getElementById("loading_screen").addEventListener("click", function() {callback("game", MainMenu)});
document.getElementById("mm_new_game_p").addEventListener("click", function() {callback("game", CharacterCreation)});
  
function callback(arg1, func)
{
	var html = func.toString();
	var htmlstart = html.indexOf('/*');
	var htmlend = html.lastIndexOf('*/');
	var html = html.substr(htmlstart+2, htmlend-htmlstart-2);
	document.getElementById(arg1).innerHTML = html;
}
</script>

Answer 1

您遇到问题，因为当您在页面上不存在此元素时，您尝试为getElementById("mm_new_game_p")添加第二个侦听器。我建议你添加以下代码，以确保它是真的：

<script type="text/javascript">
document.getElementById("loading_screen").addEventListener("click", function() {callback("game", MainMenu)});

console.log('#mm_new_game_p', document.getElementById("mm_new_game_p"));

document.getElementById("mm_new_game_p").addEventListener("click", function() {callback("game", CharacterCreation)});

...

在创建此元素之后（在调用MainMenu（）函数之后）必须添加此侦听器。

说实话，我第一次可以在js函数中看到这样的html模板存储。很难支持您的代码，我已经对它进行了一些修改。这不是实现它的最佳方式，但我的目标是根据您的代码向您展示解决方案。你在这里可以看到什么：

页面的所有模板都是html（不是JS）;
您可以使用HTML属性onclick从html代码添加侦听器 - 在这种情况下，您可以确定该页面上存在该元素。

如果你想从JS添加监听器，你必须为你拥有的每个页面创建自己的函数，并且在将页面的HTML模板添加到#game容器后，你需要创建事件监听器。创建页面上的按钮。

＆＃13;

openPage("game", "loading_screen");

function openPage(parentDOMElementId, name) {
  console.log('openPage:', name);
  var pageHtml = document.getElementById("page_" + name).outerHTML;
  document.getElementById(parentDOMElementId).innerHTML = pageHtml;
}

＆＃13;

<div id="game"></div>

<div class="templates" style="visibility: hidden;">

  <div id="page_loading_screen" onclick="openPage('game', 'main_menu')">
    Press Any Key To Continue
  </div>

  <div id="page_main_menu">
    <div id="mm_subgrid1">

    </div>
    <div id="mm_subgrid2">
      <div id="mm_subgrid2_image"></div>
      <div id="mm_new_game">
        <p id="mm_new_game_p" class="grow" onclick="openPage('game', 'character_creation')">New Game
          <p>
      </div>
      <div id="mm_load_game">
        <p id="mm_load_game_p" class="grow">Load Game</p>
      </div>
      <div id="mm_options">
        <p id="mm_options_p" class="grow">Options</p>
      </div>
      <div id="mm_credits">
        <p id="mm_credits_p" class="grow">Credits</p>
      </div>
    </div>
  </div>

  <div id="page_character_creation">
    Character Creation test
  </div>
</div>

＆＃13;

从Javascript文件中将HTML预加载到DOM中，但不执行

1 个答案: