Javascript: innerHTML not working

Question

The first innerHTML code works without any issues, however the second innerHTML code is causing problems. Its value is set to 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>

You need to declare your global and local variables with `var`. — Pointy, Dec 23 '15 at 16:51
You're clashing with the browser's `window.name` property. I feel like this is a dupe, but can't find it now. Use something other than `name` or scope the variable to the function and the problem disappears. — James Thorpe, Dec 23 '15 at 16:52
NB : declare your local variables with `var`, use a consistent indentation, be careful when you use spaces (id = "theName", i =1;, etc.). — enguerranws, Dec 23 '15 at 16:57

score 2 · Answer 1 · answered Dec 23 '15 at 16:52

You haven't used var, so you are trying to set name as a global, but window.name already exists and (because it is, internally, defined with a setter) can only be set to a string. Your HTML element object gets converted to a string, at which point the innerHTML property on it stops having any special meaning.

Use var when declaring a variable to create a locally scoped one.

You would benefit from using JS Hint to highlight possible issues, like this one, in your JS and strict mode to turn certain gotches (like this one) into errors that would be highlighted in your browser's developer tools.

With a simple example proving what you say : https://jsfiddle.net/b41gy10w/ :) — enguerranws, Dec 23 '15 at 16:59

Madhu G Nadig · Accepted Answer · 2015-12-23T17:07:04.853

-1

Its because of your variable name as name. You haven't used the keyword var, so your variable is now global. It now clashes with window.name. Change the name of the variable and it should work just fine.

And, whenever your want to initialize local variables, always use the var keyword.

edited Dec 23 '15 at 17:07

answered Dec 23 '15 at 16:54

Madhu G Nadig

122
1
1
8

score -1 · Answer 3 · answered Dec 23 '15 at 17:04

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 not working

3 Answers3