getElementsByClassName(className) returning null

Question

What to do if I have to insert some value on a page element of a new tab within a Chrome extension?

I am using:

document.getElementsByClassName("quotes").innerHTML = Quotes[x];

in newtab-script.js page but it is showing this error in the console:

Uncaught TypeError: Cannot set property 'innerHTML' of null

My page contains a div with a class named quotes but when I alert this:

document.getElementsByClassName("quotes")

The result is null.

My code is in the form:

window.onload = function abc (){ 
  alert(document.getElementById('a'));    
  document.getElementById('a').innerHTML ="ishaan"; 
}

I am importing my script file in a html page which overrides Google Chrome's new tab page. My script is on the script file.

"showing some violation error in console" damn hard to just paste the error here — madalinivascu, Nov 04 '16 at 09:35
I have alerted Quotes[x] it is showing the value. I think document.getElementsByClassName("quotes") is null but element with class quotes is present in my html page. — Maverick, Nov 04 '16 at 10:01
then you don't have elements on the page with a class of quotes or they are not rendered when the code is executing — madalinivascu, Nov 04 '16 at 10:22
That is the problem..Why it is null even though my html page is having that class . — Maverick, Nov 04 '16 at 10:33
yes i write as this in my script file:- window.onload = function abc (){ alert(document.getElementById('a')); document.getElementById('a').innerHTML ="ishaan"; } — Maverick, Nov 04 '16 at 11:00

Deep 3015 · Answer 1 · 2016-11-04T15:01:41.037

1

If there are multiple items having same class name

var quoteElems=document.getElementsByClassName('quotes')
for(var i=0;i<quoteElems.length;i++){
quoteElems[i].innerHTML=Quotes[x]
}

If there is single item having class 'quotes'

document.getElementsByClassName("quotes")[0].innerHTML = Quotes[x];

edited Nov 04 '16 at 15:01

answered Nov 04 '16 at 10:16

Deep 3015

there is one class only and it' s class is showing as null . Is these any other way to do this in extensions – Maverick Nov 04 '16 at 11:03
Use `alert(quoteElems.length)` to check required element is there or not. It will show the number of element containing class 'quotes' – Deep 3015 Nov 04 '16 at 14:56
My last snippet will work on single class if exists ,try it.Other wise you have to dynamically create it. – Deep 3015 Nov 04 '16 at 15:04

score 0 · Answer 2 · answered Nov 04 '16 at 11:05

0

if you use jquery then do

 $(function(){
   $('.quotes').html(Quotes[x]);
 });

answered Nov 04 '16 at 11:05

madalinivascu

even then it is not working.It is unable to find element. – Maverick Nov 04 '16 at 11:32
you don't have a element with the class .quotes on the page – madalinivascu Nov 04 '16 at 11:33
are you using ajax? – madalinivascu Nov 04 '16 at 11:33
no... i am just importing my script file in html page...which overrides chrome browsers new tab page.... and my script is obviously on the script file – Maverick Nov 04 '16 at 20:05

2 Answers2