JavaScript代码可以在Codepen上正常工作，但不能在小提琴上工作。找不到

Question

Thread.sleep

嗨，我是JavaScript新手，正在研究一些代码。问题是相同的代码在Codepen上可以正常工作，但在小提琴和我的页面上却不能正常工作。我无法找到为什么它的工作在codepen而不是fiddle上以及发生了什么的原因。我在上面也给出了我的Codepen网址。请向我解释并帮助我解决此问题。

Codepen URL: https://codepen.io/pkprabu/pen/zmRqgZ

"use strict";

// vars
var result = document.querySelector(".result"),
  img_result = document.querySelector(".img-result"),
  img_w = document.querySelector(".img-w"),
  img_h = document.querySelector(".img-h"),
  options = document.querySelector(".options"),
  save = document.querySelector(".save"),
  cropped = document.querySelector(".cropped"),
  dwn = document.querySelector(".download"),
  upload = document.querySelector("#file-input"),
  cropper = "";
// on change show image with crop options
upload.addEventListener("change", function(e) {
  if (e.target.files.length) {
    // start file reader
    var reader = new FileReader();
    reader.onload = function(e) {
      if (e.target.result) {
        $(".modal").modal("show");
        // create new image
        var img = document.createElement("img");
        img.id = "image";
        img.src = e.target.result;
        // clean result before
        result.innerHTML = "";
        // append new image
        result.appendChild(img);
        // show save btn and options
        save.classList.remove("hide");
        options.classList.remove("hide");
        // init cropper
        cropper = new Cropper(img);
      }
    };
    reader.readAsDataURL(e.target.files[0]);
  }
});
// save on click
save.addEventListener("click", function(e) {
  e.preventDefault();
  // get result to data uri
  var imgSrc = cropper.getCroppedCanvas({
    width: img_w.value // input value
  }).toDataURL();
  // remove hide class of img
  cropped.classList.remove("hide");
  img_result.classList.remove("hide");
  // show image cropped
  cropped.src = imgSrc;
  dwn.classList.remove("hide");
  dwn.download = "imagename.png";
  dwn.setAttribute("href", imgSrc);
});
$(".upload-button").on("click", function() {
  $("#file-input").trigger("click");
});

i:hover {
  cursor: pointer;
}

.dashboard-hme-img {
  max-height: 100%;
  max-width: 100%;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}

Answer 1

您忘记了CSS文件cropper.min.css

https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css

https://jsfiddle.net/2gda1Lho/