CODEWITHSUNDEEP
javascriptjquerycss
rob.m
rob.m

Reputation: 10571

Capitalize first letter of various tags content element

I need to capitalize the first letter of various html elements such as p, h2, h3, h4.

This stack question has helped me, however, it only targets the p tag. How can I say to target more than one tag?

Such as:

function change(charm) {
   var string = eval(charm).toLowerCase(), change = "", newstring = string.split("."),   tochange;
   for (var i = 0; i < newstring.length; i++) {
       tochange = newstring[i].trim().charAt(0);
       newstring[i] = newstring[i].replace(tochange, tochange.toUpperCase());
}
   change = newstring.join(" . ");
   return change;
}

var text = change("document.getElementsByTagName('p, h2, h3, h4')[0].innerHTML");
document.getElementsByTagName("p, h2, h3, h4")[0].innerHTML = text;

That doesn't work, am I doing something wrong with targetting various elements?

Upvotes: 2

Views: 1303

Answers (2)

canon
canon

Reputation: 41675

getElementsByTagName() won't accept a comma-separated list... it expectes either one tag name or an asterisk.

Try querySelectorAll() instead.

Upvotes: 1

Nick Tomlin
Nick Tomlin

Reputation: 29221

A CSS only approach: 

p:first-letter,
h1:first-letter,
h2:first-letter,
h3:first-letter,
h4:first-letter {
  text-transform: uppercase;
}

:first-letter is ie9+

Upvotes: 6

Related Questions