Develop Reference

How to use custom variable in JavaScript [duplicate]

This question already has answers here:
Javascript getElementById based on a partial string
(9 answers)
Closed 3 years ago.
I just want to know to how to use custom varible with javascript.suppose we have 5 id with name zawsz,baws2,tawsx,paws4,vawsa and we want to execute single DOM command to all these element whose id is define here.
document.getElementById("-aws-").onclick=function(){}
Here -aws- define all the id define above.(-) can be replace with any char/int value;

You could use the following code:
(The following code will select all elements of which the id includes aws.
I have tested this code and it works: https://jsfiddle.net/5042woqz/)
document.querySelectorAll('*[id*="aws"]').forEach(function(item) {
item.onclick=function() {
console.log('click!');
};
});
Items will now be an array containing all your aws- items.
If you have further questions, just let me know.
P.S.: You could achieve the same thing really easily with jquery.

You can use document.querySelectorAll for this:
document.querySelectorAll('[id^="aws"]')
That will select all elements where the id attribute starts with (^=) "aws".

JavaScript querySelectorAll classname innerHTML [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 5 years ago.
I have following element :
document.querySelectorAll('.apply-dealer-xyz').innerHTML = "Deselect";
<button class="btn cta-primary apply-dealer-xyz">Select</button>
But it is not working.
Anybody have some guess?
And another question it is possible do something like this in jquery? (pseudo) :
document.querySelectorAll('[classname*=apply-dealer]').innerHTML = "anything"
That will change every element containing apply-dealer in class name?
Thanks,

document.querySelectorAll('.apply-dealer-xyz')[0].innerHTML = "Deselect";

You have to use innerHTML on first element of querySelectorAll, because querySelectorAll returns array
document.querySelectorAll('.apply-dealer-xyz')[0].innerHTML = "Deselect";
<button class="btn cta-primary apply-dealer-xyz">Select</button>

single addEventListener with Multiple selects [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 5 years ago.
I have looked around and I haven't really been able to find anything that solves my problem. There is a post using buttons but I can't seem to modify it for my needs.
I am trying to use only one event listener for multiple selects. I'd like to return the id of the select, and the value selected but as far as I can figure I either need to use document.getElementById("ID").addEventListener('change',func(),true) for each id or document.getElementsByTagName('select').addEventListener('change', func(), true) and I get an error that says:
selection.addEventListener is not a function. (In 'selection.addEventListener('change', func(), true)', 'selection.addEventListener' is undefined)
I was hoping someone could take a moment and show me where I am going wrong or if I need to use a different method to accomplish my task.
thanks for the help

The method getElementsByTagName returns HTMLCollection of elements, and not a DOM Element, so you can't use addEventListener on that.
What you can do is go over all the elements in the HTMLCollection and add the event you want to them:
let selectElements = document.getElementsByTagName('select');
Array.prototype.forEach.call(selectElements, function(el) {
eladdEventListener('change', func(), true)
})

adding jquery selector objects into a single jquery object [duplicate]

This question already has answers here:
Combining selectors?
(3 answers)
Closed 6 years ago.
I need to combine two jquery selectors into a single Jquery object.
I tried $("#selector","#selector"), but its not working and returning blank, do we have any predefined methods to achieve this.
Something like
var combined_Jquery_obj =$("#selector") +$("#selector")

Use add() method when you want to add elements to an existing jQuery object.
var combined_Jquery_obj = $("#selector1").add("#selector2")
Or use comma separated multiple selectors when you want to select multiple selectors.
var combined_Jquery_obj = $("#selector1,#selector2")

Use Multiple Selector
var combined_Jquery_obj =$("#selector,#selector")

What is wrong with this getElementsByClassName call in Javascript? [duplicate]

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