innerhtml string to multiple elements

Question

Is it possible to insert html into classes like so? It's not working and I have no errors in the console.

<p class="caption">Copyright &copy; <span class="yearTarget"></span></p>
<p class="caption">Copyright &copy; <span class="yearTarget"></span></p>
<p class="caption">Copyright &copy; <span class="yearTarget"></span></p>

<script>
    var currentYear = new Date().getFullYear();
    var yearTarget = document.getElementsByClassName("yearTarget");
    yearTarget.innerHTML = currentYear;
</script>

Mamun · Accepted Answer · 2018-07-28T11:17:37.317

2

Document.getElementsByClassName() returns an array-like object. You have to either specify index or iterate through all the elements to set innerHTML individually:

var currentYear = new Date().getFullYear();
var yearTarget = document.getElementsByClassName("yearTarget");
[...yearTarget].forEach(function(el){
  el.innerHTML = currentYear;
});

<p class="caption">Copyright &copy; <span class="yearTarget"></span></p>
<p class="caption">Copyright &copy; <span class="yearTarget"></span></p>
<p class="caption">Copyright &copy; <span class="yearTarget"></span></p>

edited Jul 28 '18 at 11:17

answered Jul 28 '18 at 11:11

Mamun

66,969
9
47
59

"[...yearTarget]" refused to go through the compiler, but it did the job. Thank you for your help. – chilledMonkeyBrain Jul 28 '18 at 11:20
@chilledMonkeyBrain, you are most welcome :) – Mamun Jul 28 '18 at 11:49

score 1 · Answer 2 · answered Jul 28 '18 at 11:12

1

document.getElementsByClassName("catlink")is selecting all the elements in webpage as array therefore you have to use [0]

yearTarget[0].innerHTML = currentYear;

answered Jul 28 '18 at 11:12

Osama

2,912
1
12
15

innerhtml string to multiple elements

2 Answers2