Develop Reference

Making an input that adds to a list [duplicate]

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.

how to add css class and Id to js variable [duplicate]

This question already has answers here:
how to append a css class to an element by javascript?
(7 answers)
How can I add a class to a DOM element in JavaScript?
(12 answers)
Closed 1 year ago.
let example = document.createElement("p");
and now I want to add a new class to the p (<p>) that I just created.

Use the classList and id properties of the element.
let example = document.createElement("p");
example.id = "newid";
example.classList.add("newclass");

You can try it this way:
// create node
const node = document.createElement('p');
// add id
node.setAttribute('id','new_id');
// add class
node.setAttribute('class', 'new-class');

how can I set-attribute to input Element [duplicate]

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');

jQuery Multiple ID selector concate through variable [duplicate]

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);

Find Class in javascript variable [duplicate]

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);