How can JS Detect changes in the HTML such as ctr+shift+i input?

Question

Here is a website I am currently developing. As a challenge for the user we are asking them to use ctrl+shift+i to interact with the HTML and change certain elements.

How can Javascript, or html/css detect that they changed that?

i.e.

<div>
  <p>This is placeholder text</p>
</div>

We want them to change that placeholder text to something specific and then grant them access to a new page.

Have you debugged and inspected what properties are available on the event, in the case that you hit those key strokes? — Taplar, Apr 23 '20 at 15:23
The best I can think of is periodically scanning the content of these elements and seeing if anything has changed — Joeri, Apr 23 '20 at 15:25
Does this answer your question? [Mutation Observer Not Detecting Text Change](https://stackoverflow.com/questions/40195514/mutation-observer-not-detecting-text-change) — jmargolisvt, Apr 23 '20 at 15:39
Does this answer your question? [Is there a JavaScript / jQuery DOM change listener?](https://stackoverflow.com/questions/2844565/is-there-a-javascript-jquery-dom-change-listener) — Heretic Monkey, Apr 23 '20 at 15:49
@ItsLogic this sould explain it https://jsfiddle.net/4maLhq5e/2/ — Joeri, Apr 29 '20 at 13:45
@Joeri that looks conclusive, but because I haven't worked with this before, could you tell me what should go in the '#this_should_change' parameter and if I need to change `document.querySelector` — Noah, Apr 30 '20 at 15:25
`#this_should_change` is the element of which you want users to change the contents. What this does is load the content of that element on page load and periodically check it for changes — Joeri, Apr 30 '20 at 15:37
@Joeri thank you, I set an id to changeThis, assigned it to the element, and added it to the script you gave me and it worked perfectly. — Noah, Apr 30 '20 at 15:40
@ItsLogic I'll add it as an answer then so that we can close this question — Joeri, Apr 30 '20 at 15:57

Joeri · Accepted Answer · 2020-05-06T10:58:39.650

As posted in the comments, it is possible to load the default content of an element on page load and then periodically scan for changes

window.onload = () => {
  let changeCheck = document.querySelector('#this_should_change'); // get the element
  let oL = changeCheck.innerHTML; // load the default values
  let check = setInterval(() => {
   if (changeCheck.innerHTML !== oL) { // if the values are different from the values on load
     alert("Stuff changed"); // your code
      clearTimeout(check); // clear the interval so that it does not repeat itself
    }
  }, 100); // this will check the element every second
};

<p id="this_should_change">
  Foo
</p>

How can JS Detect changes in the HTML such as ctr+shift+i input?

1 Answers1