CODEWITHSUNDEEP
javascriptjqueryhtml
Kokumaji
Kokumaji

Reputation: 13

Neither jQuery's .text() nor JavaScripts .innerText works?

I'm currently trying to animate some text on my website and set up a little test website to fiddle around with.
This is what my test website looks like: 

  <head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        //What I tried with jQuery
        console.log("Content: " + $('p').text());

        //What I tried with JavaScript
        var text = document.getElementsByClassName('test').item(0);
        console.log(text.innerText);

        //This returns the HTMLCollection object, text[0] is undefined
        var text = document.getElementsByClassName('test');
        console.log(text);
    </script>
  </head>

  <body>

    <p class="test">Hello World!</p>

  </body>


//What I tried with jQuery
console.log("Content: " + $('p').text());

//What I tried with JavaScript
var text = document.getElementsByClassName('test').item(0);
console.log(text.innerText);

//This returns the HTMLCollection object, text[0] is undefined
var text = document.getElementsByClassName('test');
console.log(text);
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<p class="test">Hello World!</p>

Here I'm already trying to use jQuery instead of JavaScript, because it seemed to be easier to use. But if I visit my website (locally) it only prints Content: inside the console (JavaScripts .innerText would return undefined).

If it is important: I'm using Ubuntu 19.10 to develop and test my website.

Upvotes: 1

Views: 80

Answers (2)

Bryan
Bryan

Reputation: 775

You need to wait for the page to load (DOM) before the script runs. As I see it now, your script runs before the paragraph (<p>) element is created.

You can either:

1) Make it so that the code runs once the page has loaded. (recommended) ... or

2) Move the script after the paragraph (<p>) tag.

Method 1

// jQuery
$(document).ready(function() {
    console.log("Content: " + $('p').text());
});

// JavaScript
document.addEventListener("DOMContentLoaded", function(){
  // Handler when the DOM is fully loaded
  var text = document.getElementsByClassName('test').item(0);
  console.log(text.innerText);
});

Method 2: Please refer to @Edit's answer.

Upvotes: 2

NTR
NTR

Reputation: 1355

Your script needs to be at the bottom of your body. Here's the result:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <title>Test</title>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>

<body>

  <p class="test">Hello World!</p>
  <script>
    //What I tried with jQuery
    console.log("Content: " + $('p').text());

    //What I tried with JavaScript
    var text = document.getElementsByClassName('test').item(0);
    console.log(text.innerText);

    //This returns the HTMLCollection object, text[0] is undefined
    var text = document.getElementsByClassName('test');
    console.log(text);
  </script>
</body>

Upvotes: 1

Related Questions