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