Changing text of HTML <h1> not working? Did I link app.js correctly?

I'm practicing the basics from scratch on a new machine and I can't change the text within the header. For some reason it seems the app.js isn't linked up with my index.html file.

This is what i have in the app.js file:

document.getElementsByClassName("title1").innerHTML = 'Testing 123';

Did I link app.js correctly? Is it because I have also linked other js files (bootstrap, jquery and popper)?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Website Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="app.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  .fakeimg {
    height: 200px;
    background: #aaa;
  }
  </style>
</head>
<body>

<div class="jumbotron text-center" style="margin-bottom:0">
  <h1 class = "title1" id="testing11">My First Bootstrap 4 Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>

I expected the text within the header to change.

Thanks!

5 answers

  • answered 2019-06-11 22:48 Jenia Trach

    The html looks good You can move the script into end of the body And check that you use document on ready in your js file

  • answered 2019-06-11 22:48 Kais Tounsi

    1st solution: You have to be sure that index.html and app.js are saved in the same folder. 2nd solution: click on F12 and than go to console tab and verify if your html is calling your app.js or if there is any other problem.

  • answered 2019-06-11 22:49 Argeento

    getElementsByClassName("title1") returns an array-like object, use getElementById("testing11") or getElementsByClassName("title1")[0] instead

  • answered 2019-06-11 22:49 Cody Bennett

    getElementsByClassName returns an array with all specified elements within the document. You can access elements by their index. You can read more about that method from W3Schools.


    In your case, you are accessing the first element with that attribute, so that element would be found with an index of 0. You can learn more about indexes and arrays from W3Schools.

    document.getElementsByClassName('title1')[0]
    

    I noticed you are using jQuery in your project which enables another method. You can learn more about this from learn.jQuery

    $(".title1")[0].innerHTML = 'Testing 123';
    

    I would also suggest you append your javascript to the bottom of the body of your page to minimize above the fold content to have your site load faster. You can learn more about that from Google's Developer Docs.

    //app.js
    document.getElementsByClassName("title1")[0].innerHTML = 'Testing 123';
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <title>Bootstrap 4 Website Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <style>
        .fakeimg {
          height: 200px;
          background: #aaaaaa;
        }
      </style>
    </head>
    
    <body>
    
      <div class="jumbotron text-center" style="margin-bottom: 0">
        <h1 class="title1" id="testing11">My First Bootstrap 4 Page</h1>
        <p>Resize this responsive page to see the effect!</p>
      </div>
    
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
      <script src="app.js"></script>
    
    </body>
    
    </html>

  • answered 2019-06-11 23:07 M.e

    getElementsByClassName function return an array. So you need do approach the first element in that array and then you can access to the innerHTML property. Try this... document.getElementsByClassName("title1")[0].innerHTML = 'Testing 123'; Or.. Var header = document.getElementsByClassName("title1")[0]; header.innerHTML = 'Testing 123'; Although.. the best solution in this example is to approach to the h1 element by it's I'd that you gave him, and document.getElementById function return single element. Like so... document.getElementById('testing11').innerHTML = 'Testing 123';