-1

I need to change the content of spans with a class name using JavaScript. I prefer JavaScript over jQuery because this is a basic site and isn't loading a jQuery file, and I'd rather not add on the file just for this one thing. Here is what I've tried:

HTML:

blah blah blah <span class="new"></span> blah blah blah

JavaScript in external JavaScript file:

document.getElementsByClassName('.new')[0].innerHTML = 'new text here';

Hoping it would show up as: blah blah blah new text here blah blah blah

Did a search but only found ElementID solutions.

misterManSam
  • 24,303
  • 11
  • 69
  • 89
midknyte
  • 587
  • 3
  • 6
  • 18
  • 2
    `'.new'` without dot, so `document.getElementsByClassName('new')[0].innerHTML` – The Process Mar 28 '16 at 23:59
  • I removed the dot but it's still not working. I should have mentioned I tried that as well. Would the fact that I have my external js file loaded just before the

    tag make a difference? Or the [0] maybe? Note: All the other scripts on the js file work fine, so it's loading.

     – midknyte Mar 29 '16 at 00:08
  • According to [this fiddle](https://jsfiddle.net/4castle/2rz96p6q/) it works fine. Can you provide some code that reproduces your issue? – 4castle Mar 29 '16 at 00:11
  • thanks for creating the fiddle, helped a lot to see it worked. still wasn't working for me so there's something weird with the site. – midknyte Mar 29 '16 at 00:34

5 Answers5

3

You are almost there, Just remove the . from class name. The reason is, when you call the getElementsByClassName method. It Searches the whole Document for class names only.So you don't need to put . before the class name.

document.getElementsByClassName('new')[0].innerHTML = 'new text here';
The Process
  • 5,913
  • 3
  • 30
  • 41
M Sohaib Khan
  • 128
  • 2
  • 10
2

Tried the code on a different site on the same host and still didn't work. I modified the code based on an elementID code I found on a similar site within their host and this worked:

var newText = document.getElementsByClassName('new')[0];
newText.innerHTML = 'new text here';

No idea why, but this worked. Thanks for the responses!

midknyte
  • 587
  • 3
  • 6
  • 18
  • I think I know why. See [this question](http://stackoverflow.com/questions/28163033/when-is-nodelist-live-and-when-is-it-static). If you want the most stable & predictable solution, use the `onload` event. – 4castle Mar 29 '16 at 01:00
1

Don't put a period before new.

document.getElementsByClassName('new')[0].innerHTML = 'new text here';

Wowsk
  • 3,637
  • 2
  • 18
  • 29
0

Remove the dot . from '.new'. It is implied since the function only looks for classes.

Update: According to this question, yes, it's possible that putting your JavaScript code at the bottom still isn't always enough to guarantee the DOM is fully loaded. You will have to do the replacement after document.onload.

document.onload = function() {
    document.getElementsByClassName('.new')[0].innerHTML = 'new text here';
}
Community
  • 1
  • 1
4castle
  • 32,613
  • 11
  • 69
  • 106
-1

As it has been stated already, remove the dot ('.') from your selector. If you would like to select classes that way, I'd recommend using document.querySelector or document.querySelectorAll :)

Jannik Rasmussen
  • 397
  • 1
  • 5