Как использовать ввод HTML для подачи в класс JavaScript

Question

Во-первых, я новичок в JS и учусь. Отсюда, вероятно, основной вопрос.

Я сделал скользящую головоломку на основе учебника онлайн. Я получаю большую часть этого, но теперь я пытаюсь сделать его более универсальным. Например, я хочу позволить пользователю ввести URL-адрес изображения и предпочтительные размеры головоломки (например, 3x3 или 4x4 и т. Д.), А затем запустить JS, чтобы создать головоломку с желаемыми характеристиками.

Ниже я добавил немного работающего HTML и JS. Я добавил значения по умолчанию, и код работает нормально. Однако я не могу сделать так, чтобы прослушиватель событий (например, onclick) запускал «new PicturePuzzle» с URL-адресом и измерениями, которые вводятся в поля ввода html в момент щелчка.

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-файл один (это полный файл JS):

import PicturePuzzle from './PicturePuzzle.js';

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

JS-файл два (PicturePuzzle.js), который расширяется после точек. Здесь содержится фактический код головоломки:

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

Answer 1

Вы можете попробовать обернуть часть, в которой вы создаете экземпляр класса PicturePuzzle, в функцию и вызывать ее из прослушивателя событий.

Если у вас есть кнопка для запуска всего процесса с идентификатором "btn ", вы можете сделать это следующим образом:

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
   );
}