Javascript: innerHTML не работает

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

Его из-за вашего имени переменной name. Вы не использовали ключевое слово var, поэтому ваша переменная теперь является глобальной. Теперь он сталкивается с window.name. Измените имя переменной, и она должна работать нормально.

И когда вы хотите инициализировать локальные переменные, всегда используйте ключевое слово var.

Answer 2

Вы не использовали var, так что вы пытаетесь установить name как глобальный, но window.name уже существует, и (потому что он, внутренне, определяется с установщиком) может только должен быть установлен в строку. Объект HTML-элемента преобразуется в строку, после чего свойство innerHTML на нем перестает иметь какое-либо особое значение.

Использовать var при объявлении переменной для создания локально локализованного объекта.

Вы можете воспользоваться JS Hint, чтобы выделить возможные проблемы, подобные этому, в вашем JS и strict mode, чтобы превратить определенные ошибки (например, этот) в ошибки, которые будут выделены в инструментах разработчика вашего браузера.

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