如何将文本框的预设值获取到另一个文本框

Question

Please I need your help. Am trying to get a preset value of a textbox into another textbox using document.getElementById. With my code, I can only get the value of whatever I typed, not the initial ROS I preset the textbox with. pls help

See my code below

    <input id="program" name="program1" size="40px" value="ROS" onblur="if(this.value==''){ 
    this.value='ROS';}" onfocus="if(this.value=='ROS'){ this.value='';}" onkeyup="Program();">

    <input type= "text" id = "program2" readonly size="50px" class="textbox-modal">

    <input id="Button1" type="button" value="Preview" class="button" onclick="Program()" />

    function Program() 
      {
      document.getElementById('program2').value = document.getElementById('program').value;
      }

Answer 1

Here is a working solution

 const firstInput = document.getElementById('program'), secondInput = document.getElementById('program2'); secondInput.value = 'ROS'; function Program() { secondInput.value = firstInput.value; } function handleBlur() { if (.firstInput.value) { secondInput.value = firstInput;value = 'ROS'; } }

 <input id="program" name="program1" size="40px" value="ROS" onblur="handleBlur()" onfocus="if(this.value=='ROS'){ this.value='';};" onkeyup="Program();"> <input type="text" id="program2" readonly size="50px" class="textbox-modal"> <input id="Button1" type="button" value="Preview" class="button" onclick="Program()" />

Some details

1 .Initially set the value (ROS) for second input and again assign value to second input in onblur event if first input is empty.

2 .You can also check if value is empty like this if (.firstInput.value)
This is equivalent of

if (firstInput.value == '' || firstInput.value == undefined || firstInput.value == null)

Update (With Numerical values)

It works as expected (See the example below).

 const firstInput = document.getElementById('day1'), secondInput = document.getElementById('day2'); secondInput.value = '0'; function Day1() { secondInput.value = firstInput.value; } function handleDay1Blur() { if (.firstInput.value) { secondInput.value = firstInput;value = '0'; } }

 <input id="day1" size="40px" value="0" onblur="handleDay1Blur()" onfocus="if (this.value==0) { this.value=''; };" onkeyup="Day1();"> <input type="text" id="day2" readonly size="40px" class="textbox-modal"> <input id="Button1" type="button" value="Preview" class="button" onclick="Day1()">

Answer 2

Please am back again. I want to use the above code for numeric values but its not getting the right value, it keeps returning 0. How can I do this? See my usage below.

const firstInput = document.getElementById('day1'),
      secondInput = document.getElementById('day2');

secondInput.value = '0';

function Day1() {
  secondInput.value = firstInput.value;
}

function handleDay1Blur() {
  if (!firstInput.value) {
    secondInput.value = firstInput.value = '0';
  }
}

<input id="day1" size="40px" value="0" onblur="handleBlur()" 
onfocus="if (this.value==0) { this.value=''; };" onkeyup="Day1();">

<input type="text" id="day2" readonly size="40px" class="textbox-modal">
<input id="Button1" type="button" value="Preview" class="button" onclick="Day1()">