Binding Fabric.js to data

[gragusa]

I am trying to create a UI using Fabric.js. I have

DrawingCanvas() = @htl("""	
	<div id="parent">
    	<canvas id="sheet" width="400" height="400"></canvas>
		<button id="clear">Clear</button>
		<button id="guess">Guess</button>
	</div>
	
	<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js'></script>
	
    	<script type='text/javascript'>       
		const pDiv = currentScript.closest('pluto-output').querySelector("div#parent")
		var clear  = pDiv.querySelector("#clear")
		var guess  = pDiv.querySelector("#guess")

                var canvas = new fabric.Canvas('sheet');
                canvas.isDrawingMode = true;
                canvas.freeDrawingBrush.width = 5;
                canvas.freeDrawingBrush.color = "#000000";			
		
	        var href = "";
                guess.addEventListener("click", (e) => {
				href = canvas.toDataURL({
        		  format: 'png'
    			}).toString();
				pDiv.value = href;		
				pDiv.dispatchEvent(new CustomEvent("input"));
				console.log(href)
				console.log(pDiv.value)
			})
		pDiv.value = href;
		clear.addEventListener("click", (e) => {
                                                     canvas.clear(); 
                                                     pDiv.value="";})				
    	</script>
""")

Everything works, except (big exception) the binding of pDiv.value. Am I doing something obviously wrong?

[fonsp]

What exactly is the problem/error?

[gragusa]

@fonsp I am stupid enough that I defined pDiv as a const.....

[fonsp]

Okay! About the querySelector, take a look at the "Selecting" section in https://plutocon2021-demos.netlify.app/fonsp%20%E2%80%94%20javascript%20inside%20pluto

[fonsp]

Would you mind posting your solution so that other people can use it?