We Keep Coding

It seems onChange="myFunction()" is only calling my function once?

I have the following HTML that is within a form, to accept 2 numbers from two separate inputs
<input type="number" id="amount" name="amount" value="0" onchange="ltv()">
<input type="number" id="property_value" name="property_value" value="0" onchange="ltv()">
<p id="ltv"></p>
Then some JavaScript
function ltv() {
var amount = document.getElementById("amount").textContent;
var property_value = document.getElementById("property_value").textContent;
document.getElementById("ltv").innerHTML = Math.round(amount/property_value*100);
};
However after entering a number into the "amount" input the ltv element is updated with NaN which is to be expected at this stage as only the first variable in the math operation is set, however upon entering the second number and tabbing away from the input field the ltv is not updated again.

Seems like textContent isn't returning anything. Try to use .value
function ltv() {
var amount = document.getElementById("amount").value;
var property_value = document.getElementById("property_value").value;
document.getElementById("ltv").innerHTML = Math.round(amount/property_value*100);
};

HTML FORM - Change Parts Of Readonly String Field Using onchange()

I want to assign the values - value and value 2 into the DATAID and DEPNUM when clicking the drop-down and using onchange() function in the following HTML FORM
The places that are being assigned are parts of a readonly field which contains string.
My goal is to create a readonly string which will contain the values that I've chosen from the dropdown fields, all combined in 1 string and separated by underscore.
I've been trying to use onChange method "myFunction()"
<input name="_1_1_2_1" tabindex="-1" class="valueEditable" id="myInput" onchange="myFunction()" type="text" size="32" value="...">
which will look like :
function myFunction()
{
var x = document.getElementById("myInput").value;
document.getElementById("demo").innerHTML = x;
}
eventually I run it on the paragraph :
<p id="demo" value="DATAID_DOCTYPE_DEPNUM_NTA">DATAID_DOCTYPE_DEPNUM_NTA</p>
The problem is that the value at is not changing instant as i change value2 or value.

You can bind two event-listener for both two input fields and updated the readonly textfield value by below approach.
$(document).ready(function(){
$('#field1').keyup(function() {
updatedReadonlyFieldVal($(this), 0);
});
$('#field2').keyup(function() {
updatedReadonlyFieldVal($(this), 2);
});
function updatedReadonlyFieldVal(elem, index) {
let val = elem.val();
let destVal = $('#destination').val();
let splittedDestVal = destVal.split('_');
splittedDestVal[index] = val;
$('#destination').val(splittedDestVal.join('_'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="field1" name="field1">
<input type="text" id="field2" name="field2">
<input value="DATAID_DOCTYPE_DATANUM" readonly id="destination">
Please don't hesitate to let me know if you have any query.

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">

Changing the value of a input box in HTML within a script

Statement In JS HTML5 I have a input box defined as
<input type="number" id="Numerator" value=40>
<input type="number" id="Denominator" value=48>
I want to change the value of these within a script.
Question: What HTML5 command will allow me to change the value of id="Numerator"?
Example
var k = 2
(insert command here to change id="Numerator" to value k)
I know how to pull the value using
document.getElementbyID("Numerator").value
but I cannot figure out how to change the value of that id....
any help would be appreciated and I could not find that value...

You have a typo in your getElementbyID. It should be getElementById:
var k = 2;
document.getElementById("Numerator").value = k;
<input type="number" id="Numerator" value=40>
<input type="number" id="Denominator" value=48>

Try This:-
document.getElementById("Numerator").value = "My value";

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
var el = document.getElementbyID("Numerator");
el.setAttribute("ID", "your-new-id");

You can use like this
document.getElementById('Numerator').value = "Set Value To textbox using javascript";

How to change Uptick Increments in HTML Number Input

I have a number input form:
<input type='number' id='select-number'>Pick A number
I have the following questions:
1: The default uptick increment is 1 (when you click the up arrow on the number input, it goes up by a value of one per click.) How can I change that? I want it to go up in values of 0.1 (tenths). How do I do that?
2: Secondly, I have two variables:
feet=true;
meters=false;
One will always be true, and the other false. How do I change the "max" attribute (using Javascript) based on which of these two variables is true? The two variables come from code something like this:
<input type='radio' id='feet' name='unit_of_measurement'>Feet
<input type='radio' id='meters' name='unit_of_measurement'>Meters
<script>
feet=document.getElementById('feet').checked;
meters=document.getElementById('meters').checked;
</script>
If the variable "feet" is true, then the maximum value of the input (Id='select-number') needs to be 3. If it is meters, it needs to be 8.
How can I do that(^), and how can I change the uptick increment? Thanks for any help.
NOTE: Vanilla Javascript only, Please

1) To change the step of an input simply use step=".1" inside the input tag.
2) To change the max on radio change add a onchange="change()" which sets the max and/or step based on which is checked
html
<input type='radio' id='feet' name='unit_of_measurement' onchange="change()" checked>Feet
<input type='radio' id='meters' name='unit_of_measurement' onchange="change()">Meters
js
function change() {
feet = document.getElementById('feet').checked;
meters = document.getElementById('meters').checked;
selectNumber = document.getElementById('select-number');
if (feet) {
selectNumber.max = 300;
selectNumber.step = 1;
} else {
selectNumber.max = 100;
selectNumber.step = .3;
}
};
fiddle or fiddle 2

The default uptick increment can be modified by using step attribute
<input type="number" name="quantity" step="0.1">
and any property can be accessed (set and get) by getting handle of DOM element.
oldValue = document.getElementById('#<id>').propertyName; //get
document.getElementById('#<id>').propertyName = newValue; //set