Why is innerHTML returning this value?

[uscircuitpool]

I’ve the following code:

<button type="button" id="test">CLick To Append</button>
<ul>
</ul>

<script type="text/javascript">
  let ul = document.querySelector("ul");
  document.querySelector("#test").onclick = function() {

    var li = document.createElement("li");

    li.innerText = () => "something";

    ul.appendChild(li);
  }
</script>

Output:

I’m not understanding what is happening actually, can anybody please elaborate?

Thank you.

[Andres_Vaquero]

Hi @uscircuitpool,
this is quite strange I’ve never seen it before but seems to me some ES6 behaviour which is evaluating the following as a string:

@uscircuitpool

() => “something”;

Maybe instead try the following:

li.innerText = "something";

Hope it helps,

Andres

[Mittineague]

Yes, I don’t know why you’re using s fat arrow function to assign a text value when, as Andres_Vaquero posted, it could more easily be assigned directly.

If this is a preliminary stage of assigning something more than text, then innerText is not what you need but maybe innerHTML instead?

If “something” is not going to be static, then I think assigning that to a variable and then assigning that variable to the element should work. eg.

let txt_str = (a, b) => a + b;
li.innerText = txt_str; 

* disclaimer: I’m relatively new to using fat arrow functions so I don’t know much about browser support or syntax limitations etc. yet.

[uscircuitpool]

Yes, I know it’s strange, but as innerText is an function, then it should throw a error right? Why is it displaying the fat arrow function itself?

[Mittineague]

Actually innerText is a property. For some reason the function is being assigned as its value instead of the functions return.

I’m guessing this is a limitation of how the fat arrow function can be used. eg. innerText is left to right and for this to work it would need to be right to left?

Did it work when you tried var = ()=>‘’, innerText = var ?

[rpkamp]

Javascript is very forgiving regarding a lot of things people would deem incorrect. This is just one of those things.

You shouldn’t be able to assign .innerText a function, but you can, and I guess the behaviour varies wildly between browsers as it’s probably not formally defined somewhere what should happen.

The solution is to assign the string to .innerText directly, without any use of a function.

[m3g4p0p]

Actually this behaviour is pretty well defined: the function gets coerced to a string, meaning its .toString() method gets called. Technically you could replace this method to return the result of calling the function instead, like

Function.prototype.toString = function() {
  return this()
}

… but you generally shouldn’t mess with native prototypes, and I don’t really see a use case for this – just assign a plain string instead. You might wrap that in a function though like so:

const setInnerText = (el, text) => el.innerText = text

// ...
setInnerText(li, 'something')