-1

I've been working on a site for school, and for some reason when I attempt to change the link for the source the console outputs

Uncaught TypeError: Cannot set property 'href' of null
    at pierre (pierre.html:49)
    at HTMLButtonElement.onclick (pierre.html:60)

I attempted to fix this by changing the ids but it also didn't work, even copying and pasting the 'link1' line over the 'link2' line does not work.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta content="pierre, omidyar, bourne">
        <title id="title">Pierre Omidyar</title>
    </head>
<script>
    var x = 0;
    function pierre() {
        if (x == 0) {
            x = 1
            document.getElementById('title').innerHTML='Pierre\xa0Bourne';
            document.getElementById('heading').innerHTML='Pierre\xa0Bourne';
            document.getElementById('tag').play();
            document.getElementById('image1').src='https://cdn3.pitchfork.com/longform/699/Pierre1.jpg';
            document.getElementById('cite1').innerHTML = "Sheldon Pearce, Pitchfork.com, 2019";
            document.getElementById('para1').innerHTML = "Jordan Timothy Jenks, known professionally as Pi\'erre Bourne, is a Belizean-American record producer, rapper, songwriter, and audio engineer. He is known for producing the singles \"Magnolia\" by Playboi Carti, and \"Gummo\" by 6ix9ine, with the two peaking at number 29 and 12 on the US Billboard Hot 100 respectively.";
            document.getElementById('link1').href = "https://en.wikipedia.org/wiki/Pierre_Bourne";
            document.getElementById('image2').src='https://cdn3.pitchfork.com/longform/699/Pierre4.jpg'; 
            document.getElementById('para2').innerHTML = "Songs Pierre Bourne has produced";
            document.getElementById('l1o1').innerHTML = "Magnolia";
            document.getElementById('l1o2').innerHTML = "wokeuplikethis*";
            document.getElementById('l1o3').innerHTML = "Pissy Pamper";
            document.getElementById('l1o4').innerHTML = "Pain 1993";
            document.getElementById('link2').href = "https://en.wikipedia.org/wiki/Pierre_Bourne";
            document.getElementById('para3').innerHTML = "He was born in Fort Riley, Kansas but grew up in Columbia, South Carolina to a military family from Queens, New York. Growing up, he would spend his summers with his grandmother in Queens, which lead to his interest in East Coast hip hop artists such as Dipset and G-Unit. He is related to Mobile Malachi, a Belizean Kriol Reggae artist and musician. He is also a cousin of Papoose, who is of Liberian descent."            
            document.getElementById('para4').innerHTML = "Jenks began producing for Young Nudy and Trippie Redd in 2016. He met Playboi Carti in February 2017, collaborating on the track \"Woke Up Like This\" and producing most tracks on his debut project. Their song \"Magnolia\" peaked at 29 on the US Billboard Hot 100. This kickstarted Jenks' producing career, producing songs for 21 Savage, Trippie Redd, Rich the Kid, Lil Yachty, Famous Dex, Nav, Young Thug and Lil Uzi Vert. Jenks has also released a series of mixtapes called The Life of Pi'erre and has his own imprint, SossHouse, at Interscope Records. He produced Travis Scott's single \"Watch\" which features Kanye West and Lil Uzi Vert. He also produced Playboi Carti's album Die Lit. He also helped produce for Kanye West's albums Ye and Jesus Is King.";
            document.getElementById("link3").href = "https://en.wikipedia.org/wiki/Pierre_Bourne";
            document.getElementById('para5').innerHTML = "Pierre Bourne has been hooked on the anime show Bleach since a two-week beat-making excursion to Tokyo earlier in the month. “'Bleach' is kind of accurate to how it looks over there [in Japan]. It reminds me of the neighborhoods I was walking through. So, that’s why I’ve been watching that a lot. Like, a lot a lot.”";
            document.getElementById("link4").href = "https://www.highsnobiety.com/p/pierre-bourne-interview";
        }  
        else {
            x = 0
            document.getElementById('title').innerHTML='Pierre\xa0Omidyar';
            document.getElementById('heading').innerHTML='Pierre\xa0Omidyar';
            document.getElementById('tag').pause();
            document.getElementById('image1').src='https://upload.wikimedia.org/wikipedia/commons/0/0b/Pierre_Omidyar_%2850911249%29.jpg';
            document.getElementById('cite1').innerHTML = "JD Lasica, Flickr.com, 2005";
            document.getElementById('para1').innerHTML="Pierre Morad Omidyar is an American billionaire entrepreneur, software engineer and philanthropist. He is the founder of eBay where he served as chairman from 1998 to 2015. He became a billionaire at the age of 31 with eBay's 1998 initial public offering (IPO).Omidyar and his wife Pamela are philanthropists who founded Omidyar Network in 2004 in order to expand their efforts beyond non-profits to include for-profits and public policy.";
            document.getElementById('link1').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar"
            document.getElementById('image2').src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Pomidyarji.jpg/800px-Pomidyarji.jpg'; 
            document.getElementById('para2').innerHTML = "Companies Pierre Omidyar has Founded";
            document.getElementById('l1o1').innerHTML = "eBay";
            document.getElementById('l1o2').innerHTML = "First Look Media";
            document.getElementById('l1o3').innerHTML = "Honolulu Civil Beat";
            document.getElementById('l1o4').innerHTML = "Omidyar Network";
            document.getElementById('para3').innerHTML = "Omidyar was born in Paris, the son of Iranian parents who migrated to France for higher education. He was given the name of Parviz. His father, Cyrus Omidyar, is a surgeon who worked as a urologist at Johns Hopkins University in Baltimore and now practices in Aliso Viejo, California. Due to his father's work, the family moved to the US when Omidyar was a child. His mother, who did her doctorate in linguistics at the Sorbonne, is an academic.";
            document.getElementById('link2').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar";
            document.getElementById('para4').innerHTML = "In 1991, he co-founded Ink Development, a pen-based computing startup that later was rebranded as an e-commerce company and was renamed eShop Inc. Microsoft acquired eShop on June 11, 1996, for less than $50 million and Omidyar earned $1 million from the deal. In 1995, at the age of 28, Omidyar began to write the original computer code for an online venue to enable the listing of a direct person-to-person auction for collectible items. He created a simple prototype on his personal web page, and on Labor Day, Monday, September 4, 1995, he launched an online service called Auction Web, which would eventually become the auction site eBay. In 2013, prompted by the Edward Snowden leaks, Omidyar announced the creation of First Look Media, a journalism venture launched on February 10, 2014, with The Intercept and including such journalists as Glenn Greenwald, Laura Poitras, Jeremy Scahill, Dan Froomkin, John Temple, and Jay Rosen.";
            document.getElementById('link3').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar";
            document.getElementById('para5').innerHTML = "Omidyar has been part of the executive producer team for the films \"Merchants of Doubt\" (2014) and \"Spotlight\" (2015)"
            document.getElementById('link4').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar";
        }
    } 
