I removed getQuery and getElementsByClassName lines

and extract your JavaScript outside svg and it works … try this :

const start = new Date('5/23/2013');
      const today = new Date();
      const diffTime = Math.abs(today - start);
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 

      document.getElementById("journaled").textContent = diffDays;

<svg id="test"  viewBox="0 0 99 75.5">
  <defs>
    <style>
      .calendar {
        font-size: 12px;
        font-family: Georgia;
      }

    </style>
  </defs>
  <text contentEditable="true" class="calendar" id="journaled" transform="translate(20 51.63)">number</text>
</svg>

I have a small SVG illustration of a flip calendar. I’ve added a text field that currently says “number” in it. I’m trying to display how many days have passed since a specific date, but since every day it increases by one, I want to have an active script updating the number on my website. The illustration was made on Adobe Draw, so the strokes are rather lengthy and confusing, so I removed all of the illustration parts of the SVG for clarity – inside the SVG tags is only the text field.

I think I am missing a key point about how to change the innerText for a text field. On examples I’ve found on MDN web docs, you can use the DOM to change attributes inside an SVG, but I have no luck. I have tried:

   document.getQuery(".calendar").innerText = diffDays; 
   document.getElementsByClass("calendar").innerText = diffDays;
   document.getElementById("journaled").innerText = diffDays;

<svg id="test"  viewBox="0 0 99 75.5">

<script type="text/javascript">
  const start = new Date('5/23/2013');
  const today = new Date();
  const diffTime = Math.abs(today - start);
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

  document.getQuery(".calendar").textContent = "is anything working?";
  document.getElementsByClassName("calendar").textContent = diffDays;
  document.getElementById("journaled").textContent = diffDays;
</script>

<defs>
  <style>
    .calendar {
      font-size: 12px;
      font-family: Georgia;
    }
  </style>
</defs>
<text contentEditable="true" class="calendar" id="journaled" transform="translate(20 51.63)">number</text>

</svg>

I have also researched the problem that displays in the console, “Uncaught TypeError: document.getQuery is not a function” and I can’t find any resources relevant to SVGs. Any help would be greatly appreciated. JSFiddle