CODEWITHSUNDEEP
javascripthtmldom
benji
benji

Reputation: 38

Javascript display all (elements, tags) from method elementsbyTagName

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.

Upvotes: 0

Views: 2343

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

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>

Upvotes: 0

somethinghere
somethinghere

Reputation: 17358

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>

Upvotes: 1

Casey ScriptFu Pharr
Casey ScriptFu Pharr

Reputation: 1680

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 + "...";
  }
}

Upvotes: 2

Related Questions