How to change value of input[type=number] on key press via Javascript?

Question

I already have a series of events of keypress to trigger some sound, to run countdown clock and whatnot.

I also want to assign keycode to change the value of a couple of input[type=number], either subtract or add value by incremental of -1/+1 each key press. I have done some search but couldn't really give me the ultimate guide.

Here's what I have in the header.

function runScript(e){
if(e.keyCode == 32 && e.shiftKey){
   gameclock();
}}

and on my html

<body onkeydown="runScript(event)"> 
...
<input id="whateverID1" type="number" value="00">

Let's say if I want to add #whateverID1 value by pressing = and subtract #whateverID1 value by pressing -, appreciate any guide to how can I achieve that. Thank you very much.

I have tried this but doesn't seem to work.

var CounterName = 0; 
if(e.keyCode == 49 ) {
document.getElementById('whateverID1').value = ++CounterName;
} 
if(e.keyCode == 50 ) { 
document.getElementById('whateverID1').value = --CounterName; 
}

Kieran McWilliams · Accepted Answer · 2018-08-06 02:25:04Z

2

For one, using onclick/onkeydown things in html is usually bad practice. Rather, give the element an id or class and add an eventListener from the JS instead.

Try this below, the jsfiddle is working and should let you do what you want:

document.getElementById("bodyId").addEventListener("keydown", function (event) {
  var CounterName = 1;
  var currentValue = parseInt(document.getElementById('whateverID1').value);

  if(event.keyCode == 187) {
    document.getElementById('whateverID1').value = currentValue + CounterName;
  }
  else if(event.keyCode == 189) { 
    document.getElementById('whateverID1').value = currentValue - CounterName;
  }
});

http://jsfiddle.net/Maxmaxs5/7thqo0zs/7/

If this helps or you need anything else, let me know!

edited Aug 6, 2018 at 2:25

answered Aug 5, 2018 at 3:47

Kieran McWilliams

1018 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andy Chin Over a year ago

Thanks @kieran-mcwilliamw. And quick one here if(event.key == "=" && event.shiftKey ) will not work for combination key?

Kieran McWilliams Over a year ago

Okay for some reason once you try to do combination key, key does not like to work, so keyCode is actually better. Try if(event.keyCode == 187 && event.shiftKey). Code for = is 187 and for - is 189. If you need to find keyCodes for other keys you can look them up or just do console.log(event.keyCode). Character codes and key codes are not the same, which I am sure can trip people up easily. Hope that fixes it, if so let me know!

Andy Chin Over a year ago

It works! Thank you so much. But it kill my another function

$('.home input[type=number]').change(function(){ 		if(parseInt(this.value) > 4){ 			$('#home-b').prop('checked', true); 		} 		else 		{ 			$('#home-b').prop('checked', false); 		} 	});

oops

Kieran McWilliams Over a year ago

Erm I'm not sure how those two functions have any correlation/how one killed the other.. And I would need to see more code to help you out again, maybe email me?

Collectives™ on Stack Overflow

How to change value of input[type=number] on key press via Javascript?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related