This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 6 years ago.
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.
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];
if you use jquery then do
$(function(){
$('.quotes').html(Quotes[x]);
});
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
Hoping you good folk can help me with this one. I am trying to use a nav link to show a hidden div when clicked but I keep getting the error message
"Uncaught TypeError: Cannot read property 'display' of undefined
at HTMLAnchorElement."
this appears for the line of code = if (contentOneClick.style.display == "none") yet if i taker either the word "style" or the word "display" out of this code then i do not get the error message which has left me confused as i have watched content of this being used and working well for others. below is the whole function code. The display is set to "none" in the style code. I am new to web development so my apologies if this is a silly question.
`document.getElementById('content-one').addEventListener("click", function() {
var contentOneClick = document.getElementsByClassName(".content-one-container");
if (contentOneClick.style.display == "none")
{
console.log ("content is hidden");
}
else
{
console.log("content is visible");
}
}); `
The problem is that getElementsByClassName returns a nodeList, therefore, you should specify which element having class content-one-container you want to use:
var contentOneClick = document.getElementsByClassName("content-one-container")[0];
^ remove the .
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
I have some javascript code here, that randomly changes the background of the landing page of my website. This is the code:
var bigSize = [
"url('assets/bg/front1.jpg')",
"url('assets/bg/front2.jpg')",
];
var random = Math.floor(Math.random() * 2) + 0;
document.getElementById("front").style.backgroundImage=bigSize[random];
When I load the page and take a look at my console, it gives the following error:
background.js:6 Uncaught TypeError: Cannot read property 'style' of null
at background.js:6
However, when I run the exact code through the console, the script works perfectly. Can anyone help me with this? Thanks in advance!
The problem might be that you're inserting the script tag before the body tag. Insert the script tag after the body tag. Javascript is not able to find your element, it means it hasn't been rendered to the browser yet and when you're accessing it, it is throwing an error.
This question already has answers here:
getElementsByClassName produces error "undefined" [duplicate]
(7 answers)
Closed 8 years ago.
I'm writing a Chrome plugin to modify the Facebook homepage.
How would I add an extra <li> to the <ul> with a class of _54nf?
Here's my current code:
function addLabel()
{
var ul = document.getElementsByClassName("_54nf");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Test"));
ul.appendChild(li); // line 6
}
addLabel();
The error I'm getting is:
Uncaught TypeError: undefined is not a function
I presume the problem is getElementsByClassName but I'm not sure.
getElementsByClassName returns a list of nodes (notice the plural s). Use:
var ul = document.getElementsByClassName("_54nf")[0];
to index down to just the first one.
This assumes there's only one such element on the page, or you only want to modify the first one.
This question already has answers here:
How can I detect if a selector returns null?
(8 answers)
Closed 8 years ago.
Setup:
<div>
<div class="application-section active"></div>
<div class="application-section"></div>
</div>
I am setting a the following variables
var $activeSection = $("div.application-section.active");
var $targetSection = $activeSection.prev("div.application-section");
jQuery Documentation states that if no previous sibiling is found, it will return a blank jquery object. I want to do additional stuff if the variable is a blank jQuery object, but how do you check to see if it is a blank jQuery object? I have tried the following, but I always get false as a result.
alert($.isEmptyObject($targetSection));
$targetSection.length will be zero if no matching selector is found.
This question already has answers here:
How can a JavaScript object refer to values in itself? [duplicate]
(8 answers)
Closed 9 years ago.
How to get the form object?
I use this.box meaning sheet.box here, but the script produces an error. How do I get the sheet object in the sheet properties?
<div class="box">
<form action=""></form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var sheet={
box: $('.box'),
form: this.box.find('form') // TypeError: this.box is undefined
}
</script>
I guess what you need is a function:
form: function() {return this.box.find('form');}
Otherwise, you should be more specific.
Old versions of Firefox (I tried Firefox 4 which warns but still accepts it) actually allowed you to do this:
var sheet = {
box: #1= $('.box'),
form: #1#.find('form')
}