I have a problem with JS code. Well, the text of the first link changes. The second one stays the same and I would like to change too. How to do it correctly?
HTML:
<h4 class="comments-title">Text1</h4>
<a rel="nofollow" class="comment-reply-link" href="#comment-25416">reply</a>
<a rel="nofollow" class="comment-reply-link" href="#comment-2">reply</a>
JS:
function podmien(klasa, tekst) {
document.querySelector(klasa).innerHTML = tekst;
}
document.addEventListener('DOMContentLoaded', function() {
podmien('.comments-title', 'Com');
podmien('.comment-reply-link', 'Answer');
Document.getElementsByClassName
});
querySelector will only select the first element. What you need is querySelectorAll to select all elements.
function podmienAll(klasa, tekst) {
document.querySelectorAll(klasa).forEach(v => {
v.innerHTML = tekst;
});
}
document.addEventListener('DOMContentLoaded', function() {
podmienAll('.comments-title', 'Com');
podmienAll('.comment-reply-link', 'Answer');
});<h4 class="comments-title">Text1</h4>
<a rel="nofollow" class="comment-reply-link" href="#comment-25416">reply</a>
<a rel="nofollow" class="comment-reply-link" href="#comment-2">reply</a>