How to turn action into a function in Javascript

Question

I have a number of translations to do on a page (worpress site) and I want to do it using javascript rather than get into php code. So I have a number of similar actions to be done where I select a class using getElementsByClassName which returns an HTML collection then turn that into an Array and then use a forEach function to change the textContent. Simple enough and it works:

let verMas = document.getElementsByClassName('read-more-button');
let verMasA = Array.from(verMas);

verMasA.forEach(function(verMasL){
verMasL.textContent = 'Ver mas...';
});

The problem is that I have several of these little translations to do ALL basically the same action so the obvious solution is to turn the above into a function but I am not getting it right. This is what I did:

function traducirArray(a,cla,b,c,d) {
 let a = document.getElementsByClassName(cla);
 let b = Array.from(a);  

 b.forEach(function(c){
 c.textContent = d;
 return d;
 });  

}

traducirArray(verMas, 'read-more-button',verMasA,verMasL,'Ver más');

At the end I call the function but it is not working. What am I doing wrong?

You are shadowing the `a, b, c, d` parameters with local variables. — VLAZ, Jan 29 '20 at 14:10

Tyler Roper · Answer 1 · 2020-01-29T14:23:48.787

Although you're shadowing your parameters (as pointed out by VLAZ), you actually don't even need those parameters.

It seems all you need to complete your desired task are the class name and the new text content.

Something like this should suffice:

function traducirArray(className, textContent) {
  let verMas = document.getElementsByClassName(className);
  let verMasA = Array.from(verMas);
  verMasA.forEach(function(verMasL){
    verMasL.textContent = textContent;
  });
}

traducirArray("read-more", "Hello world!");

<div class="read-more"></div>
<div class="read-more"></div>
<div class="read-more"></div>

Alternatively, you could select your items using querySelectorAll(). The return type (NodeList) doesn't require you to convert to an array before using forEach().

function traducirArray(className, textContent) {
  document.querySelectorAll(`.${className}`).forEach(el => el.textContent = textContent);
}

traducirArray("read-more", "Hello world!");

<div class="read-more"></div>
<div class="read-more"></div>
<div class="read-more"></div>

score 1 · Accepted Answer · answered Jan 29 '20 at 14:18

As mentioned in the comments, you do not need to create local variables outside the scope of the function (specifically for a, b, and c). Instead, just pass the class name and new text content to your function:

function traducirArray(className, content) {
  let a = document.getElementsByClassName(className);
  let b = Array.from(a);  

  b.forEach(function(c) {
    c.textContent = content;
  });  
}

traducirArray('prettyPrint', 'Ver más');

score 1 · Answer 3 · answered Jan 29 '20 at 14:19

As VLAZ has said, you're shadowing the parameters you pass to the function by redeclaring them as local variables. It's a bit hard to tell what you're trying to do, but from the looks of things you only need one parameter in your function.

function traducirArray(cla,d) {
var a = document.getElementsByClassName(cla);
var b = Array.from(a);  

b.forEach(function(c){
c.textContent = d;
 return d;
 });  

}

traducirArray('read-more-button','Ver más');

How to turn action into a function in Javascript

3 Answers3