0

I have a situation in Google Chrome where the element's innerText is getting directly changed by my css's text-transform: uppercase. The mutation event is set off by a switch to and from contenteditable on a parent div.

innerText is initially "xyz", but after the switching, element.innerText is returning "XYZ" (still xyz in innerHTML).

let doct = document.getElementById("docTitle");

var changeDocumentTitle = function(e) {
  console.log('changeDocumentTitle: ' + document.getElementById("docTitle").innerText);
};

//  TODO: code for using mutation observer. Works in Firefox, ends up capitalizing the title in google
var observer = new MutationObserver(changeDocumentTitle);
var config = {
  attributes: true,
  childList: true,
  subtree: true
};
observer.observe(doct, config);
#docTitle {
  display: block;
  font-size: 32px;
  font-weight: 900;
  color: inherit;
  margin: 0.67em 0;
  page-break-after: avoid font-family: Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
}
<h1 id="docTitle">xyz</h1>

I am seeing this in Chrome, but not in Firefox. Is this a bug in chrome? Is there a workaround? I thought of just trying to strip the html tag parts out of .innerHTML... Is that my best bet?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
ControlAltDel
  • 33,923
  • 10
  • 53
  • 80
  • It's a bug in Firefox. Use `.textContent`. See https://stackoverflow.com/a/35213639/8898840 – Guy Incognito May 29 '20 at 19:53
  • Although now that I try your code it behaves identically in Chrome and Firefox. – Guy Incognito May 29 '20 at 19:56
  • I fixed the snippet code's error of `Uncaught TypeError: Failed to construct 'MutationObserver': The callback provided as parameter 1 is not a function.`; it was using strict mode, if I'm not mistaken, so `changeDocumentTitle` was undefined since it was used before it was declared. – Heretic Monkey May 29 '20 at 20:03
  • `innerText` has to do with rendering (it also excludes some types of hidden text, for example). Like Guy Incognito said, use `textContent` to get the actual text. – Ry- May 29 '20 at 20:04
  • I'm not seeing any console logs in the snippet using Chrome Version 83.0.4103.61 (Official Build) (64-bit) on Windows 10; not sure why that is... – Heretic Monkey May 29 '20 at 20:05
  • @HereticMonkey MutationObserver triggers only when the content changes, but there's nothing in the code that would change the content so it never runs. – Guy Incognito May 29 '20 at 20:08
  • @GuyIncognito I figured that, so I changed the text in DevTools. Still no logs. – Heretic Monkey May 29 '20 at 20:09
  • Ah, you have to add a node or change an attribute; changing the text is not enough for mutation observer... interesting. – Heretic Monkey May 29 '20 at 20:11
  • 1
    @HereticMonkey If you changed the text in the console's inspector, that doesn't trigger any events. If you do `document.getElementById("docTitle").innerText = "foo"` it works. – Guy Incognito May 29 '20 at 20:12
  • And as I read the question again, the OP mentions the mutation event is triggered off of a change in a `contenteditable` change on an unincluded `div`... – Heretic Monkey May 29 '20 at 20:16
  • @GuyIncognito Thank you thank you for the information about textContent. I was wholly unaware. I have gone and changed all of my `.innerText`s to `.textContent`s as this is how I was intending to using `.innerText`. This is absolutely the answer to my question, so if you want to enter it as an answer I will check it as correct. Otherwise I'll eventually answer my own question... With your answer :) – ControlAltDel May 29 '20 at 20:48

1 Answers1

2

Guy Incognito answered this question in his first comment noting that I was using .innerText incorrectly, and that I should be using (and am now using) .textContent to get an element's -er- text content.

ControlAltDel
  • 33,923
  • 10
  • 53
  • 80