innerhtml - JavaScript .innerHTML 仅在手动调用时工作

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

您已经通过在 onLoad 上调用函数 loaded(); 更改了 innerHTML。将其放入一个空文件中，与 .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>