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');
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
so hello i am trying to add class that for element that passes all selectors
this is my current code
document.querySelectorAll('.inner p .align_center').parentNode.classList.add('center_text')
which uhh should work, i am trying to translate this jquery code
$(".inner p .align_center").parent().addClass('center_text')
but i get .parentNode is undefined in the console why? i selected child of p with class of .alignt-center and i want to add class to that p element, or is there easier way of doing the same thing? what am i doing wrong
var a = document.querySelectorAll('.inner p .align_center');
for(var i = 0; i < a.length; i++) {
a[i].parentNode.classList.add('center_text');
}
just had to treat querySelectorAll as a array instead of single element
This question already has answers here:
Select multiple jQuery objects with .add()
(3 answers)
Closed 5 years ago.
Here is my code:
var $btnNone = $('#btn-none');
var $btn1234 = $('#btn-1, #btn-2, #btn-3, #btn-4');
// This selector works fine
var $btnReview1234None = $('#btn-1, #btn-2, #btn-3, #btn-4, #btn-none')
// HOW TO MAKE THIS SELECTOR WORK.
// This selector ignores $btnNone but respects $btn1234.
// This listens only first item in the selector
var $btnReview1234None = $($btn1234, $btnNone);
$btn1234None.click(function(){
alert('Lorem')
});
The issue is because $($btn1234, $btnNone) will be treated as a contextual selector, ie. jQuery will search the DOM to find the $btn1234 element within $btnNone.
To fix this you could provide an array of both elements to the selector:
var $btnReview1234None = $([$btn1234, $btnNone]);
Or you could use add():
var $btnReview1234None = $btn1234.add($btnNone);
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);
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 6 years ago.
I'm trying to add some elements to the DOM, but the FireBug console keep alerting me for an error saying TypeError: el.appendChild is not a function; el.appendChild(para); So here is the js:
var para = document.createElement("tr");
var node = document.createTextNode(data.filename);
para.appendChild(node);
var el = document.getElementsByClassName("toBeSelected");
el.appendChild(para);
Found some common problems but couldn't find a way to solve mine.
document.getElementsByClassName
^
returns a collection of elements. You need to select an element from the collection before you can append a child to it.
If you know there's exactly one, you could use:
var el = document.getElementsByClassName("toBeSelected")[0];
As it's unclear whether you expect to add nodes to all of the elements with the given class, so I will explicitly assume that is what you expect to do.
elems = document.getElementsByClassName('toBeSelected');
for (i = 0; i < elems.length; i++) {
elem = elems[i];
tr = document.createElement('tr');
tr.textContent = data.filename;
elem.appendChild(tr);
}
This form is quite verbose. If you're using jQuery, then it's much simpler to write:
$('<tr>').text(data.filename).appendTo('.toBeSelected');
This question already has answers here:
How can I change an element's class with JavaScript?
(33 answers)
Closed 7 years ago.
I am creating input tag with it's attributes by clicking on list item. Type, name and id are created successfully but it's not generating the class attribute.
var createInput = document.createElement("input");
createInput.type = "text";
createInput.name = text1;
createInput.id = text1;
createInput.class = "abc";
The class property of a DOM Element is actually called className:
createInput.className = "abc";
Check out your browser's Debug Console (F12); it has auto-completion, so you can see what properties exist.