Trying to create a function that changes the text of an html file-CodePudding

function chumpage() {
  chump = document.getElementByClassName("first-txt");
  for (var i = 0; i < chump.length(); i  ) {
    chump[i].innerText = "temp3";
  }
}

<head>
  <style>
    .temp {
      margin: 3%;
      position: relative;
    }

    .first-txt {
      position: absolute;
      top: 17px;
      left: 50px;
    }

    .second-txt {
      position: absolute;
      bottom: 20px;
      left: 10px;
    }

  </style>
</head>

<body>
  <div >
    <img src="">
    <h3 >
      Temp1
    </h3>

    <h3 >
      Temp2
    </h3>
  </div>
</body>

</html>

So my goal here is to change the contents of temp1 to temp3 using js, however the above function is not working, the image not being present right now is not an issue. I would appreciate any guidance.

CodePudding user response：

First you need to call the method, and it's not getElementByClassName it's getElementsByClassName.

And chump.length is not a function.

function chumpage() {
  const chump = document.getElementsByClassName("first-txt");
  for (var i = 0; i < chump.length; i  ) {
    chump[i].innerText = "temp3";
  }
}

chumpage();

<head>
  <style>
    .temp {
      margin: 3%;
      position: relative;
    }

    .first-txt {
      position: absolute;
      top: 17px;
      left: 50px;
    }

    .second-txt {
      position: absolute;
      bottom: 20px;
      left: 10px;
    }

  </style>
</head>

<body>
  <div >
    <img src="">
    <h3 >
      Temp1
    </h3>

    <h3 >
      Temp2
    </h3>
  </div>
</body>

</html>

CodePudding user response：

You misspelled

document.getElementByClassName("first-txt");

Change it to :

document.getElementsByClassName("first-txt");

And chump.length not chump.length()

Code same as :

function chumpage() {
  chump = document.getElementsByClassName("first-txt");
  for (var i = 0; i < chump.length; i  ) {
    chump[i].innerText = "temp3"
  }
}
chumpage()

.temp {
      margin: 3%;
      position: relative;
    }

    .first-txt {
      position: absolute;
      top: 17px;
      left: 50px;
    }

    .second-txt {
      position: absolute;
      bottom: 20px;
      left: 10px;
    }

<div >
  <img src="">
  <h3 >
    Temp1
  </h3>

  <h3 >
    Temp2
  </h3>
</div>

CodePudding user response：

Try this:

function chumpage() {
  var chump = document.getElementsByClassName('first-txt');
  for (var i = 0; i < chump.length; i  ) {
    chump[i].innerText = "temp3";
  }
}