Javascript display all (elements, tags) from method elementsbyTagName

Question

Im learning JavaScript and i have problem with DOM methods. HTML

<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="DOM_Ponovno.js"></script>
</head>
<body>
    <div>
        <p id="demo" >
        this is the first paragraph</p>
        <p> boooooooooooommmmmmmmmmmm</p>       
        <p> third paragraph  </p>

        <button onclick="changeText()">click me</button>
    </div>
</body>

function changeText() {  
    var tmpTag = document.getElementsByTagName("p");

    for(var i = 0;i< tmpTag.length;i++) {
        document.write(tmpTag[i].textContent);
    }
}

If i follow the tutorial its ok, but i wanted to display all elements by tag name p. I want to display all paragraphs stored in tmpTag.

Someone please explain: How can ( why cant) display all elements with tag name p ? How can (why cant) display 3x p tag from variable tmpTag ? Tried to change to Array with prototype.slice.call method but no success. You know like Java stuff loop through display/change at index etc..

Thank you :)

Hi and thanx for fast answers.. Sory about the function name it was for testing... I just want to display all elements by tag name p. This code displays only first element and i counter in for loop stops at 1. Why cant i get other 2 paragraph elements ?

Im using document.write like system.out.print in Java to see whats in array. I know if i wanna change i need innerHTML.

[Never use `document.write`](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) unless you *really* know what you're doing. I suspect that because `document.write` wipes out the DOM, you don't have any
tags left to display after the first one. — JJJ, Jan 22 '16 at 16:44
What is the outcome of this code? What exactly is it doing that is not what you are expecting? According to the code, you are going to loop through each paragraph element, and write out a new text filed of that current paragraphs text property. But the function name indicates you want to change the text value of that particular
. — Casey, Jan 22 '16 at 16:47

score 2 · Answer 1 · answered Jan 22 '16 at 16:53

2

If you are wanting to update each paragraph, do not use document write. Try the following:

function changeText() {  
  var tmpTag = document.getElementsByTagName("p");

  for(var i = 0;i< tmpTag.length;i++) {
    tmpTag[i].innerHTML = "Your new updated text to change it to for tag index " + i + "...";
  }
}

answered Jan 22 '16 at 16:53

Casey

1,614
1
12
28

Personally I would use `textContent` - simply because the inserted content isn't HTML, but yes, this does _a different_ trick than the tack I went down on :) – somethinghere Jan 22 '16 at 16:59

score 1 · Answer 2 · answered Jan 22 '16 at 16:54

As @Juhana mentioned, the moment you start your loop you overwrite the document using document.write, so all your p tags get removed from the document and replaced by the text in the first paragraph and then your function fails, as the now-empty objects don't have any textContent property. You could concatenate all the contents and write it once:

function changeText() {  
    var tmpTag = document.getElementsByTagName("p");
    var print = '';
    for(var i = 0;i< tmpTag.length;i++) {
        print += tmpTag[i].textContent;
    }
    document.write(print)
}

But actually, just don't use document.write - SO snippets don't even allow it anymore! Here a way with a div as output:

var output = document.getElementById('output');

function changeText() {  
    var tmpTag = document.getElementsByTagName("p");
    for(var i = 0;i< tmpTag.length;i++) {
        output.textContent += tmpTag[i].textContent;
    }
}

<div>
  <p id="demo" >this is the first paragraph</p>
  <p> boooooooooooommmmmmmmmmmm</p>       
  <p> third paragraph  </p>

  <button onclick="changeText()">click me</button>
</div>

<div id="output"></div>

This is good answer too. That is why I was asking what he was trying to accomplish. This will erase the original document, and write out the new values, while I was trying to show how to update the paragraphs without writing the document back out. — Casey, Jan 22 '16 at 16:57

Zakaria Acharki · Answer 3 · 2016-01-22T17:14:53.617

I'm not sure what you're trying to do but you can add another div for result with id='result' and append result you want to it, check following example.

Hope this will help.

function changeText() {  
    var tmpTag = document.getElementsByTagName("p");
    var result = document.getElementById('result');
    
    for(var i = 0;i< tmpTag.length;i++) {
        result.innerHTML += tmpTag[i].textContent+'<br>';
    }
}

<div>
  <p id="demo" >
    this is the first paragraph</p>
  <p> boooooooooooommmmmmmmmmmm</p>       
  <p> third paragraph  </p>

  <button onclick="changeText()">click me</button>
  <br>
  <div id="result" ></div>
</div>

Javascript display all (elements, tags) from method elementsbyTagName

3 Answers3