problem accessing content in html view

I'm trying to use html view for custom html + js in Prodigy 1.5.1. The issue is with accessing the text from my content element in the HTML file with Javascript.

Say, I have this html:

    <div class="card">
      <div class="content">Lorem ipsum dolor sit amet , consectetur adipiscing elit.</div>
    </div>

And this javascript:

    "use strict";
    content.log(document.querySelector(".content"));
    var t = document.querySelector(".content");
    content.log(t.innerHTML);

This results in an uncaught reference error: content is not defined.

What is the correct mechanism for getting the text into the Javascript?

Hi! I think the problem might actually be the subtle typo of content.log vs. console.log – so the script already fails on that and doesn’t evaluate anything further.

Aside from that, how you’re doing it definitely looks correct!

Sorry, my bad about the typo. It's a different error actually, but it is definitely an error.
So if we have this code:

"use strict";

console.log(document.querySelector(".text_content"));
var t = document.querySelector(".text_content");
console.log(t.innerHTML);

and this html:

<div class="card">
    <div class="text_content">Lorem ipsum dolor sit amet , consectetur adipiscing elit.</div>
</div>

The error is as follows:

As you can see, in the browser console the text elements do exist and can be accessed. But for whatever reason the same doesn't happen within prodigy.

Ahh, okay. Looks like the problem here is that both the script and the custom HTML are mounted at the same time – so when the script is executed, there’s no .text_content <div> yet.

In most cases, the custom JS would be wrapped in a function and triggered by a user action, e.g. a button click. This makes it easier, because by the time the function is called, the DOM note you want to reference will be available:

<button onclick="doSomething()">Do something</button>
function doSomething() {
    var t = document.querySelector('.text_content');
    // etc.
}

Alternatively, the app also dispatches the custom event prodigymount when the HTML interface is mounted, so you could also try something like this:

document.addEventListener('prodigymount', event => {
    var t = document.querySelector('.text_content');
})

Ok, thanks! This works now.

1 Like