Update text from variable using a common function javascript

Question

I want to make a common function that can be call in html so I can update the value from variable.

function getActivityPoint(activityName) {
   document.getElementsByClassName('share_points')[0].innerHTML = activityName;
}

my variable

var ap = {
   'movie_review':'20',
}

And in HTML I would like to do this.

<div class="share_points" onload="getActivityPoint(ap.movie_review)">-</div>
<div class="share_points" onload="getActivityPoint(ap.game_review)">-</div>
.............

So...what's the problem?

HollyLeaves
– HollyLeaves

2018-04-12 19:16:56 +00:00
Commented Apr 12, 2018 at 19:16 — HollyLeaves
– HollyLeaves, Commented Apr 12, 2018 at 19:16
its not working

Santosh
– Santosh

2018-04-12 19:21:36 +00:00
Commented Apr 12, 2018 at 19:21 — Santosh
– Santosh, Commented Apr 12, 2018 at 19:21

gaetanoM · Accepted Answer · 2018-04-12 19:47:13Z

2

The inline onload event does not work for a div.

You may change your code in order to change your divs, using data attributes, like:

<div class="share_points" data-load="movie_review">-</div>

and on window load you can do your work:

window.addEventListener("load", function(event) {
    document.querySelectorAll('.share_points').forEach(ele => getActivityPoint(ele, ap[ele.dataset.load]));
});
function getActivityPoint(ele, activityName) {
    ele.textContent = activityName;
}

var ap = {
    'movie_review':'20',
    'game_review': 10
}

/****************
 For Compatibility issue you may write:

window.addEventListener("load", function (event) {
            Array.prototype.slice.call(document.querySelectorAll('.share_points')).forEach(function (ele) {
      getActivityPoint(ele, ap[ele.dataset.load]);
   });
});

For IE < 9 the solution is:

 window.addEventListener("load", function (event) {
  var divs = document.querySelectorAll('.share_points');
  for (i = 0; i < divs.length; i++) {
      getActivityPoint(divs[i], ap[divs[i].dataset.load]);
  }
});
        
*/

<div class="share_points" data-load="movie_review">-</div>
<div class="share_points" data-load="game_review">-</div>

edited Apr 12, 2018 at 19:47

answered Apr 12, 2018 at 19:28

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Xotic750 Over a year ago

Are all browsers equal?

Santosh Over a year ago

@Xotic750 no not at all but I am just trying to add the value from variable to html element. and it should be there at for all browsers.

Santosh Over a year ago

@Xotic750 No not all. I don't care that below 9.

Xotic750 Over a year ago

I personally don't even care for IE11 support, but IE<9 doesn't have support for addEventListener, IE<8 doesn't support querySelectorAll and dataset is not supported below IE11 :)

Santosh Over a year ago

Guys Please suggest which one should I use ? 1st, 2nd or 3rd solution ? dataset not working in ie9 and ie10 ? should I use the first one ?

|

Yosvel Quintero · Accepted Answer · 2018-04-13 11:03:46Z

1

You can do:

var ap = {
      'movie_review': '20',
      'game_review': '100'
    },
    share_points = document.getElementsByClassName('share_points');

window.addEventListener('load', function() {
  Array.prototype.forEach.call(share_points, function(el) {
    el.innerHTML = ap[el.dataset.review];
  });
});

<div class="share_points" data-review="movie_review">-</div>
<div class="share_points" data-review="game_review">-</div>

edited Apr 13, 2018 at 11:03

answered Apr 12, 2018 at 19:28

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

4 Comments

Santosh Over a year ago

so for next I have to do ` share_points[1].innerHTML = ap.game_review;` ?

Yosvel Quintero Over a year ago

Yes.. I am improving my answer to make it more dynamic.. @gaetanoM is a better answer

Yosvel Quintero Over a year ago

Improved answer

Santosh Over a year ago

Thanks for your effort but I guess this code will not run over all browsers. That arrow => might be buggy. don't you think ?

Collectives™ on Stack Overflow

Update text from variable using a common function javascript

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related