Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Jesus Olaiz
Jesus Olaiz
9,210 Points

Change isn't visible on the screen. What am I doing wrong?

I was practicing playing with the DOM in js and was recreating one of the practice workspace projects. 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Java/Boot practice</title>
    <link rel="stylesheet" href="styles.css">

  </head>
  <body>
    <header>
      <nav>
        <p>Fancy Title/Logo</p>

        <div class="nav-links">
          <div class="item">
            Button1
          </div>
          <div class="item">
            Button2
          </div>
          <div class="item">
            Button3
          </div>
        </div>
      </nav>
    </header>
    <main>

      <h1>What this do?</h1>
      <div class="txt" id="txt">
        <h3>Click Me!</h3>

      </div>


      <script src="script.js" charset="utf-8"></script>
    </main>
  </body>

</html>

body{
  margin: 0;
}

nav {
  margin:0;

  width:100%;
  display: flex;
  justify-content: space-between;
  background-color: lightblue;
}

.nav-links{
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  width: 30%;
  display:flex;

  align-items:center;
  background-color: yellow;
}

.item {
  padding: 16px 0;

  width: 33%;
  background-color: pink;
}



main {
  text-align: center;
}
h1{
  display:block;

}

main div {
  padding: 5px;
  margin: 0 auto;
  height: 60px;
  width: 100px;
  background-color: slateblue;
}
main div:hover{
  cursor: pointer;
  background-color: yellow;
}

const change = document.getElementsByTagName("h1");
// const button = ;

document.getElementById('txt').addEventListener("click", () => {
  change.innerHTML =  `<h1>${prompt("what should we say")}</h1>`;
} );

Now I am positive all files are linked appropriately and I also believe i'm calling all data correctly as well. The issue is when I click the button and fill in the prompt the HTMLcollection changes and shows up in the console as the input but the page itself doesnt show any change at all. Im losing my mind trying to solve what the issue is, so if anyone could help it would be amazing.

1 Answer

jb30
jb30
44,806 Points

Your code currently adds a new property, innerHTML, to the HTMLCollection change. Try changing const change = document.getElementsByTagName("h1"); to const change = document.getElementsByTagName("h1")[0]; to select the first element with the h1 tag.

Jesus Olaiz
Jesus Olaiz
9,210 Points

Thanks a ton for replying jb30! I actually figured it out a second ago and was honestly a little lost as to why it worked. Reading your reply reminded me about that relationship between querySelector and getElemenetsByTagName. I forgot about the array like structure that it brings back and was so confused by the undefined bit i was getting in the console. Thanks again! Definitely need to take these courses a bit slower lol