I want to change h1 and that is my code but I run it is not changing the text help me

Question

0.00/5 (No votes)

See more:

<pre lang="Javascript">
 function chngetxt(){
 var items = document.getElementsByClassName('items');
      console.log(items);
       items.textContent="goodbye";}

<pre lang="HTML">
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link type="text/CSS" href="C:/Users/ITDEPARTEMENT/Desktop/practice/DOM.css" rel="stylesheet"/>
    <title>the page</title>
    
  </head>
  <body >
    
    <h1 class="items">the items</h1>
    <ul >
      <li >item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
    <form>
      <button onclick="chngetxt();">clickme to change the text</button>
    </form>
    <script  src="DOM.js">
      
    </script>
   
  </body>
</html>

What I have tried:

i have tried to change the position of the script tag but it is not changing m text .
o would suspect that it may be the browser but am not sure .anyway am using chrome.

Posted 21-Jul-21 5:29am

munaziri BNM

Updated 15-Sep-21 3:50am

Add a Solution

Comments

Nathan Minier 21-Jul-21 14:21pm

You're trying to apply a single object interaction to an array. No, it's not gonna work. Here's the documentation for the method you're using:
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

So, unless you want to use a single-element selector (such as getElementById) then you should iterate the result to apply your changes. Like so:

function chngetxt(){
var items = document.getElementsByClassName('items');
for(let i = 0; i < items.length; i++){
items[i].textContent="goodbye";
}
}

SeeSharp2 22-Jul-21 9:06am

You should post as solution, but I don't think textContent is correct. Should be innerText.

https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

Nathan Minier 22-Jul-21 9:13am

According to MDN innerContent is the same thing, but doesn't go through the HTML parser so has less overhead. I've never used it before, but that doesn't mean I'm not willing to give it a shot.

SeeSharp2 22-Jul-21 9:40am

textContent (not innerContent) was new to me too but the documentation says it also gets child elements. I doubt they want that, even though there are none.

munaziri BNM 22-Jul-21 4:39am

Nathan thank you very much

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 11746136 · Answer 1 · 2021-09-15T03:50:00

Solution 2

use

innerText

instead of

textContent

Posted 15-Sep-21 3:50am

Member 11746136