How to print a function's return string without its body?

Question

I have an html document that contains 4 paragraphs.

I want to take the concatenation of all paragraph's innerHTML and put it in the paragraph with "demo" id. The problem is that it also prints the function's signature...

How can I print only the string that my function returns?

<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>

<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method</p>

<p id="demo"></p>

<script >
    var paragraphs = document.getElementsByTagName("p");


    function getText() {
        var text=null;
        for (var i = 0; i < paragraphs.length; i++) {
            getText = getText + paragraphs[i].innerHTML;
        }
        return getText;
    }

    document.getElementById("demo").innerHTML=getText();

</script>

</body>
</html>

I get this as a result:

Hello World!

The DOM is very useful.

This example demonstrates the getElementsByTagName method

function getText() { var text=null; for (var i = 0; i < paragraphs.length; i++) { getText = getText + paragraphs[i].innerHTML; } return getText; }Hello World!The DOM is very useful.This example demonstrates the getElementsByTagName method

use a different variable name for the text inside the function — tewathia
– tewathia, Commented Sep 8, 2016 at 10:23
try to avoid innerHTML. It adds an unnecessary serialization and parsing step to your task (overhead), and if for example some other script would have added event-listener to some of the processed nodes/markup, they would have been gone now; they don't serialize. Better would be to accumulate the childNodes you want in a DocumentFragment (the accumulation prevents multiple render-steps), and to just move/append them to the target Node (demo). — Thomas
– Thomas, Commented Sep 8, 2016 at 10:46

roberrrt-s · Accepted Answer · 2016-09-08 10:32:26Z

3

It's because you're returning the function, not the text.

// Main function declaration
function getText() {

    // Setting the initial string (text) and all paragraphs (<p>)
    var text = "";
    var paragraphs = document.getElementsByTagName('p')

    // Loop over all paragraphs
    for (var i = 0; i < paragraphs.length; i++) {
        // use the .concat() function to combine the strings (with a space behind it)
        text = text.concat(paragraphs[i].innerHTML + " ");
    }

    // Return the string in variable text as a result of the function.
    return text;
}

// Enter the string in the demo p.
document.getElementById("demo").innerHTML = getText();

Here's a codepen (working) example.

edited Sep 8, 2016 at 10:32

answered Sep 8, 2016 at 10:22

roberrrt-s

8,2502 gold badges49 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JJJ Over a year ago

This is slightly better, but it'll still prepend "null" to the return value.

roberrrt-s Over a year ago

Yeah, i'll edit the answer in a second, this isn't favorable anyway.

JJJ Over a year ago

Now it'll prepend "undefined".

roberrrt-s Over a year ago

I haven't finished my coffee @Juhana, thanks for correcting. Should be fine now, updated + comments!

Abhijeet · Accepted Answer · 2016-09-08 10:22:35Z

2

Replace your function with :

function getText() {
        var text="";
        for (var i = 0; i < paragraphs.length; i++) {
            text= text+ paragraphs[i].innerHTML;
        }
        return text;
    }

In your case, you were returning getText which is name of your function that's why the method is also getting appended

answered Sep 8, 2016 at 10:22

Abhijeet

4,3491 gold badge26 silver badges42 bronze badges

3 Comments

Pugazh Over a year ago

Explanation will help the OP understand the issue, instead of just providing answer

Abhijeet Over a year ago

@Pugazh I also provided the explanation of his issue with answer

Pugazh Over a year ago

Great, this would help!

jake · Accepted Answer · 2016-09-08 10:31:20Z

0

You have to return the variable 'text' not getText();

<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>

<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method</p>

<p id="demo"></p>

<script>
    var paragraphs = document.getElementsByTagName("P");

    var text = "";

    function getText() { 
        var i; 
        for (i = 0; i < paragraphs.length; i++) {
           text += paragraphs[i].innerHTML;
        }
        return text;
    }

    document.getElementById("demo").innerHTML = getText();

</script>

</body>
</html>

answered Sep 8, 2016 at 10:31

jake

1361 silver badge14 bronze badges

Collectives™ on Stack Overflow

How to print a function's return string without its body?

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related