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.
Related
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:
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:
Get specific content off responseText
(3 answers)
Closed 6 years ago.
I am using AJAX to get the HTML DOM of another page and then storing it within a variable like this
var doc=xhr.responseText;
list=doc.getElementsByClassName("Cname");
Since the HTML is stored within the doc variable, I am using it to search for the class ,but it is throwing an error :
Uncaught TypeError: doc.getElementsByClassName is not a function
How to fix this,that is how can I use that variable to search for the class stored in it?
You are applying getElementsByClassName on a string (xhr.responseText is a string) it will only work with dom object not with string.
So instead what you can do is, create a temporary dom element object using document.createElement with the HTML content and get element inside.
var temp = document.createElement('div');
temp.innerHTML = xhr.responseText;
var list = temp.getElementsByClassName("Cname");
var temp = document.createElement('div');
temp.innerHTML = '<div class="Cname">a</div><div class="Cname1">a</div><div class="Cname">a</div>';
var list = temp.getElementsByClassName("Cname");
console.log(list);
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.