Unable to access element using JS

Hi everyone,

I am trying to build a simple project (in ‘very’ draft format right now, so I am aware there is a lot of cleaning up to do), but I am trying to access the text content of a

element and display it to the console log to check that I am accessing it correctly.

I have tried accessing both the ID and class elements and I have put the script tag at the bottom of the html as well as trying to access it using .innerText or .innerHTML (which I read on a website). None of these have worked and I am just getting ‘null’.

Would someone know where I am going wrong please? (Also, the class and ID names are the same, but I have also tried changing them and had the same outcome).

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    
    <title>Pol</title>
  </head>
  <body>
    
      <header>
        <h1>Polyglottery</h1>
      </header>
   
<div class = "nav_plus_bios">
    <nav id="navbar" class="navbar">
      <ul>
        <li>Quicklinks</li>
        <li><a href="#james_joyce">James Joyce</a></li>
        
        <li><a href="#natalie_portman">Natalie Portman</a></li>
        
        <li><a href="#jrr_tolkien">J.R.R. Tolkien</a></li>
      
        <li><a href="#shakira">Shakira</a></li>
      </ul>
    </nav>


    <section class = "main_section_excl_nav">
        <p id="intro_text" class="intro_text">
           FILL TEXT LATER
          </p>
          
            <div class="james_joyce_image_container">
              <img src = "Images/jamesjoyce.jpg" alt="Image of James Joyce">
              <button class="james_joyce_button">Click to read about James Joyce</button>
            
          
          
           
    
      <!--<img src="Images/jamesjoyce.jpg" class = "james_joyce_img" />-->

      <p class = "james_joyce_biography" id = "james_joyce_biography"></p>
      <strong>James Joyce</strong> (1882-1941) The famous Irish writer was
        known for his love of languages and literature. He was initially a
        teacher and a translator; he taught English all over Europe and during
        his travels he was able to pick up a variety of other languages,
        including Italian, German, and French. It is hard to determine how many
        he actually spoke, but he’s most often credited with communicating in
        between 13 and 17 other languages. His Ulysses contains fragments in
        Hebrew, Latin, Greek, Spanish, Irish Gaelic, and more. Apart from that,
        he was also a scholar who studied the nature of languages, so he could
        probably read a wider variety of texts. Apparently he only learned
        Norwegian to read Ibsen in his original language.
      </p>
    
  </div> 
    <div id="natalie_portman" class="natalie_portman">
    <button class = natalie_portman_button>Natalie Portman</button>
    
      <!--<img src="Images/natalie_portman.jpg" class = "natalie_portman_img" />-->
      <p class = "natalie_portman_biography">
        The famous Oscar-winning actress,
        <strong>Natalie Portman</strong> is one of the most widely-known
        polyglots among celebrities. Born in Israel to an Israeli father and
        American mother, she later moved to the United States; she therefore
        grew up speaking both Hebrew and English. Aside from her acting talent,
        she is known for her thirst for knowledge (she’s a Harvard graduate with
        a BA in psychology), and since she was raised as a bilingual-speaker,
        she’s also an avid learner of languages. Today she speaks not only
        English and Hebrew, but also Arabic, German, French, Spanish, and
        Japanese. She’s a native-speaker of the first two and has conversational
        abilities in the rest, giving interviews and participating in tv
        programs in all of them.
      </p>
    </div>
    <div id="jrr_tolkien" class="jrr_tolkien">
    <button class = jrr_tolkien_button>J.R.R. Tolkien</button>
    
      <!--<img src="Images/jrr_Tolkien.png" class="jrr_tolkien_img" />-->
      <p class = "jrr_tolkien_biography">
        It’s not an exaggeration to say that
        <strong>J.R.R. Tolkien</strong> is one of the most famous polyglots and
        most impressive linguists in the history of humankind. The father of
        Middle Earth was a remarkable figure even among the most talented
        polyglots – he could speak 35 (!) different languages, both modern and
        ancient. He became so proficient in learning languages that at some
        point he learned Finnish just for fun. But that’s not all – he used that
        impressive knowledge and ability to create languages of his own, the
        most widely-known being Quenya, one of the Elvish languages from his
        books.
      </p>
    </div>
    <div id="shakira" class="shakira">
    <button class = shakira_button>Shakira</button>
    
      <!--<img src="Images/shakira.jpg" class = "shakira_img" />-->
      <p class = "shakira_biography">
        <strong>Shakira</strong> was born in Columbia, so her native language is
        Spanish. Apart from that, she can also speak English and Portuguese,
        both fluently – the former because of her early boyfriend and later
        international career, and the latter because of an extended music tour
        she did in Brazil during her teens. Moreover, she’s reported to be able
        to communicate in Italian, Catalan, and Arabic. Right now, as a mother,
        she often stresses the importance of multilingualism and has tried to
        expose her sons to numerous languages from the very beginning.
      </p>
    </div>

    
  
</div>
<footer>
 
</footer>
</section>
<script src="script.js"> </script>
  </body>
</html>

and the script is below:

console.log(document.querySelector(".james_joyce_biography"));

console.log(document.getElementById("james_joyce_biography"));

Hi! For example: this code will output James Joyce’s bio in the console.

let jjbio = document.getElementById("james_joyce_biography");
console.log(jjbio.innerText)

Remove the closing </p> here to make it possible:

"james_joyce_biography"></p>

You have this closing tag in the right place in the end of his bio.

To learn more about accessing content in JS take a look at this guide:

1 Like

Fantastic, thanks so much. I think the closing p tag was autocompleted and I completely missed it.

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.