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 .
Related
This question already has answers here:
previousSibling and nextSibling returns text?
(2 answers)
Closed 3 months ago.
I'm trying to get my edit button to work as well as my delete button, but it gives me the following error message in the console "e.target.previousSibling.previousSibling.setAttribute is not a function".
this is the code I'm trying to add for my edit functionality,
I have found a similar issue, but it didn't solve the problem I have
const editBtn = document.createElement("button");
editBtn.classList.add("edit");
editBtn.textContent = "Edit";
newLi.appendChild(editBtn);
editBtn.addEventListener("click", () => {});
document.querySelector("*").addEventListener("click", (e) => {
if (e.target.className !== "edit") return;
e.target.previousSibling.previousSibling.setAttribute(
"contenteditable",
"true"
);
e.target.previousSibling.previousSibling.focus();
});
It's likely that there are empty text elements between your elements
Use previousElementSibling intead
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 1 year ago.
When selecting an ID or ClassName in Javascript it does not work. The class or ID does exist and is spelled correctly. Why does Javascript tell me that Undefined is not an object(evaluating 'header.style.height = ""') while the object is defined properly? The script below is just a plain example, but I can't select (almost) anything. No matter what ID or class I select. I know that it says it can't find the object, but why?
var header = document.getElementById("header");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 128 || document.documentElement.scrollTop > 128) {
header.style.height = "48px";
} else {
header.style.height = "";
}
}
you can try to maybe change var header = document.getElementById("header")
to var header = document.getElementsByClassName("header")[0]
because i saw in your website that there is a div with a class name of "header" and you need to add the [0] to select the first element of the node list returned from getElementsByClassName.
This question already has answers here:
Test for existence of nested JavaScript object key
(64 answers)
Closed 4 years ago.
I have an input-field in my form which sometimes gets displayed and sometimes not. When the input-field doesn´t get displayed and the form is about to get sent the script throws an error:
Cannot read property 'value' of undefined
I tried to catch that with this code:
if (typeof document.forms["add-new-job"].addjob_companyselect.value !== 'undefined') {
// do something
}
But the same error comes again on this line. How can I skip an undefined field?
var addNewJobElement = document.forms["add-new-job"].addjob_companyselect;
if (addNewJobElement && addNewJobElement.value) {
// do something
}
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:
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.