getElementsByClassName() method in JavaScript - example 1

by danielkwood

HTML

<html>
    <head>
        <title>getElementsByClassName() method</title>
        <script src="script.js"></script>
    </head>

    <body>
        <p class="mytext">Click the button</p>
        <p class="mytext">Click the button</p>
        <p class="mytext">Click the button</p>
        <p class="mytext">Click the button</p>

        <button onclick="changeText();">Click me!</button>
    </body>
</html>

JavaScript

function changeText(){
  var mytext = document.getElementsByClassName('mytext');
  
  // This will change the innerHTML element of the first paragraph (with an index of 0) that belongs to the mytext class
  mytext[0].innerHTML = "You clicked the button!";
}