Question 277319 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Property 'innerText' does not exist on type 'HTMLCollectionOf<Element>'

I am trying to excess the html element and want to replace the inner content:-
Here is the code i am trying:-

import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor";

export const handleSignatureSelect = (
  signature: string,
  editorRef: React.RefObject<RichTextEditorComponent>
) => {
  const currentSignature = document.getElementsByClassName("gmail_signature");
  if (currentSignature) {
    currentSignature.innerText = signature;
    return;
  }

  editorRef.current?.executeCommand(
    "insertHTML",
    `<br><br clear="all"><div><br></div><br><div dir="ltr" class="gmail_signature" 
     data-smartmail="gmail_signature">${signature}</div>`
  );
};
Tags:

2

Answers


  1. 0

    You code should be like this because after using getElementByClassName it return an array.

      const currentSignature = document.getElementsByClassName("gmail_signature")[0];
  if (currentSignature) {
    currentSignature.innerText = signature;
    return;
  }
    Login or Signup to reply.
  2. 0

    It looks like you’re encountering a TypeScript error indicating that the 'innerText' property does not exist on the type 'HTMLCollectionOf<Element>'. This error occurs because getElementsByClassName returns a collection of elements, not a single element, and TypeScript is reminding you that 'innerText' should be used on an individual element, not a collection.

    To address this, you need to specify the index of the element you want to modify. Here’s an updated version of your code:

    import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor";

export const handleSignatureSelect = (
  signature: string,
  editorRef: React.RefObject<RichTextEditorComponent>
) => {
  const currentSignature = document.getElementsByClassName("gmail_signature")[0];

  if (currentSignature) {
    currentSignature.innerText = signature;
    return;
  }

  editorRef.current?.executeCommand(
    "insertHTML",
    `<br><br clear="all"><div><br></div><br><div dir="ltr" class="gmail_signature" 
     data-smartmail="gmail_signature">${signature}</div>`
  );
};

    This change selects the first element with the class "gmail_signature" from the collection returned by getElementsByClassName. Note that it assumes there is at least one element with that class.

    Remember that accessing elements by class name like this can be risky if there’s a chance that multiple elements could have the same class. If that’s the case, you might want to consider using more specific selectors or using the querySelector method instead.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search