How do you insert HTML before OJS cells run?

[axiomtutor]

Description

I wrote the following minimal .qmd file:

---
title: "Demo"
---

<canvas id="canvas"></canvas>

\`\`\`{ojs}
{
const canvas = document.getElementById("#canvas");
console.log(canvas);
}
\`\`\`

and this logs that the canvas object is undefined.

I'm guessing that Quarto runs the OJS cell before inserting the HTML. Is there a way to control this order of operations? Or is there some other way to "order" the insertion of HTML elements, such that it occurs before OJS cells are run?

---

(In case anyone is curious, I'm trying to do this because I will eventually have a document with a number of canvas elements, and each should be governed by a different OJS cell. I'd also like to have the OJS code at the bottom of the page, there only for reference. So I'm trying to name the canvases by IDs so that the code at the bottom of the document can find the canvases by ID.)

[jimjam-slam]

Hey @axiomtutor! Try document.getElementById("canvas"). That function takes a bare ID name (without the hash symbol), as opposed to a function like querySelector() or querySelectorAll() that takes a CSS selector (including the hash).

I believe OJS cells first run after the DOM is loaded, but I'm not 100% sure (they are Promises, so they do update naturally when their dependent cells update, but I'm not sure whether they re-run when DOM nodes change. My instinct is "probably not") . But there are a couple of other problems:

• Unnamed OJS cells typically print the thing returned, so if you wrap a chunk in braces (which define a single, multi-statement cell) and run console.log(x) last, you see what console.log() returns (which is always undefined, not x). Check the log if you're running console.log to see what it outputs—you're calling it for its side effect, not its return value.
• I'm not 100% sure on this, but I think bare HTML needs to be wrapped in a {=html} block.

Try this!

---
title: "OJS Test"
---

```{=html}
<canvas id="canvas"></canvas>
```

```{ojs}
canvas = document.getElementById("canvas")
canvas
```

End

This OJS chunk is actually two cells: the first is a named cell, canvas, and then the second, unnamed cell just prints that first one.

[mcanouil]

I'm not 100% sure on this, but I think bare HTML needs to be wrapped in a {=html} block.

In some cases, Pandoc/Quarto will be able to parse them but at the risk of processing those blocks.
It's recommended to use raw blocks syntax to include any raw/bare language (latext/html/etc.) to ensure it is not processed and kept as is at the end.

[axiomtutor]

Oh right, I forgot about the HTML code block! -- I think I even went looking for it in the docs but for whatever reason didn't find it (maybe just skimming too fast). And another "oh right!", I took "#canvas" from one thing that I'd seen, using a jQuery thing, and getElementByID from another thing, and didn't realize I was mixing the two.

Thanks to you and @mcanouil! This all makes total sense now.