The current process of setting multiple inputs to disabled works for me, but seems to be way too much code due to the multiple for loops:
var textEditors = document.getElementsByClassName('textEditor'),
textareas = document.getElementsByTagName('textarea'),
radioInputs = document.getElementsByClassName('radioSelect'),
textInputs = document.getElementsByTagName('input');
for (var i = 0; i < textEditors.length; i++) {
textEditors[i].disabled = true;
}
for (var g = 0; g < textInputs.length; g++) {
textInputs[g].disabled = true;
}
for (var f = 0; f < textareas.length; f++) {
textareas[f].disabled = true;
}
for (var z = 0; z < radioInputs.length; z++) {
radioInputs[z].disabled = true;
}
But this above works fine for me. The below is what I would assume would work instead - put all elements into a single array, and iterate over a single array to set each to disabled. When I view the HTMLCollection via console.log it says disabled:true yet the element on the screen is not disabled. What am I missing here?
var textEditors = document.getElementsByClassName('textEditor'),
textareas = document.getElementsByTagName('textarea'),
radioInputs = document.getElementsByClassName('radioSelect'),
textInputs = document.getElementsByTagName('input');
var normalInputs = [];
normalInputs.push(textEditors);
normalInputs.push(textInputs);
normalInputs.push(radioInputs);
normalInputs.push(textareas);
for (var i = 0; i < normalInputs.length; i++) {
console.log(normalInputs[i])
normalInputs[i].disabled = true;
}
This will serve your purpose.
In your second method you're pushing the array capture from getElement into normalInputs array and than looping through that array and applying disable property on elements of inputArray which is eventually array of all the selected elements not individual element.
var textEditors = document.getElementsByClassName('textEditor'),
textareas = document.getElementsByTagName('textarea'),
radioInputs = document.getElementsByClassName('radioSelect'),
textInputs = document.getElementsByTagName('input');
var normalInputs = [];
normalInputs.push(textEditors);
normalInputs.push(textInputs);
normalInputs.push(radioInputs);
normalInputs.push(textareas);
normalInputs.forEach(e=>{
e.forEach(ele =>{
ele.disabled = true;
})
})
Without ES6
for (var i = 0; i < normalInputs.length; i++) {
for(let j=0; j< normalInputs[i].length; j++){
normalInputs[i][j].disabled = true;
}
}
A better approach is use concat
var normalInputs = [];
normalInputs = normalInputs.concat(textEditors,textInputs,radioInputs, textareas);
for(let i=0; i<normalInputs.length; i++){
normalInputs[i].disabled = true;
}
Well, give all of them same class like .inputs and get all of them with one expression:
var items = document.querySelectorAll( '.inputs' );
if it's not possible, get all of them like this:
var items = document.querySelectorAll( 'input, .textEditor, .radioSelect, textarea' );
then you can fix that with one loop for all of them:
for ( var i = 0; i < items.length; i++ )
items[ i ].disabled = true;
Related
I have written the following function.
There are controls inside Table which is inside a div.
I need to print id of all the controls
function getID() {
debugger;
var ids = [];
var children = document.getElementById("divAlarmSection").children;
for (var i = 0, len = children.length; i < len; i++) {
ids.push(children[i].id);
var table = document.getElementById(children[i].id);
var rows = table.rows;
for (i = 0, n = rows.length; i < n; ++i) {
var cells = rows[i].getElementsByTagName('td');
for (var x = 0; x < cells.length; x++) {
if (cells[x].length != 0) {
alert(cells[x].innerHTML);
}
}
}
}
use .getElementsByTagName("*") on cells[x] and access 'ID' property of the result. So your last 'for' loop becomes:
var elements = cells[x].getElementsByTagName("*")
for(var len=0;len<elements.length;len++)
console.log(elements[len].id);
Also, if you know the inner structure of each 's and its consistent, you can look for that element in .getElementsByTagName()
I have a list of events on a page. My end goal is to hide a purchase button (by adding a class to it) if the event has passed, using JQuery/Javascript. Each event has a 3 data attributes(month, day, year). I tried using the following method to cycle through an array:
var matches = document.querySelectorAll(".event-event");
var i = 0;
for (i = 0; i < matches.length; i++) {
var event = matches[i].getElementsByClassName('date');
var eventDate = event.getAttribute('data-date');
}
But it says that "getAttribute" is not a function, I've also tried ".attr" and it said the same thing.
var matches = document.querySelectorAll(".event-event");
for (var i = 0; i < matches.length; i++) {
var event = matches[i].getElementsByClassName('date');
if (event.length > 0) {
for (var j = 0; j < event.length; j++) {
var eventDate = event[i].getAttribute('data-date');
}
}
}
The getElementsByClassName method returns an array.
Try this:
var matches = document.querySelectorAll(".event-event");
for (var i = 0; i < matches.length; i++) {
var events = matches[i].getElementsByClassName('date');
for(var j = 0; j < events.length; j++) {
var eventDate = events[j].getAttribute('data-date');
}
}
events is an array that you must iterate through.
I have a JavaScript selector like this:
var inputs = document.getElementsByTagName("input");
This works great except that I want to filter out some inputs (the ones with the class of "exists")
How can I do this without jQuery?
This is what you need:
var inputs = document.getElementsByTagName("input");
var neededElements = [];
for (var i = 0, length = inputs.length; i < length; i++) {
if (inputs[i].className.indexOf('exists') >= 0) {
neededElements.push(inputs[i]);
}
}
Or, in short (as provided by knee-cola below):
let neededElements = [].filter.call(document.getElementsByTagName('input'), el => el.className.indexOf('exists') >= 0);
function split(str)
{
var array = str.split(';');
var test[][] = new Array();
for(var i = 0; i < array.length; i++)
{
var arr = array[i].split(',');
for(var j = 0; j < arr.length; j++)
{
test[i][j]=arr[j];
}
}
}
onchange="split('1,2,3;4,5,6;7,8,9;a,b,c;d,e,f;g,h,i')"
it was not working. i need to split this string to 6*3 multi dimentional array
var array[][] = new Array() is not valid syntax for declaring arrays. Javascript arrays are one dimensional leaving you to nest them. Which means you need to insert a new array into each slot yourself before you can start appending to it.
Like this: http://jsfiddle.net/Squeegy/ShWGB/
function split(str) {
var lines = str.split(';');
var test = [];
for(var i = 0; i < lines.length; i++) {
if (typeof test[i] === 'undefined') {
test[i] = [];
}
var line = lines[i].split(',');
for(var j = 0; j < line.length; j++) {
test[i][j] = line[j];
}
}
return test;
}
console.log(split('a,b,c;d,e,f'));
var test[][] is an invalid javascript syntax.
To create a 2D array, which is an array of array, just declare your array and push arrays into it.
Something like this:
var myArr = new Array(10);
for (var i = 0; i < 10; i++) {
myArr[i] = new Array(20);
}
I'll let you apply this to your problem. Also, I don't like the name of your function, try to use something different from the standards, to avoid confusion when you read your code days or months from now.
function split(str)
{
var array = str.split(';'),
length = array.length;
for (var i = 0; i < length; i++) array[i] = array[i].split(',');
return array;
}
Here's the fiddle: http://jsfiddle.net/AbXNk/
var str='1,2,3;4,5,6;7,8,9;a,b,c;d,e,f;g,h,i';
var arr=str.split(";");
for(var i=0;i<arr.length;i++)arr[i]=arr[i].split(",");
Now arr is an array with 6 elements and each element contain array with 3 elements.
Accessing element:
alert(arr[4][2]); // letter "f" displayed
I have a string as
var selected_values = '1#2#3#4#5';
Now these are all values for <option>, which are separated by # (so final selected values would be 1 2 3 4 5), I need to select only those "options" whose value is mentioned in above string
How can I achieve this?
1. I need to split string
2. select only those options whose values are mentioned
For single value I am using following code
var selObj = document.getElementById('list1');
len = selObj.length;
selected_value = '1';
for (i = 0; i < len; i++) {
if (selObj[i].value == selected_value) {
selObj[i].selected = true;
}
}
Here's an example of the following →
You just need to split('#') on the selected values and then iterate over that array:
var selObj = document.getElementById('list1'),
len = selObj.length,
selected_values = '1#3#5',
selected_array = selected_values.split('#'),
alen = selected_array.length;
for (var i = 0; i < len; i++) {
for (var j = 0; j < alen; j++) {
if (selObj[i].value == selected_array[j]) {
selObj[i].selected = true;
}
}
}