CODEWITHSUNDEEP
javascript
Boby Marley
Boby Marley

Reputation: 43

How to set value of input without locking user input

I have multiple inputs and i want to display result in input and change it freely. When i type 5 in first input it should display 5 in the second. But how to change the value of second input and display it in the first? I want to be able to constantly change the values.

function calc(){
var val1 = document.getElementById("val1");
let val2 = document.getElementById("value2");

val2.value = 2;
}
<html>
<head>
</head>
<body>
<input id="value1" type="number" value="" oninput="calc()">
<input id="value2" type="number" value="" oninput="calc()">
</body>
</html>

Upvotes: 0

Views: 223

Answers (2)

Onkar
Onkar

Reputation: 2584

<html>
<head>
</head>
<body>
<input id="value1" type="number" value="" oninput="document.getElementById('value2').value =this.value">
<input id="value2" type="number" value="" oninput="document.getElementById('value1').value =this.value">
</body>
</html>

Use like this

Upvotes: 1

Praneet Dixit
Praneet Dixit

Reputation: 1425

You can pass an additional parameter to your function and change the values as per the parameters.

function calc(num){
var val1 = document.getElementById("value1");
let val2 = document.getElementById("value2");

num ? val1.value = val2.value : val2.value = val1.value;
}
<input id="value1" type="number" value="" oninput="calc(0)">
<input id="value2" type="number" value="" oninput="calc(1)">

I have replaced the if else condition with a ternary operator. I hope that you are familiar with it.

Upvotes: 2

Related Questions