What is Textwatcher in Javascript html

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.

Demo for textwatcher i implement in my Apps
The function that i want in my web is like the video in the link.

You should listen to change events:

Example with an input

<input placeholder="Enter some text" name="name"/>
// step 1 select input
const input = document.querySelector('input');

// step 2 add event listener
input.addEventListener('change', updateValue);

//step 3 make your logic
function updateValue(event) {
 console.log("My new value is: ", event.target.value)
}

Hope it helps :slight_smile:

1 Like
$(document).ready(function(){
				function sumB1(){
					var num1= $('#Wmark').val();
						num2= $('#FSframe').val():
						num3= $('#Stain').val();
						num4= $('#Scratch').val();
						TB1 = num1+num2+num3+num4;
						$('#TB1').val(TB1);
				}
				$('num1','num2','num3','num4').change(compute);
			});

I’m so sorry and grateful for your reply :blush:, but it help a little. In case of my code above, how do i implement the example into my codes?

Have you simply tried to change this line to
$('num1','num2','num3','num4').change(sumB1); ?

1 Like

oh ya… my mistake… Thank you so much. but it still did’nt work. :sweat_smile:

If you can provide a demo I can probably help you better :slight_smile:

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.

<form action="">
  <input type="number" required>
  <input type="number" required>
  <input type="number" required>
  <input type="number" required>
  <button>Submit</button>
</form>
<h2 id="result"></h2>
$("form").submit(function (event) {
  event.preventDefault();
  let sum = 0;
  $("input").each(function () {
    sum += Number($(this).val());
  });
  $('#result').text(sum);
});
1 Like

Thank you :grin:, 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.

hi, i already put a link for demo you ask. A function that i want. Thank you.

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).

<input type="number">
<input type="number">
<input type="number">
<input type="number">
<div id="result"></div>
let sum = 0;
const numbers = {};

const inputs = document.querySelectorAll("input");
const result = document.querySelector("#result");

inputs.forEach((input, idx) => {
  input.addEventListener("input", (e) => handleInput(e, idx));
  numbers[idx] = 0;
});

function handleInput(e, idx) {
  sum = 0;
  numbers[idx] = e.target.value;
  Object.values(numbers).forEach((val) => {
    sum += Number(val);
    result.innerText = sum;
  });
}
1 Like

Thank you so much. it works!! :partying_face:

what if the result display in a input box? Is it like change

result.innerText=sum;

into this

document.getElementById('#result').value = sum;


it is work when i test it on other simple page. I just realize that something wrong with codes .

let sumB1 = 0;
		const number ={};
		
		const inputB1 = document.querySelectorAll(".inputB1 input");
		const B1result = document.querySelector("#TB1");
		
		inputB1.forEach((input, idx) => {
			inputB1.addEventListener(".inputB1 input", (e)=> handleInput(e,idx));
			number[idx]=0;
		});
		function handleInput(e,idx){
			sumB1=0;
			number[idx]=e.target.value;
			Object.values(number).forEach((val) =>{
				sumB1+=Number(val);
				B1result.innerHTML =sumB1;
			});
		}

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.

element.addEventListener('EventType', theCallbackFunction)

For example:

// 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:

  1. You will have to get each group of inputs separately.

  2. 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.

  3. Each output element will need to get the values from the corresponding numbers object (or nested object if extended).

1 Like

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. :smile: i will ask another question later because i take a long time to test and study new method.

1 Like