Question

第一个innerHTML代码没有任何问题，但是第二个innerHTML代码导致了问题。其值设置为undefined。

names = ["Man", "Man 2", "Man 3"];
textdata = ["RISIKESI", "This service is amazing",
  "Best RISIKESI I have so used!"
];
i = 1;

function anim() {
  text = document.getElementById("theText");
  text.innerHTML = textdata[i];
  name = document.getElementById("theName");
  name.innerHTML = names[i];
  if (i == 2) {
    i = 0;
  } else {
    i++;
  }
}

var int = setInterval(anim, 2000);

<div class="cd-testimonials-wrapper cd-container">
  <ul class="cd-testimonials">
    <li>
      <p id="theText">RISIKESI</p>
      <p id="theName" class="t">Man</p>
    </li>
  </ul>
</div>

Answer 1

您尚未使用var，因此您尝试将name设置为全局，但window.name已存在且（因为它在内部使用setter定义）只能设置为字符串。您的HTML元素对象将转换为字符串，此时其上的innerHTML属性将停止具有任何特殊含义。

在声明变量以创建本地范围的变量时使用var。

使用JS Hint来突出显示JS中的可能问题，以及strict mode将某些问题（如此问题）转化为错误，您将受益于浏览器的开发人员工具。

Answer 2

因为您的变量名为name。您尚未使用关键字var，因此您的变量现在是全局变量。它现在与window.name发生冲突。更改变量的名称，它应该工作得很好。

而且，只要您想初始化局部变量，请始终使用var关键字。

Answer 3

var names = ["Man", "Man 2", "Man 3"];
var textdata = ["RISIKESI", "This service is amazing",
"Best RISIKESI I have so used!"];
var i =1;
var text = document.getElementById("theText");
var nameEl = document.getElementById("theName");
function anim(){
   text.innerHTML = textdata[i];
   nameEl.innerHTML= names[i];
   i!=2 ? i++ : i=0
}

var int = setInterval(anim, 2000);

// http://codepen.io/anon/pen/ZQpExv

Javascript：innerHTML无法正常工作

3 个答案: