This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 6 years ago.
I'm doing some code, where i want to get the value of an input text introduced by the user
Get the value
var inputTextValue = document.getElementsByClassName("something");
alert("inputTextValue.value);
Creation of the input text
function createHour(){
var hour = document.createElement("INPUT");
hour.id = "something";
defineButtonHour(hour);
//after: -code to append to div
}
function defineHour(hour) {
hour.className = "something";
}
The alert just print undefined.
getElementsByClassName returns an array with all the elements that match the class, you need to iterate over the array, or access the one that you want by providing an index"
alert(inputTextValue[0].value);
also theres an extra semicolon in your alert that shouldnt be there
var inputTextValue = document.getElementsByClassName("something");
Returns a nodelist of all the nodes with the class something. A nodelist is kind of an array. you can write:
var inputTextValue = document.getElementsByClassName("something")[0];
If you can guarantee there will be at least one and you only want one.
Also, your alert has a quote where it doesn't need one:
alert(inputTextValue.value);
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:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 5 years ago.
var
nInput = document.createElement('input'),
clsinput = document.getElementsByTagName('input');
clsinput.setAttribute('class','new');
var nInput = document.createElement('input'),
clsinput = document.getElementsByTagName('input');
clsinput.setAttribute('class','new');
getElementsByTagName returns an array. You are trying to set an attribute to that returned array. You have to iterate that array and set attribute.
Oh wait, you don't need that middle line at all. You created an input element in first line, just use that and set attribute to it
var nInput = document.createElement('input'),
nInput.setAttribute('class','new');
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 8 years ago.
I've simple javascript to get it's child element with the getElementsByClassName but it's not working:
var parent = document.getElementsByClassName('parent');
var child = parent.getElementsByClassName('child');
child.style.color='red';
I've tried a lot and searched to get it but some answers with for loop I've found but I wanted to do it without loop. How can I do this?
You can get the complete node list in one step
var children = document.querySelectorAll(".parent .child");
But then you'll have to loop over that node list.
If you are really interested in only the first one, then you can do
document.querySelector(".parent .child").style.color = 'red';
Try this:
var parent = document.getElementsByClassName('parent');
for(var i=0;i<parent.length;i++){
var child = parent[i].getElementsByClassName('child');
for(var j=0;j<child.length;j++){
child[j].style.color='red';
}
}
document.getElementsByClassName() return the collection. So you have to apply indexing or looping.
Multiple elements can be members of the same class. That is the point of classes.
In getElementsByClassName the word elements is plural. It returns a NodeList, not a single Element.
You can treat it much like an array. You have to loop over each of the nodes that it returns or assume that it will only return one match and use [0].
This question already has answers here:
Get array of text values using selector instead of iterating?
(7 answers)
Closed 9 years ago.
I have html with multiple things classed .text. I the perform
console.log($(whatever).find('.foo').text());
The result is a textstring with all the contents in it. Can I save it to an array instead somehow?
You can use the map method to get this done
var textArray = $(whatever).find('.foo').map(function() {
return $(this).text();
}).get();
This will get you an array.. If you want to display it as a string then just use join along with it.
Check Fiddle
var arr = [];
$(whatever).find('.foo').each(function() {
arr.push($(this).text());
});
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 8 years ago.
I am trying to access the width of a div to put in a cookie. This is the div:
<div class="tab_panel" style="width:600px">
It is the only div with this class name. It is not an option to specify a unique id for the div. This is the code I have been using in an event to call it but it gives an error:
document.getElementsByClassName(tab_panel).style.width
I know Firefox supports getElementsByClassName, so what am I doing wrong?
It's a string:
document.getElementsByClassName("tab_panel")[0].style.width
Bye
P.S. It's an array
document.getElementsByClassName("tab_panel") returns a collection of nodes, the first of which is referred to by document.getElementsByClassName("tab_panel")[0].
If the node you are searching does not have an inline style="width:' assignment, an empty string is returned from document.getElementsByClassName("tab_panel")[0].style.width.
Missing quotes:
document.getElementsByClassName('tab_panel').....
You should iterate over all elements like this:
var elms = document.getElementsByClassName('tab_panel');
for(var i = 0 ; i < elms.length; i++)
{
alert(elms[i].style.width);
}
Try saying:
document.getElementsByClassName("tab_panel")