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
Related
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:
jQuery Button Click 'this'
(3 answers)
Closed 5 years ago.
$("#subPanel").click(function() {
$("#subPanel").removeClass('btn-success');// it works
this.addClass('btn-default'); it didn't works.
I would like to get self-dom object(in this case $("#subPanel") itself) from inside the call back.
It might be easy problem, so I try to googled around.
However I couldn't get straight answer.
could you help me ??
Inspect this and you will see it's not a jquery object but a DOM element which does not have an addClass method. Try:
$("#subPanel").click(function() {
$("#subPanel").removeClass('btn-success');// it works
$(this).addClass('btn-default')
})
Example: https://jsfiddle.net/14s0h3dr/
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.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 years ago.
Here is html:
<div class="nama" id="xxx"></div>
And javascript :
var div = document.getElementById('xxx');
alert(div.id)
Why i am getting mistake?Looks like fine for me
The element was not found.
Most probably because this code was ran before that part of the DOM was ready.
Try placing your code below where the HTML is defined.
window.onload = function() {
var div = document.getElementById('xxx');
alert(div.id)
};
This question already has answers here:
Why JS function name conflicts with element ID?
(3 answers)
Closed 8 years ago.
I receive the error "Uncaught TypeError: object is not a function" when clicking on a button in my webpage.
The button code is:
<button id="addUser" name="addUser" onclick="addUser()"> Add User </button>
The code for function addUser is
function addUser() {
userValue = document.getElementById("userForAdmin");
passValue = document.getElementById("passForAdmin");
console.log(userValue.value);
console.log(passValue.value);
}
Can anyone point out my error? My guess is its likely a basic mistake.
Use different names for the function and the element ID. When you do id="addUser", that creates a global variable window.addUser that refers to the DOM element. This is overriding the function definition with that name.