Hi I have an array called "arrayRestado1" from which I want to extract the first element and save that value in the value property of an html input. If it extracts the value but, it does not find the input with that class so the input does not show anything.
The code is in JavaScript:
const col1_f1 = document.getElementsByClassName("col1_f1").value = arrayRestado1[0]
console.log(col1_f1)
the function document.getElementsByClassName() returns an array of elements (an HTML Collection to be correct), not only a single DOM element.
Here's the documentation: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
So with your current code you could try this:
const col1_f1 = document.getElementsByClassName("col1_f1")[0].value = arrayRestado1[0]
console.log(col1_f1)
See the [0] after the function? This means we want the first element of the array. Doesn't matter if there is only one with the given class name col1_f1.
Otherwise you could give your inputs/elemets specific (unique) ids and then use the document.getElementById() function to get them as single elements "directly" in the first place.
More on that here: https://www.w3schools.com/jsref/met_document_getelementbyid.asp
Have a good day!
Nico
Related
i have the following html object : element
I just want to save the value in a variable. I tried using
var result = window.content.document.getElementsByClassName("glyphicon-ok")[0].getAttribute('value');
alert(result);
But return me null object. How can i save the element of this list in my var using javascript. The element is.
glyphicon.glyphicon-ok.positive-color
Important, check this image to check the html collection i'm trying save using javascript:
image
You can use querySelector to pass CSS selector inside and get the first element of the page selected by the CSS selector (if you want to get all the array, you can use querySelectorAll instead) like that:
let result = document.querySelector('glyphicon.glyphicon-ok.positive-color').value;
alert(result);
Edit: if it returns a null value, it's because your element doesn't have the attribute "value" set...
With this $("div.modal-window.modal-progress a") selection I get two elements:
How to get the first selected object from the group and display it own property?
I tried this console.log($("div.modal-window.modal-progress a")[0].baseURI) but I get undefined.
Each of the selected in the set has baseURI:
And how one is able to iterate over all in the set?
$("div.modal-window.modal-progress a:first")
might just do it. Do post more of your code though so we can see the structure.
Use first() function of JQuery as
$("div.modal-window.modal-progress a").first()
Given a jQuery object that represents a set of DOM elements, the .first() method constructs a new jQuery object from the first element in that set.
$("div.modal-window.modal-progress a")[0] should get you the first item.
You get an undefined result because the property baseURI might not be defined in the first element.
If you want to get a jQuery object from the first selection, you can wrap the selected element by a $ like this:
$($("div.modal-window.modal-progress a")[0])
EDIT: After the OP changed his question:
You might want to use jQuery.each to iterate over all the elements that match your selector.
$("div.modal-window.modal-progress a").each(function() {
console.log($(this).prop("baseURI"));
});
I have the following code
a_ajouter = $('.question');
hidden_div.push(a_ajouter);
console.log(hidden_div);
Well, a DOM object should be added to the div, however, the console shows 'jQuery.fn.init1' as the its last element. No idea what this is.
Here is the page itself. If i was not clear enought (click on the arrow to start event)
You are trying to add a jQuery array inside your normal array,
what you want is to add the jQuery object.
a_ajouter = $('.question').eq(0); //first element
hidden_div.push(a_ajouter);
console.log(hidden_div);
or the DOM object itself.
a_ajouter = $('.question').eq(0); //first element
hidden_div.push(a_ajouter[0]); //html element without the jquery wrapper
console.log(hidden_div);
Cast jQuery object to DOM object, you should use get(), for example $('.question').get().
Because a_ajouter is a jQuery object, if you want to insert all the elements in the jQuery object to an existing array you can try
a_ajouter = $('.question');
hidden_div.push.apply(hidden_div, a_ajouter.get());
console.log(hidden_div);
If you want to have a new array then you can use a_ajouter.get() like
hidden_div = a_ajouter.get();
I am using $('form')[0] in following syntax
var formData = new FormData($('form')[0]);
I have following question regarding above syntax
What is the meaning of $('form')[0]?
Main Question: what can be the alternative for $('form')[0]? i have 2 forms in page
The meaning of this is the following:
find all elements on the page with the tag name form and take the first one.
If you want to take the second one just do $('form')[1]
Alternatives could be: .get(0) or .first(), also I do not see a reason for doing this, because in my opinion all of them are kind of straightforward. Although actually .first returns jquery element, not DOM element.
What is the meaning of $('form')[0]?
This gets first form among your forms. If you want to get second from the you could do $('form')[1].
what can be the alternative for $('form')[0]?
There is various methods but what if there are many forms in your document and want to get some of them but you don't need to worry about the order of the form. You can get them by name like this: $('form')['your_form_name]
If you want to use vanilla javascript then you can do any of the followings to get the forms:
document.forms[0] //gets first form
document.forms[1] //gets second form
document.forms['form_name'] //get form which has name == form_name
document.forms.form_name //get form which has name == form_name
document.form_name //get form which has name == form_name
And if you google about this you may know more info.
$('form')[0] gives the reference of the first form element in your
document.
If you want to refer form specifically you can give an ID to it and get reference using $("#formID")
$('form')[0] returns the first for element in the page, $('form') returns a jQuery object which is not accepted by FormData, the jQuery object allows you to access its members using index, so [0] gives you the first element in the jQuery object, it is the same as $('form').get(0)
If you have multiple elements then you need to give an id or class to the form and use it as a selector like <form id="x"></form>, so you can use $('#x')[0]
meaning of $('form')[0] is that if you have n forms in your page this selector will gather data of first form.
and if you want to get rid of this way coding give an Id to your forms and then select each form by its id.
1). $('form') is a jQuery instance which is an array like object with numeric indexes. You can access the first element from a collection with square brackets, by index 0.
2). Alternatively you can give form a name and access it with pure Javascript by name:
document.formName
or there is a froms property of the document that stores references to all HTMLFormElement elements. So your jQuery code is equivalent to
document.forms[0]
My app uses a Parse backend to keep a running list of all the concerts in my area that my friends and I are interested in.
On the main page I use a parse query display a module for each show stored in the database. As each module is created, I use this code to add a data attribute to the show's outermost div, corresponding to the show's object ID in parse:
var showId = object.id;
$("div.show_module:last").data("showId", showId);
I'm successfully able to retrieve the showId of a specific show when the user clicks on the show's module:
$("#showsList").delegate(".showModuleBody", "click", function() {
var storeObjectId = $(this).closest("div.show_module").data("showId");
});
That all works great, proving that assigning the data-attribute is working.
Where I'm running into trouble is trying to find an element with a specific data attribute or a specific value for that attribute on a given page. The end goal is to get the y-offset of that div so I can scroll the page to the appropriate spot. I assumed I could use the following code to find the element, but it isn't working -
// find all elements with class .show_module
var allShows = document.querySelectorAll('.show_module');
// find all elements with showId data attribute
var showsWithShowId = document.querySelectorAll('[data-showId]');
// find all elements with a specific showId data attribute
var showToFind = document.querySelectorAll("[data-showId='2']");
The first of those 3 works, proving that all the elements I'm interested in are loaded into the page by the time I'm calling this function, but the 2nd and 3rd queries return nothing.
Any idea what I'm doing wrong here? Is it something with syntax? Is querySelectorAll just incompatible with how I'm setting the data attribute?
I tried to include only what I figured are the salient bits of code, but if more is necessary please let me know.
Try This
$('*[data-customerID="22"]');
For more info, look here:
Selecting element by data attribute
jQuery's .data method does not create a HTML attribute, but associates a value in its internal data store with the element.
If you want to set a data attribute with jQuery, then you need to use:
$("div.show_module:last").attr("data-showId", showId);
To get the value, you can use .data('showId') or .attr('data-showId').
(note that HTML attributes are case-insensitive, so you can also write "data-showid" instead.)