Not able to replace the image in the place of old image using javascript

Question

I couldn't able to replace new selected image in the place of old image. Here i have shown the selected image in the modal and allowing user to select the part of the image. In this case, i could able show the image in the modal itself. But i couldn't able to replace the old image when click save button. I tried modify the code to fix this but in my case the code is not working. Help me. Thanks in advance.

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

<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js"></script>

<!-- 		<input type="file" id="file-input"> -->
<p>Update</p>
<img class="dashboard-hme-img profile-pic" src="https://cdn.paperindex.com/piimages/dummy/vivek.png">
<i class="fa fa-camera upload-button"></i>
<input id="file-input" class="hidden" type="file" accept="image/*" />

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <!-- leftbox -->
        <div class="box-2">
          <div class="result"></div>
        </div>
        <!--rightbox-->
        <div class="box-2 img-result hide">
          <!-- result of crop -->
          <img class="cropped" src="" alt="">
        </div>
        <!-- input file -->
        <div class="box">
          <div class="options hide">
            <input type="hidden" class="img-w" value="200" min="200" max="1200" />
          </div>
          <!-- save btn -->

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button class="btn save hide">Save</button>
      </div>
    </div>

  </div>
</div>

Answer 1

I was able to get your code working with very little changes.

Your biggest problem was that your variables were getting created before they had anything in them, so they ended up being null.

All I did was move the cropped and dwn variable inside the save.addEvenListener and I removed some stuff that was getting set on dwn.

See jsFiddle

save.addEventListener("click", function(e) {
    var cropped = document.querySelector(".cropped");
  //var dwn = document.querySelector(".cropper-crop-box");
  var dwn = document.querySelector(".profile-pic");

  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.src = imgSrc;

  //dwn.classList.remove("hide");
  //dwn.download = "imagename.png";
  //dwn.setAttribute("href", imgSrc);
});