Question

我有一个非常简单的功能，即替换元素的innerHTML。我一直试图调试这几个小时，但根本不能，这是令人愤怒的。

当从按钮调用时按下JavaScript（如下所示）效果很好，但是当从另一个函数调用时它不起作用。我完全迷失了为什么会这样，而且它是我的应用程序的一个相当核心的部分

  // This loaded function in my actual code is a document listener
  // checking for when Cordova is loaded which then calls the loaded function
  loaded();

  function loaded() {
alert("loaded");
changeText();
  }

  function changeText() {
   alert("started");
   document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
  }

按下按钮和HTML替换

 <div id="main">
  <input type='button' onclick='changeText()' value='Change Text'/>
  <p>Change this text >>  <b id='boldStuff'> THIS TEXT</b> </p> 
 </div>

JSFiddle

也完全在这里

Answer 1

问题在于，当您调用changeText()函数时，您尝试操作的元素尚不存在。

要确保代码仅在页面加载完成后执行（并且所有元素都已到位），您可以在body元素上使用onload处理程序，如下所示：

<body onload="loaded();">

此外，您应该知道，使用innerHTML属性操作值是非常糟糕的做法。正确的方法是使用DOM操作，也许this可以帮助你。

Answer 2

您在加载元素（boldStuff）之前加载脚本，

Test Link - 1 - 将js放在单独的文件中

Test Link - 2 - 将js放在最后，然后关闭<body>

Answer 3

您已通过调用innerHTML上的loaded();功能更改了onLoad。将它放在一个空文件中，与.html相同，然后用浏览器打开并尝试。我评论了函数loaded();。现在它将在onclick中更改。

<div id="main">
  <input type='button' onclick='changeText();' value='Change Text'/>
  <p>Change this text >>  <b id='boldStuff'> THIS TEXT</b> </p> 
 </div>

<script>

  //loaded();

  function loaded() {
    alert("loaded");
    changeText();
  }

  function changeText() {
   alert("started");
   document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
  }

</script>

JavaScript .innerHTMLworking仅在手动调用时

3 个答案: