Hi, I making a simple data input website. Can someone suggest where i should start to make an auto calculation? It is a simple addition with something that same function as Textwatcher in android development. Textwatcher is when an object of this type is attached to an Editable, its methods will be called when the text is changed. I already search many time but haven’t find anything that can help me.
Is it numbers being summed or strings being concatenated? If you just keep summing all numbers entered on change, then the result will not be the sum of the current values but the total of all values entered. Which likely isn’t what you want.
let sum = 0;
$("input").each(function () {
$(this).change(function () {
sum += Number($(this).val())
$('#result').text(sum);
});
});
If it does not have to be dynamically updated on each change then I would just put the inputs inside a form and get the values on submit.
Thank you , it is nice if i put that code into a button. But waht i need in my website is no button for calculation. You can go to the link i attach in the post, that is the function i want. If it is impossible for my website.
I didn’t look at the link, I have to log in and request access and I can’t be bothered right now. But hopefully, I understand what it is you want.
I can’t help but feel like I’m missing something really obvious and that this shouldn’t be this complicated, but whatever, at least this seems to work (plain JS no jQuery).
I suggest you take some time and try to make it work for your specific need. You will learn a lot more. We try to help people write code, not write code for them (this isn’t stackoverflow). Specific implementations will demand different code.
If you have any questions about the code I posted just ask. If you have questions about the changes you make and why they don’t work, you can ask.
You made changes to the code that is not correct.
addEventListener is added . on the element, it takes an event type and a callback function.
// inputs is a NodeList of all the input elements you got from querySelectorAll
// forEach loops the NodeList and gives you each input element and an index (input, idx)
inputs.forEach((input, idx) => {
// input is each single input element
// the string "input" is the event type we are listening for (like "change" or "click", here it is the type "input")
// handleInput is the callback function.
input.addEventListener("input", (e) => handleInput(e, idx));
});
Some things to consider:
You will have to get each group of inputs separately.
You can’t just use one numbers object like it is now. You can extend the object const numbers = { group1: {}, group2: {} } and make the adjustments for how it is accessed, or create separate objects for each input group.
Each output element will need to get the values from the corresponding numbers object (or nested object if extended).
I didn’t expect for someone write a code for me that why i didn’t post whole my program. I just need guide because this is new experience for me. i am an intern without a guider in this non IT company. I am more to android developer than website developer. So make a website is a huge picture that i need to explore, even though i learn the basic. I am grateful for your reply because i can figure out a little bit of what should i do. i will ask another question later because i take a long time to test and study new method.