CODEWITHSUNDEEP
javascriptfunction
L. core
L. core

Reputation: 41

Targeting the class of multiple elements instead of id to do an action with javascript

First, sorry I'm not good with javascript.

HTML:

<div id="Comment-ID">
   <p class="Comment-class">...</p>
   <p class="Comment-class">...</p>
   <p class="Comment-class">...</p>
   <p class="Comment-class">...</p>
 </div>

Javascript:

<script type='text/javascript'>
function autoloadmore() {
  var loadmoreClass = document.getElementsByClassName(&quot;loadmore&quot;)[0];
  var loadmoreChild = loadmoreClass.querySelector(&#39;a&#39;)

  if (loadmoreClass) {
    loadmoreChild.click();
  }
}
//<![CDATA[
function InsertarImagenVideo(id) {
var IDelemento = document.getElementById(id),
sustituir = IDelemento.innerHTML;
sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
document.getElementById(id).innerHTML = sustituir;
}
//]]>



window.onload = function() {
  autoloadmore();
  setTimeout(function(){
    InsertarImagenVideo('Comment-ID');
  },3000);
};
</script>

InsertarImagenVideo replaces some text inside with an image. Instead of Comment-ID, I want to target what inside p elements using Comment-class.

Note: The HTML can't be changed.

Can someone please help me with this?

Upvotes: 0

Views: 43

Answers (4)

MarcoS
MarcoS

Reputation: 17711

function InsertarImagenVideoByClass(class) {
  var IDelementos = document.querySelectorAll(className);
  Array.prototype.forEach.call(elements, function(element) {
    sustituir = element.innerHTML;
    sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
    element.innerHTML = sustituir;
  }
}

window.onload = function() {
  autoloadmore();
  setTimeout(function() {
    InsertarImagenVideo('.Comment-class');
  }, 3000);
};

Upvotes: 1

MarcoS
MarcoS

Reputation: 17711

You have to use a function like document.getElementsByClassName which returns an array, instead then a single value. To process all the elements of the array to do the modifications you have to use a loop:

function InsertarImagenVideoByClass(className) {
  var elements = document.querySelectorAll(className);
  Array.prototype.forEach.call(elements, function(element) {
    sustituir = element.innerHTML;
    sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
    element.innerHTML = sustituir;
  });
}

window.onload = function() {
  autoloadmore();
  setTimeout(function() {
    InsertarImagenVideo('.Comment-class');
  }, 3000);
};

Upvotes: 1

Mamun
Mamun

Reputation: 68943

You have to use loop to get all the elements to do the modifications. If your code works using the id then following code should work:

function InsertarImagenVideo(myClass) {
  var ClassElemenTo = [].slice.call(document.querySelectorAll(myClass));
  ClassElemenTo.forEach(function(el){
    var sustituir = el.innerHTML;
    sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
    el.innerHTML = sustituir;
 });
}

And call the function by passing the class name preceded by dot (.):

InsertarImagenVideo('.Comment-class');

Upvotes: 1

briosheje
briosheje

Reputation: 7446

Just change your InsertarImagenVideo function in order to look for a class instead.

function InsertarImagenVideo(className) {
  if (!className) { console.error('Class name is mandatory.'); return; }
  var classElements = document.querySelectorAll(className);
  Array.prototype.forEach.call(classElements, function(el){
    var sustituir = el.innerHTML;
    sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
    el.innerHTML = sustituir;
 });
}

Note that .forEach.call is used instead, since the collection returned is not a regular one, but a NodeList instead.

and call the function passing the class name instead

InsertarImagenVideo('Comment-class');

Upvotes: 1

Related Questions