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.
- The topic ‘Changing the value in the bm-editor-content with javascript’ is closed to new replies.