This question already has answers here:
How to pass parameter to function using in addEventListener?
(4 answers)
Closed 6 years ago.
I got a problem when trying to make onchange listener for input in JavaScript:
var apple = document.getElementById("apple");
apple.addEventListener("change", validate("apple"));
function validate(fruitName){
var qty = parseInt(document.getElementById(fruitName).value);
console.log(qty);
}
I am trying to check everytime when the user input something for 'apple' input, I will print the quantity at console. But by doing this, It only ran the first time when I refreshed the browser by printing out a NaN and does not work even when I changed the input for 'apple'.
Any ideas?
Thanks in advance.
You have to reference the function, not call it, and you don't need to pass in the name to use as an ID to get the elements, the element is already available in this
var apple = document.getElementById("apple");
apple.addEventListener("change", validate);
function validate(event){
var qty = parseInt(this.value, 10);
console.log(qty);
}
Whenever you add parentheses you call the function, and whatever is returned is passed to the event handler.
As functions return undefined by default, that's what you get.
Related
This question already has answers here:
How to use JavaScript variables in jQuery selectors?
(6 answers)
Closed 4 years ago.
Im trying to get the value of an html element via Id. I now want to use that value to loop through all the elements with the class from the id.val. How can I search for a variable as a class.
$(".BtnSettings").click(function () {
var Daytime = $("#Daytime").val();
//Here i dont know what to do. Instead of .Daytime I want to search for the var Daytime. Or for $("#Daytime").val() obviously, doesnt matter.
$('.Daytime').each(function () {
$(this).prop("checked", true); // Element(s) are now enabled.
});
})
you can use the attr method of jquery to look for a specific attribute just set a value. if you want to change value of said attribute the second parameter of the function will set it for you like.
Daytime.attr("class","newClass")
$("#Daytime").attr("class")
will give you the class of #Daytime
This question already has answers here:
How do I get the value of text input field using JavaScript?
(16 answers)
Get value of hidden input, send to another hidden input
(3 answers)
Closed 4 years ago.
I have a quick question regarding being able to store parts of an element as a string which I can later recall.
Example:
I have an element that looks like this
<input type= "hidden" name="Posted" id="Posted" value="100|307|151|16">
I can retrieve the element with document.getElementById('#Posted') and now I want to be able to take the contents in the [value] tag and store them as a string in a new variable, so I can get something like this:
var inputValue = "100|307|151|16"
Which I can later recall in my code.
Maybe I'm blind but after a bit of searching I've still come up with nothing. Thanks in advance for the help!
There's two different approaches you can take here.
You can either get the value of the hidden input, or you can get the value of the "value" attribute on the hidden input.
Here's how to do both:
var element = document.getElementById('Posted');
var value = element.value;
var attribute = element.getAttribute("value");
console.log(`value: ${value}`);
console.log(`attribute: ${attribute}`);
And here's a JSFiddle of that in action.
//If all you care about is the value, you can just use .value to get the information you want
const inputValue = document.getElementById('#Posted').value;
Have you tried:
var inputValue = document.getElementById('#Posted').getAttribute("value");
This question already has answers here:
How do I get the value of text input field using JavaScript?
(16 answers)
Closed 7 years ago.
Sorry, it's basic one but I trying to search on google anyways but still not get success.
I want get value of this
<input type='hidden' class='hid_id' value='1' />
Using Javascript I want alert value 1
I trying this
var id = document.getElementsByClassName("hid_id");
alert (id);
But it's alert [object HTMLInputElement]
please help me now.
getElementsByClassName() returns an array so you have to access first element (if there is any). Then try accessing value property:
var id = document.getElementsByClassName("hid_id");
if (id.length > 0) {
alert (id[0].value);
}
jsfiddle
try this:
var id = document.getElementsByClassName("hid_id")[0].value;
This question already has answers here:
Set the value of an input field
(17 answers)
Closed 7 years ago.
I've always been wondering this, but all websites seem to be answering the opposite (how to make text typed in an input be the input of a function).
Is there a way to do it?
Is this what you want to do?
function myFunction() {
// some functionality here
// this function must return something
}
var input = document.querySelector('input');
input.value = myFunction();
This will set the value of the input element to the value returned by myFunction.
This question already has answers here:
What's the difference between '$(this)' and 'this'?
(7 answers)
Closed 7 years ago.
I have a simple object of input checkbox elements and want to check in an each loop which ones are checked and the do stuff. The checkboxes are in one tr in several td's in a table.
Here is my code:
$('table.occupancy-table').on('change', '.minimum_stay input', function() {
var minimumStayInputs = $(this).closest('tr').find('input');
$(minimumStayInputs).each(function(){
if(this.prop('checked')) {
//do stuff
}
}
}
If I console.log this in the each loop, I get data like:
<input id="R11520" type="checkbox" name="minimum_stay[152][1442786400]" value="checked">
<input id="R11521" type="checkbox" name="minimum_stay[152][1442872800]" value="checked">...
But I always get an error Uncaught TypeError: this.prop is not a function from this.prop('checked'). I also tried .is(":checked") with the same result.
Any ideas what the reason might be?
Let me know if you need sample html or I should create fiddle.
this inside the loop is the native DOM element, unwrapped from jQuery.
It has to be wrapped again
$('table.occupancy-table').on('change', '.minimum_stay input', function() {
var minimumStayInputs = $(this).closest('tr').find('input');
$(minimumStayInputs).each(function(){
if ( $(this).prop('checked') ) {
}
});
});
You could also just use the native this.checked, or if you're trying to count them
$(this).closest('tr').find('input:checked').length