0

我有一个非常简单的功能，即替换元素的 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上

4

3 回答 3

1

changeText()这里的问题是，当您调用该函数时，您尝试操作的元素还不存在。

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

<body onload="loaded();">

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

于 2013-01-10T11:13:23.977 回答
1

您在加载元素 ( boldStuff) 之前加载脚本，

测试链接 - 1 - 将其js放在单独的文件中

测试链接 - 2 - 将 放在js最后，然后关闭<body>

于 2013-01-10T11:14:24.780 回答
1

你已经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>
于 2013-01-10T11:19:08.100 回答