如何使用 HTML 输入为 JavaScript class 供电

Question

First off, I'm new to JS and learning. Hence the probably basic question.

I've made a sliding puzzle based of a tutorial online. I get most of it, but now I'm trying to make it more universal. As in, I want to allow a user to enter a url of an image and the preferred dimensions for the puzzle (eg 3x3 or 4x4 etc) and then have the JS run to make the puzzle with the desired specifications.

Below I've added some HTML and JS that is working. I added default values and the code runs fine. However, I can't seem to make it that an event listener (eg onclick) triggers the "new PicturePuzzle" with the url and dimensions that are entered in the html input fields at the moment of the click.

HTML:

    <p>
        <p>Paste the url of the image you want to use.</p>
        <input type="text" name="url" id="urlInput"
         value="https://live.staticflickr.com/933/43267995794_655733e7c6_b.jpg" required />
    </p>

    <p>
        <p>Select the dimensions you want the puzzle to be in.</p>
        <input type="number" name="dimension" id="dimensionInput" value="3" required/>
    </p>

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

JS file one (this is the complete js file):

import PicturePuzzle from './PicturePuzzle.js';

let picturePuzzle = new PicturePuzzle(
    document.getElementById('canvas'),
    document.getElementById('urlInput').value,
    600,
    document.getElementById('dimensionInput').value
);

JS file two (PicturePuzzle.js), which extends further after the dots. This contains the actual code for the puzzle:

export default class PicturePuzzle {
    constructor(canvas, imageSrc, width, dimension) { ....

Answer 1

You could try wrapping the part where you create an instance of the PicturePuzzle class in a function and call that from an event-listener.

Assuming you have a button to start the whole process with the id "btn", you could do that as follows:

const canvas = document.getElementById('canvas');
const urlInput = document.getElementById('urlInput');
const dimensionInput = document.getElementById('dimensionInput');
const btn = document.getElementById('btn')

btn.onclick = createPuzzle; 

function createPuzzle() {
   return new PicturePuzzle(
      canvas,
      urlInput.value,
      600,
      dimensionInput.value
   );
}