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.
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 1 year ago.
I am trying to make an input text and a button when pressed will add to a ul list but I keep having this error in the console and I don't know why
Uncaught TypeError: btn.addEventListener is not a function at script.js:5
Code :
var text = document.getElementsByClassName('text');
var list = document.querySelector('.list');
var btn = document.getElementsByClassName('add');
btn.addEventListener("click", function(){
var content = document.createElement('li')
content.innerText = text.value
list.append(content)
})
You are getting this error because getElementsByClassName returns an array of all elements having the given class. To solve this error you have two options:
Make add id instead of class and use getElementById to get that element.
var btn = document.getElementById('add');
If you do not want to make add id, we know getElementsByClassName returns an array you can access the elements inside this array by its index.
var btn = document.getElementsByClassName('add')[0];
In this case, keep in mind that the button you are trying to access with add class should be the first element with this classname.
This question already has answers here:
How can I change an element's class with JavaScript?
(33 answers)
Closed 2 years ago.
I dynamically created various images and other elements within various div elements and assigned a class to them, like:
divOM = document.getElementById('omain');
kd = document.createElement('img');
kd.src = 'pics/k0.jpg';
kd.class = 'mww';
divOM.appendChild(kd);
This works well – the debugger shows the desired result (# children with class ‘mww’). I have the (maybe naïve) hope that
wlist = document.getElementsByClassName('mww')
gives me all elements which have class=’mww’, but unfortunately it doesn’t. The debugger shows length:0 for wlist!?? Is it possible that document.getElementsByClassName doesn’t work for dynamically created elements?
Should be .className, not .class.
class is a reserved word in JavaScript.
Or use the Class List API:
kd.classList.add('mww');
This question already has answers here:
jQuery ID selector works only for the first element
(7 answers)
Closed 2 years ago.
I have the following code snippet
$("#personalizacoesOpcionais")
.find(".qtdPersonalizacao")
.each(function (n, t) {
var i = {};
i.IdProdutoIngrediente = parseInt($(t).attr("data-id"));
i.Qtde = parseFloat($(t).text());
r[n] = i
});
In the html there are several divs personalizacoesOpcionais and each one with numerous elements qtdPersonalizacao.
However, the code snippet above only returns the first item qtdPersonalizacao within the first personalizacoesOpcionais.
However, the code snippet above only returns the first item qtdPersonalizacao within the first personalizacoesOpcionais.
Ids are supposed to be unique within a document and jQuery will just returns the first matching element.
The recommended solution would be to use a class instead of an id for personalizacoesOpcionais.
If this is not possible, for example if you don't control the code that generate the markup, a workaround would be to use $("div[id=personalizacoesOpcionais]") instead of $("#personalizacoesOpcionais")
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]);
});
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.