I'm trying to reset the values of all the selectBoxes on my page. The event in question is happening in an onClick so everything is loaded in the DOM.
I have obtained an HTMLCollection of selectBoxes via var selectBoxes = document.getElementsByClassName("selectBox"); I would like to now change the selectIndex of each of those selectBoxes to 0.
However, every time I try to access a property of a specific object from the HTMLCollection, I end up with an undefined value.
selectBoxes.item(0).selectedIndex = undefined
selectBoxes[0].selectedIndex = undefined
var selectBoxes = document.getElementsByClassName("filterBox");
console.log(selectBoxes); //a nice JavaScriptObject
for(i = 0; i < selectBoxes.length; i++){
selectBoxes.item(i).selectedIndex = 0;
}
This is a very interesting article on HTMLCollections: https://hackernoon.com/htmlcollection-nodelist-and-array-of-objects-da42737181f9 which seems to be explaining part of my problem.
I was accessing the selectedIndex property incorrectly. It's not a direct property of the selectBox itself but rather it seems to be inside the children of the selectBox.
var selectBoxes = document.getElementsByClassName("filterBox");
for(i = 0; i < selectBoxes.length; i++){
selectBoxes.item(i).children[0].selectedIndex = 0;
}
Related
I use to have this java script which get a select list and remove its options:-
var selectobject = document.getElementById("OrderAssignToApprover_9002e96d-1276-4355-9a2a-0c565d8079db_$DropDownChoice");
for (var i=selectobject.options.length-1; i>=0; i--)
{
selectobject.remove(i);//remove current usernames
}
and it use to work well. now instead of selecting the element by its id (which is somehow long), I chose to select the element by using the start with, as follow:-
var selectobject = $('[id^="OrderAssignToApprover"]');
for (var i=selectobject.options.length-1; i>=0; i--)
{
selectobject.remove(i);//remove current usernames
}
but I start receiving these errors:-
on IE:-
unable to get property length of undefined or null reference
while on FireFox:-
exceptionTypeError: selectobject.options is undefined
so can anyone advice what is causing the errors, when I changed the selector from document.getElementById() to $('[id^="OrderAssignToApprover"]')??
In your second case you must transform jquery object to js object:
var selectobject = $('[id^="OrderAssignToApprover"]');
selectobject.each(function(index,element){
for (var i=element.options.length-1; i>=0; i--){
element.remove(i);
}
})
OR if your selector has only one element:
var selectobject = $('[id^="OrderAssignToApprover"]')[0];
for (var i=selectobject.options.length-1; i>=0; i--){
selectobject.remove(i);
}
But to avoid other issue ... first check if your selectobject length if greater than zero with:
console.log($('[id^="OrderAssignToApprover"]').length)
I would like to use document.getElementsByTagName('input')
to set as required (or unset it) for a list of inputs.
is it possible?
I've tried:
document.getElementsByTagName('input').required = false;
or (for a different purpose)
document.getElementsByTagName('input').value = ""
but it doesn't seem work.
Moreover: is it possible to catch a certain type of input (i.e. text or radio)?
Thank you!!!
ObOnKen
getElementsByTagName() returns a collection of elements so you need to iterate over the collection...
var elements = document.getElementsByTagName('input');
for(var i = 0; i < elements.length; i++)
{
if(elements[i].type == "text")
{
elements[i].value = "";
}
}
getElementsByTagName() returns a live HTMLCollection. If you want to do something to each item returned, you'll have to explicitly iterate across them:
var inputs = table.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].required = false;
}
However, if you use some libraries, you may be able to operate on each of the contents of a collection (or, as some of the libraries call them, selection) en-masse with a syntax as you seem to expect.
You should use for loop for iterating all inputs, because document.getElementsByTagName returns a HTMLCollection of elements with the given tag name.
var values = document.getElementsByTagName('input');
for (var i = 0; i < values.length; i++) {
values[i].required = false;
}
To catch a certain type of input:
var textInput = document.querySelector("input[type=text]");
querySelector returns the first element within the document.
Essentially what I'm trying to do right now is, given some input text, I split it up by white space and display on a
div id= "animation"
Every time a button is clicked, the array should go forward one word.
This is my current attempt.
function displayText() {
var displayText = document.getElementbyID("animation");
var list = (document.getElementbyID("input").split(/[ \tn]+/);
for (var i = 0; i < list.length; i++) {
displayText.innerHTML = list.get[i];
}
}
Is my thought process somewhat correct? For whatever reason, it doesn't seem to be working.
there are multiple issues in your method
function displayText() {
var displayTextAnimation = document.getElementbyID("animation"); //keep variable name and method name different
var list = (document.getElementbyID("input").value).split(/[ \tn]+/); //use value property and observe extra bracket
for (var i = 0; i < list.length; i++) {
displayTextAnimation.innerHTML = list.charAt(i); //observe replacing get by charAt
}
}
state.on('change', function(){
city.empty();
$.getJSON("pincodes.JSON", function(pincodes){
var key = state.val();
for (var j= 0; j < pincodes['address'].length; j++) {
if (pincodes['address'][j]['circlename'] == key) {
temp.push(pincodes['address'][j]['regionname']);
}
}
cities = $.unique(temp);
for (var k = 0; k < cities.length; k++) {
city.append('<option>' + cities[k] + '</option>');
}
});
});
In the above state = $('#state') , the above works fine fills the cities on select "state" . But the issue is when a new state is selected the previously filled cities are also there . Even though I tried .empty on every change() .
You don't empty your temp array. So, every time this function is called, you keep appending items to your temp array.
You simply need to add the following line in your code:
state.on('change', function() {
city.empty();
temp = []; // <---
$.getJSON("pincodes.JSON", function(pincodes) {
What about cities = $.unique(temp);, it won't work.
According to jQuery.unique() documentation, this function
Sorts an array of DOM elements, in place, with the duplicates removed. Note that this only works on arrays of DOM elements, not strings or numbers.
So, it is not a correct usage. If you get non-unique values from your JSON, you will need to use another way to get distinct values. There is a good SO article on this topic.
I am creating multiple HTML elements.
Elements have different properties.
I would like to get the property name, and the its value using index.
var elements = [
{"type":"div","className":"items","id":"item-0-"+item}
{"type":"div","className":"items","id":"item-0-"+item}
{"type":"input","type":"number","step":1,"min":1}
];
I want to access it like,
alert(elements[0][1]); //"className":"items"
alert(elements[0][1].value); //items
I tried that but It is not working.
This should allow you to see everything:
var i, j, k;
for (i = 0; i < elements.length; i++) {
for (j in elements[i]) {
alert(i+' '+j+' is '+elements[i][j]);
console.log(i+' '+j+' is '+elements[i][j]); // This is less annoying than alerts
}
}
Take a look at Object.keys():
var name = Object.keys(elements[0])[1]; // Item name = 'classname'
alert(elements[0][name]); // Item value = 'items'