What is missing in my code

Question

Why this code is not working ? I think i am doing some silly mistake here.

document.addEventListener("DOMContentLoaded", function() {
  var text = "Planing";
  document.getElementsByTagName("div").innerHTML = text;
});

<div id="demo" class="eg"></div>

"Why this code is not working?" How is this code supposed to be working? — SubjectCurio, Oct 09 '15 at 14:55
You could try, switching the getElementsByTagName to getElementsById and tag the 'demo' instead. That may help. — kdweber89, Oct 09 '15 at 14:56
https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName — j08691, Oct 09 '15 at 14:56

Tushar · Accepted Answer · 2015-10-09T15:02:05.713

4

getElementsByTagName returns a collection of all the matching elements(<div>s in this case) on the page/DOM, to select first element use array notation with zero index.

document.addEventListener("DOMContentLoaded", function() {
  var text = "Planing";
  document.getElementsByTagName("div")[0].innerHTML = text;
});

<div id="demo" class="eg"></div>

If you want to select first element, you can use document.querySelector('div');

If you want to perform some operation on all the selected elements, you need to iterate over them.

var allDivs = document.getElementsByTagName("div");

for (var i = 0; i < allDivs.length; i++) {
    allDivs[i].innerHTML = 'Div ' + i;
}

edited Oct 09 '15 at 15:02

answered Oct 09 '15 at 14:55

Tushar

85,780
21
159
179

1

@akash Check updated fiddle, https://jsfiddle.net/tusharj/ushqasq7/2/, this is because how jsfiddle includes script in page, I've selected the option to `no wrap`, if you select it to `onLoad` or `contentLoaded` the script is added inside the respective handler – Tushar Oct 09 '15 at 15:04
1

@akash For more information on how it works on jsfiddle please see bottom part http://stackoverflow.com/a/32925927/2025923 – Tushar Oct 09 '15 at 15:07

score 2 · Answer 2 · edited Oct 09 '15 at 15:03

2

getElementsByTagName, as the name suggests returns an array of elements (even if there is just one). You need to access the first one before applying the text.

document.addEventListener("DOMContentLoaded", function() {
  var text = "Planing";
  document.getElementsByTagName("div")[0].innerHTML = text;
});

<div id="demo" class="eg"></div>

edited Oct 09 '15 at 15:03

Tushar

85,780
21
159
179

answered Oct 09 '15 at 14:56

Matheus208

1,289
2
13
26

I didn't copy and paste. I clicked on "copy snippet to answer" from OP's question and fixed it... I just realised now, after refreshing the page, that someone else beat me to posting another answer first. – Matheus208 Oct 09 '15 at 14:59

What is missing in my code

2 Answers2