This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 6 years ago.
I'm trying to validate some code via javascript. The drama I am having is that I receive an
"Uncaught TypeError: Cannot set property 'border' of undefined".
I am new to javascript and trying to get a full understanding of why this happens and how to prevent this in future coding projects. My goal is if the validation fails it changes the text box border to red.
function validation_Step1(event) {
var Firstbox = document.getElementsByName("Firstbox");
if (Firstbox.value == null || Firstbox.value == '') {
document.getElementsByName("Firstbox")
.style.border = "2px solid red";
alert("Error");
return false;
} else {
return true;
}
}
It's because document.getElementsByName("Firstbox") returns a NodeList which can be seen as a "kind of" array.
You should do document.getElementsByName("Firstbox")[0] if you want to manipulate the first element only
To find elements use ids:
<input type="text" id="login">
Then get the element:
var elem = document.getElementById('login');
Also run JS scripts when whole HTML has been loaded, use onload event in JS.
Related
This question already has an answer here:
document.getElementsByClassName().innerHTML always returns "undefined"
(1 answer)
Closed 3 years ago.
I have a function called "hideConstruction()", toggled by the click of a button on my wordpress page. It should hide all elements with the class ".construction", but instead I get the following error:
"Cannot set property 'visibility' of undefined"
This is the code that I put in my wordpress's script.js, enqueued via functions.php:
function hideConstruction() {
var element = document.getElementsByClassName("construction").style.visibility = "hidden";
}
Here is the page where this is happening: https://satya-ame-art.com
Can anyone tell me what I am doing wrong? Many thanks!
when you run this in console document.getElementsByClassName("construction") it gives two elements so if you want to hide first element then use
document.getElementsByClassName("construction")[0].style.visibility = "hidden";
and for second element hide use
document.getElementsByClassName("construction")[1].style.visibility = "hidden";
document.getElementsByClassname returns an array of HTMLCollection of found elements.
The correct way of implementing this would be
function hideConstruction() {
var element = document.getElementsByClassName("construction")[0].style.visibility = "hidden";
}
Thanks!!
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.
it appears that when I call the if (test.href != "https://www.test.com") it gives me a null value, but I'm not exactly sure why, as I'm expecting it to return the URL
HTML
<p><a id="damn" href="https://www.test.com" target="_self">PC Install</a></p>
JS SCRIPT:
var test= document.getElementById("damn");
if (test.href != "https://www.test.com") {console.log(test)}
Use getAttribute, and it works.
var test = document.getElementById("damn");
if (test.getAttribute("href") != "https://www.test.com") {
console.log(test)
}
<p><a id="damn" href="https://www.test.com" target="_self">PC Install</a></p>
try to reorder your code, and let your script after the 'a' tag.
This question already has answers here:
Why am I getting TypeError: obj.addEventListener is not a function?
(3 answers)
Closed 6 years ago.
I am trying to convert the text in a td cell to "Clicked!" when it is clicked upon, but it throws up an error when loading the JS. I have read around and know that it can't use an array like this but I don't know how to fix it.
window.addEventListener("load", table)
function table(){
var tables = document.getElementsByTagName("td");
tables.addEventListener("click", clicked);
}
document.getElementsByTagName returns not a Node object, but NodeList object. You can access Node objects by index.
Sample:
var tables = document.getElementsByTagName("td");
if (tables.length) {
tables[0].addEventListener("click", clicked);
}
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
A case of document.getElementById returning null. I've read four other questions in SO, and read the reference on MDN, but I have no clue of what's wrong; please help me. Code is as follows:
HTML
<button id="btnButton1">Button1!</button><br>
<button id="btnButton2">Button2!</button><br>
<span id="spanOutPut"></span>
Javascript
getBYid = function(elem) {
return document.getElementById(elem); }
funButton1 = function() { getBYid('spanOutPut').innerHTML = "Button 1 pressed!!" };
funButton2 = function() { getBYid('spanOutPut').innerHTML = "Did you press the Button 2?!" };
getBYid("btnButton1").addEventListener('click', funButton1, false);
getBYid("btnButton2").addEventListener('click', funButton2, false);
I get a TypeError: getBYid(...) is null, on FireBug.
It works when I simply remove the calls to addEventListener from the JS and set onclick inline, as in the following code:
<button onclick="funButton1()">Button1"</button>
What is the difference?
You have to put this after those elements have been loaded into the DOM
This question already has answers here:
How can I avoid state of "TypeError: can't access dead object" in my Firefox add-on?
(3 answers)
Closed 7 years ago.
I am working with a variable containing a webpage element such as a button.
However, sometimes I get the error "Can't access to a dead object" because the page containing the element has changed since the moment I saved it.
I would like to know a way to check if an element is dead or not, I tried :
if(element)
alert("Do something");
but it doesn't work as expected.
copied from How to check if element exists in the visible DOM?
var elementInDocument = function(element) {
while (element = element.parentNode) {
if (element == document) {
return true;
}
}
return false;
}
You can use it like:
if(elementInDocument(element))
alert("Do something");
//eval it in your mozilla-browser space
var dc = content.document;
content.document.location.reload();
setTimeout(function(){
try{
dc.parentNode;
}catch(e){
if (e.message.indexOf(' dead ')!=-1){
alert('REALY DEAD!');
}
} }, 1000);
it is a test of dead (in try..catch block) in my moz extension projects.