how to convert this jquery into javascript? [closed]

Question

I have been using this jquery code and I want to convert this into javascript. I have recently started javascript and I have a little knowledge in jquery

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $(".row a").click(function (e) {
      e.preventDefault();
      $(".imgBox img ").attr("src", $(this).attr("href"));
    });
  });
</script>

Answer 1

The equivalent in vanilla JavaScript is (I added some HTML to make it work):

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll(".row a").forEach(function(elem) {
        elem.addEventListener("click", function (e) {
            e.preventDefault();
            document.querySelector(".imgBox img").src = elem.href;
        });
    });
});

<div class="row">
    <a href="https://dummyimage.com/600x120/000/fff">link 1</a>
</div>
<div class="row">
    <a href="https://dummyimage.com/600x120/00f/f88">link 2</a>
</div>
<div class="imgBox"><img src=""/></div>

Answer 2

Following instruction from this cheatsheet: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/

const ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => { 
  /* Do things after DOM has fully loaded */
  document.querySelector(".row a").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".imgBox img ").setAttribute('src', document.querySelector(".imgBox img ").getAttribute('href));
  });
});