We Keep Coding

Can I input from and output to the same textbox is javascript?

I have been trying different options for this but as a JS beginner, I'm missing something that I can't find in the literature, so your help is appreciated.
I would like to have only two text output/input boxes on display. When the focus is on one, it accepts input and the other field becomes output for the result. If I change focus to the other box, it now allows input and the other box displays the converted result.
Initial state:
<label for="">Fahrenheit: </label><input type="textbox" name="far"></input><br>
<label for="">Celsius: </label><input type="textbox" name="cel"></input><br>
Focus on Fahrenheit turns the state to:
<label for="">Fahrenheit: </label><input type="textbox" name="far"></input><br>
<label for="output">Celsius: </label><input type="textbox" name="cel"></input><br>
Focus on Celsius turns the state to:
<label for="output">Fahrenheit: </label><input type="textbox" name="far"></input><br>
<label for="">Celsius: </label><input type="textbox" name="cel"></input><br>
Is it possible to do this so regardless of which field is getting input, the other will show the output of the converted result?
If not, what is the closest way to do what I'd like to do?

See comments inline below:
// Put references to the two temp fields in an array:
let tempFields = [document.getElementById("f"), document.getElementById("c")];
// Used later to store reference to inputs
let input = null;
let output = null;
// Set up one event handler on a common acnestor
// of the two input elements that trigger events
document.querySelector(".temps").addEventListener("input", function(event){
// Determine which element triggered the event
input = event.target;
// Set output to 0 if input is index 1 in the array or
// 1 if input index is 0 in the array
output = tempFields.indexOf(input) === 0 ? tempFields[1] : tempFields[0];
// Produce the right output
if(output.id === "c"){
output.value = (+input.value - 32) * 5/9;
} else {
output.value = (+input.value * 9/5) + 32;
}
});
label { display:inline-block; width:100px; }
<div class="temps">
<label for="f">Fahrenheit: </label><input id="f"><br>
<label for="c">Celsius: </label><input id="c"><br>
</div>

custom error message with more html validate

Hello I want to create a custom error alert in HTML
here I want to custom in( required) and another for ( max and min number)
<div class="form-group">
<label for="durationdays">Days</label><br>
<input type="number" name="duration" max="5" min="1" class="form-control" style="width:50%" required oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);">
</div>
and this is a javascript code
function InvalidMsg(textbox) {
if (textbox.value === '') {
textbox.setCustomValidity
('Required');
} else if (textbox.validity.typeMismatch) {
textbox.setCustomValidity
('ONlY number');
} else {
textbox.setCustomValidity('');
}
return true;
}
I want if the user clicks on send button with empty value show this(Required)
and if enter letter value show (ONLY number)
and if enter less than 1 or more than 5 show (should be less than or equal 5)

You can use textbox.setCustomValidity(`Max: ${textbox.max} Min:${textbox.min}`); to get the min and max values, then it's possible to show the numbers. The other ones should work fine.

Unable to test the value of a number in external javascript file

I am trying to send a number from a user to an external javascript file ie .js and determine if it is less than or greater than another number
function processFormData() {
var name_element = document.getElementById('txt_name');
var x = name_element;
var x = Number(+x);
if (x > 10) {
alert("large number");
} else {
alert ("small number");
}
}
<script src="demo2.js"></script>
<p>
<label for="name">Your Name: </label>
<input type="number" name="name" id="txt_name">
</p>
</label>
<input type="button" name="submit" value="submit"
onclick="processFormData();" >

I think you are doing some pointless things here, first of all, why do you create two variables that points to the same object?
The second line is totally unnecessary. You are good to go with name_element.
var name_element = document.getElementById('txt_name');
var x = name_element;
And the solution to your problem is, you are trying to convert a DOM element to the number. Instead you should access to textContent first.
var numericalValue = Number(name_element.textContent);
// If you are expecting that input from a input box
// then you need to use name_element.value
if (x > 10) {
alert("large number");
} else {
alert ("small number");
}

Your code attempts to convert the text field itself into a number, rather than the value of the text field.
NOTES:
There's no need to set a variable up for the text field and then another to the first.
You have an extra </label> tag in your code.
The for attribute of a label must point to the id of some form
field, not the name attribute value.
Don't give elements a name or an id of name as this often
causes problems with the Global name property of the window
object.
function processFormData() {
var name_element = document.getElementById('txt_name');
// Convert the value of the element by prepending + to it
var x = +name_element.value;
if (x > 10) {
alert("large number");
} else {
alert ("small number");
}
}
<script src="demo2.js"></script>
<p>
<label for="txt_name">Your Name: </label>
<input type="number" name="txt_name" id="txt_name">
</p>
<input type="button" name="submit" value="submit" onclick="processFormData();">

Converting form number field value structure

in a webpage, I asked users to input a field named "budget". I tried using the script below to create thousands separator for the entered number:
window.onload = function() {
document.getElementById("project-budget").onblur = function() {
this.value = parseFloat(this.value.replace(/,/g, ""))
.toFixed(0)
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
document.getElementById("display").value = this.value.replace(/,/g, "")
}
}
<input id="project-budget" step="5" required type="text" pattern="[0-9]*" class="test input-item text-field is_number numberVal" name="et_budget" min="1">
it changes the value perfectly but the problem is that making the field value as text cause cms to not understand value in this field. so I need to change the value back to simple numbers in a hidden field and use that hidden field to insert value to database.
how can I change the value back?
for example user enters 1000000 and the script changes it to 1,000,000. I want to print 1000000 in a hidden field.

This might help.
function parseBudget(element) {
const value = parseFloat(element.value.replace(/,/g, ''));
console.log(value);
element.value = value.toFixed(0)
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
document.querySelector("#forCms").value = value;
}
<input id="project-budget" step="5" required type="text" pattern="[0-9]*" onblur="parseBudget(this)" class="test input-item text-field is_number numberVal" name="et_budget" min="1">
<input type="number" id="forCms">

How to get the value only from an input box that contains value out of multiple input boxes

I would like to get the value from an input box that contains value. Only one of them contains some value out of 3 and remaining 2 are empty:
The code mentioned below doesn't seems to work:
var a = $('input').eq(0).val();
if (a == undefined) {
a = $('input').eq(1).val();
//if still undefined try the next input box
if (a == undefined) {
a = $('input').eq(2).val();
}
}
console.log(a);

If you're trying to find the input that has a value entered you can use filter() instead of repeatedly checking them. Try this:
var $field = $('input').filter(function() {
return $(this).val().trim() != '';
});
console.log($field.val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" />
<input type="text" value="foo" />
<input type="text" value="" />
Note that the above assumes that only one field will ever have a value. If there will be multiple, then you'll need to loop over the resulting collection in $field.