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>
>Solution :
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>