</script>
    <body>
        <audio id="tag"><source src="https://codehs.com/uploads/9af74ff56cf4b8ed3809fba276efa59e" type="audio/mpeg"></audio>
        <h1 id="heading">Pierre Omidyar</h1>
            <button onclick="pierre()" type="button"><em>Swap!</em></button><br>
            <img height=50% width=50% id="image1" src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Pierre_Omidyar_%2850911249%29.jpg"/><br>
            <cite id="cite1">JD Lasica, Flickr.com, 2005</cite><br>
            <span id="para1">Pierre Morad Omidyar is an American billionaire entrepreneur, software engineer and philanthropist. He is the founder of eBay where he served as chairman from 1998 to 2015. He became a billionaire at the age of 31 with eBay's 1998 initial public offering (IPO).Omidyar and his wife Pamela are philanthropists who founded Omidyar Network in 2004 in order to expand their efforts beyond non-profits to include for-profits and public policy.</span><br>
            <a id="link1" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a><br>
            <hr>
        <h1>What has Pierre done?</h1>
            <img height=50% width=50% id="image2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Pomidyarji.jpg/800px-Pomidyarji.jpg"/><br>
            <span id="para2">Companies Pierre Omidyar has Founded</span>
            <ul>
                <li id="l1o1">eBay</li>
                <li id="l1o2">First Look Media</li>
                <li id="l1o3">Honolulu Civil Beat</li>
                <li id="l1o4">Omidyar Network</li>
            </ul>
            <hr>
        <h1>Family Info</h1>
            <p id="para3">Omidyar was born in Paris, the son of Iranian parents who migrated to France for higher education. He was given the name of Parviz. His father, Cyrus Omidyar, is a surgeon who worked as a urologist at Johns Hopkins University in Baltimore and now practices in Aliso Viejo, California. Due to his father's work, the family moved to the US when Omidyar was a child. His mother, who did her doctorate in linguistics at the Sorbonne, is an academic.</span><br>
            <a id="link2" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a><br>
            <hr>
        <h1>Professional Info</h1>
            <p id="para4">In 1991, he co-founded Ink Development, a pen-based computing startup that later was rebranded as an e-commerce company and was renamed eShop Inc. Microsoft acquired eShop on June 11, 1996, for less than $50 million and Omidyar earned $1 million from the deal. In 1995, at the age of 28, Omidyar began to write the original computer code for an online venue to enable the listing of a direct person-to-person auction for collectible items. He created a simple prototype on his personal web page, and on Labor Day, Monday, September 4, 1995, he launched an online service called Auction Web, which would eventually become the auction site eBay. In 2013, prompted by the Edward Snowden leaks, Omidyar announced the creation of First Look Media, a journalism venture launched on February 10, 2014, with The Intercept and including such journalists as Glenn Greenwald, Laura Poitras, Jeremy Scahill, Dan Froomkin, John Temple, and Jay Rosen.</span><br>
            <a id="link3" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a>
            <hr>
        <h1>Hobby Info</h1>
            <p id="para5">Omidyar has been part of the executive producer team for the films "Merchants of Doubt" (2014) and "Spotlight" (2015)</span><br>
            <a id="link4" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a>
            <hr>
    </body>
</html>
ssilas777
  • 9,166
  • 3
  • 41
  • 63
Alexander
  • 3
  • 1
  • 4
    Move the script to the end of `body`. – Phix Sep 24 '20 at 17:44
  • It seems to be working fine in this snippet-- I'm not seeing that error being surfaced in the console... – Alexander Nied Sep 24 '20 at 17:44
  • @Phix why? DOM references are not called until button click. It is weird it is between the head and body tags. – epascarello Sep 24 '20 at 17:46
  • Error is stating it can not find an element with that id when you try to set the href. – epascarello Sep 24 '20 at 17:47
  • https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – epascarello Sep 24 '20 at 17:48
  • 1
    The problem isn't actually the javascript its the fact that you have broken HTML. You have way too many `` with not enough starting spans. For your `para` information you switch between `p` and `span` but don't match the beginning with the ends. – imvain2 Sep 24 '20 at 17:48
  • Thank you @imvain2 it was the mismatch between the and

    tags, if you want to put your comment as an answer I'll mark it as correct

    – Alexander Sep 24 '20 at 18:04

1 Answers1

0

It looks like the problem was mismatching the start and end span/p tags for the para information.

HTML with mismatched opening and closing tags causes the javascript DOM parser to miss elements despite them actually being on the page.

imvain2
  • 10,699
  • 1
  • 11
  • 19