Changing the value in the bm-editor-content with javascript

Hello,

I’m trying to change the value inside the div that has bm-editor-content class with javascript. This is the place where messages are written on the chat page. What I’m trying to achieve is after I type my message, I will copy the written text in this field and the javascript will translate this text to a language via Google Cloud Translation and will fill this field with the translated text.

I have the following code that works great alone on an HTML page when I tested it out. However, when I place the code in the chat page, It does not perform the action and It gives “inputText” variable is null error.

<div class="bm-editor-content wp-exclude-emoji" placeholder="Mesajınızı yazın..." contenteditable="true">Merhaba, nasılsın?</div>

<script>

const inputText = document.querySelector('.bm-editor-content');
document.addEventListener("copy", (event) => {
const text = window.getSelection().toString();
  
fetch(https://translation.googleapis.com/language/translate/v2/detect?key=API=${text})
.then((response) => response.json())
.then((data) => {
const language = data.data.detections[0][0].language;
fetch(https://translation.googleapis.com/language/translate/v2?key=API=${text}&source=${language}&target=en)
.then((response) => response.json())
.then((data) => {
const translatedText = data.data.translations[0].translatedText;
inputText.textContent = translatedText;
})
})
.catch((error) => console.log(error));
});

</script>

Does someone have an idea on how to work this out? Maybe someone who was looking for the same solution?

I appreciate any help.

Regards.

• This topic was modified 3 years, 2 months ago by baedyllion.