Javascript 将默认值设置为输入字段，但使其可编辑（以便能够手动更改）？

我有一个在线表单，它从一些输入字段中获取值并对其进行计算。请检查fiddle URL：

我基本上需要为一个名为（四舍五入估价）name=“B200”的特定输入字段设置一个默认值。我希望此输入将另一个字段name=“B52”中的值作为默认值，但我希望用户能够手动编辑此字段以输入另一个数字（将用于其他计算）

最后，我想在最后阶段隐藏“提交”按钮，因为这不是一个真正的表单，它只是一个用户可以使用的在线表单

我真的很感谢你的评论和努力。请查看fiddle链接以更好地了解当前结构

下面是JAVASCRIPT代码。检查JSFIDLE的完整结构

    function milesIt(num) {
  return Math.floor(num).toString().split("").reverse().map((n, i, a) =>
    (i + 1) % 3 === 0 && i + 1 != a.length && "," + n || n).reverse().join("");
}

var inputs = document.querySelectorAll("[type='text']");
inputs.forEach(function(input) {
  //change the values to include the thousand separator each time the user changes an input
  input.onchange = function(e) {
    inputs.forEach(function(inp) {
      inp.value = inp.value.replace(/[,]/g, '');
    });
    calcule2();
    inputs.forEach(function(inp) {
      inp.value = milesIt(inp.value);
    });

  }

  input.value = milesIt(input.value);
});
////////////////////////////////////////////



var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  // ... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }

  // ... and run a function that displays the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form... :
  if (currentTab >= x.length) {
    //...the form gets submitted:
    document.getElementById("CreativeAcquisitions").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class to the current step:
  x[n].className += " active";
}





function calcule2() {

  var i = 0;
  for (i = 0; i <= 50; i++) {
    calcule();
  }
}

function calcule() {

  CreativeAcquisitions.B28.value = parseFloat(CreativeAcquisitions.B17.value) + parseFloat(CreativeAcquisitions.B19.value) + parseFloat(CreativeAcquisitions.B21.value) + parseFloat(CreativeAcquisitions.B23.value) + parseFloat(CreativeAcquisitions.B25.value);

  CreativeAcquisitions.B52.value = (parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value)) + parseFloat(CreativeAcquisitions.D81.value) +
    parseFloat(CreativeAcquisitions.B300.value);

  CreativeAcquisitions.B55.value = parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value);
  CreativeAcquisitions.B56.value = parseFloat(CreativeAcquisitions.B28.value);

  //CreativeAcquisitions.B200.value = CreativeAcquisitions.B52.value; //testing
  //document.getElementById("B200").value = CreativeAcquisitions.B52.value;

  CreativeAcquisitions.B66.value = parseFloat(CreativeAcquisitions.B200.value);
  CreativeAcquisitions.B67.value = parseFloat(CreativeAcquisitions.D81.value);

  CreativeAcquisitions.B68.value = parseFloat(CreativeAcquisitions.B36.value) + parseFloat(CreativeAcquisitions.B37.value) + parseFloat(CreativeAcquisitions.B38.value) + parseFloat(CreativeAcquisitions.B39.value) + parseFloat(CreativeAcquisitions.B40.value);

  CreativeAcquisitions.B300.value = (parseFloat(CreativeAcquisitions.B36.value) + parseFloat(CreativeAcquisitions.B37.value) + parseFloat(CreativeAcquisitions.B38.value) + parseFloat(CreativeAcquisitions.B39.value) + parseFloat(CreativeAcquisitions.B40.value)) * -1;

  CreativeAcquisitions.B69.value = parseFloat(CreativeAcquisitions.B41.value);
  CreativeAcquisitions.B70.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B46.value)) / 100;
  CreativeAcquisitions.B71.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B47.value)) / 100;
  CreativeAcquisitions.B72.value = parseFloat(CreativeAcquisitions.B66.value) - parseFloat(CreativeAcquisitions.B67.value) - parseFloat(CreativeAcquisitions.B70.value) - parseFloat(CreativeAcquisitions.B69.value) - parseFloat(CreativeAcquisitions.B71.value);
  CreativeAcquisitions.B76.value = parseFloat(CreativeAcquisitions.B17.value);
  CreativeAcquisitions.D76.value = (parseFloat(CreativeAcquisitions.B76.value) * parseFloat(CreativeAcquisitions.C76.value)) / 100;
  CreativeAcquisitions.B77.value = parseFloat(CreativeAcquisitions.B19.value);
  CreativeAcquisitions.D77.value = (parseFloat(CreativeAcquisitions.B77.value) * parseFloat(CreativeAcquisitions.C77.value)) / 100;
  CreativeAcquisitions.B78.value = parseFloat(CreativeAcquisitions.B21.value);
  CreativeAcquisitions.D78.value = (parseFloat(CreativeAcquisitions.B78.value) * parseFloat(CreativeAcquisitions.C78.value)) / 100;
  CreativeAcquisitions.B79.value = parseFloat(CreativeAcquisitions.B23.value);
  CreativeAcquisitions.D79.value = (parseFloat(CreativeAcquisitions.B79.value) * parseFloat(CreativeAcquisitions.C79.value)) / 100;
  CreativeAcquisitions.B80.value = parseFloat(CreativeAcquisitions.B25.value);
  CreativeAcquisitions.D80.value = (parseFloat(CreativeAcquisitions.B80.value) * parseFloat(CreativeAcquisitions.C80.value)) / 100;
  CreativeAcquisitions.B81.value = parseFloat(CreativeAcquisitions.B76.value) + parseFloat(CreativeAcquisitions.B77.value) + parseFloat(CreativeAcquisitions.B78.value) + parseFloat(CreativeAcquisitions.B79.value) + parseFloat(CreativeAcquisitions.B80.value);
  CreativeAcquisitions.D81.value = parseFloat(CreativeAcquisitions.D76.value) + parseFloat(CreativeAcquisitions.D77.value) + parseFloat(CreativeAcquisitions.D78.value) + parseFloat(CreativeAcquisitions.D79.value) + parseFloat(CreativeAcquisitions.D80.value);
  CreativeAcquisitions.B91.value = parseFloat(CreativeAcquisitions.B36.value);

  CreativeAcquisitions.B92.value = parseFloat(CreativeAcquisitions.B37.value);

  CreativeAcquisitions.B93.value = parseFloat(CreativeAcquisitions.B38.value);

  CreativeAcquisitions.B94.value = parseFloat(CreativeAcquisitions.B39.value);

  CreativeAcquisitions.B95.value = parseFloat(CreativeAcquisitions.B40.value);

  CreativeAcquisitions.B96.value = (parseFloat(CreativeAcquisitions.B52.value) * parseFloat(CreativeAcquisitions.B46.value)) / 100;

  CreativeAcquisitions.B97.value = parseFloat(CreativeAcquisitions.B41.value);


  CreativeAcquisitions.B98.value = (parseFloat(CreativeAcquisitions.B91.value) + parseFloat(CreativeAcquisitions.B92.value) + parseFloat(CreativeAcquisitions.B93.value) + parseFloat(CreativeAcquisitions.B94.value) + parseFloat(CreativeAcquisitions.B95.value) + parseFloat(CreativeAcquisitions.B96.value) + parseFloat(CreativeAcquisitions.B97.value)) * -1;

  CreativeAcquisitions.C98.value = (parseFloat(CreativeAcquisitions.C91.value) + parseFloat(CreativeAcquisitions.C92.value) + parseFloat(CreativeAcquisitions.C93.value) + parseFloat(CreativeAcquisitions.C94.value) + parseFloat(CreativeAcquisitions.C95.value) + parseFloat(CreativeAcquisitions.C96.value) + parseFloat(CreativeAcquisitions.C97.value)) * -1;

  CreativeAcquisitions.B101.value = parseFloat(CreativeAcquisitions.B4.value);
  CreativeAcquisitions.B105.value = (parseFloat(CreativeAcquisitions.B101.value) * parseFloat(CreativeAcquisitions.B103.value)) / 100;
  CreativeAcquisitions.B107.value = parseFloat(CreativeAcquisitions.C98.value);
  CreativeAcquisitions.B108.value = parseFloat(CreativeAcquisitions.B101.value) - parseFloat(CreativeAcquisitions.B105.value) + parseFloat(CreativeAcquisitions.B107.value);
}

函数milesIt（num）{
返回Math.floor（num.toString（）.split（“”）.reverse（）.map（（n，i，a）=>
（i+1）%3==0&&i+1！=a.length&&“，“+n | | n）.reverse（）.join（“”）；
}
var inputs=document.queryselectoral（“[type='text']”）；
输入。forEach（函数（输入）{
//更改值，以便在用户每次更改输入时包含千位分隔符
input.onchange=函数（e）{
输入。forEach（函数（inp）{
inp.value=inp.value.replace（/[，]/g'）；
});
计算2（）；
输入。forEach（函数（inp）{
inp.value=milesIt（inp.value）；
});
}
input.value=milesIt（input.value）；
});
////////////////////////////////////////////
var currentTab=0；//当前选项卡设置为第一个选项卡（0）
显示选项卡（当前选项卡）；//显示当前选项卡
功能显示选项卡（n）{
//此函数将显示表单的指定选项卡。。。
var x=document.getElementsByClassName（“选项卡”）；
x[n].style.display=“块”；
//…并修复上一个/下一个按钮：
如果（n==0）{
document.getElementById（“prevBtn”）.style.display=“无”；
}否则{
document.getElementById（“prevBtn”）.style.display=“inline”；
}
如果（n==（x.length-1））{
document.getElementById（“nextBtn”）.innerHTML=“提交”；
}否则{
document.getElementById（“nextBtn”）.innerHTML=“Next”；
}
//…并运行显示正确步骤指示器的功能：
固定步进指示器（n）
}
函数nextPrev（n）{
//此函数将确定要显示的选项卡
var x=document.getElementsByClassName（“选项卡”）；
//如果当前选项卡中的任何字段无效，请退出该功能：
如果（n==1&&！validateForm（））返回false；
//隐藏当前选项卡：
x[currentTab].style.display=“无”；
//将当前选项卡增加或减少1：
currentTab=currentTab+n；
//如果您已到达表单的末尾…：
如果（currentTab>=x.length）{
//…表格将在以下时间提交：
document.getElementById（“CreativeAcquisitions”）.submit（）；
返回false；
}
//否则，显示正确的选项卡：
显示选项卡（当前选项卡）；
}
函数validateForm（）{
//此函数用于验证表单字段
变量x，y，i，valid=true；
x=document.getElementsByClassName（“选项卡”）；
y=x[currentTab].getElementsByTagName（“输入”）；
//检查当前选项卡中每个输入字段的循环：
对于（i=0；i对于（i=0；i我不知道这些字段是如何创建的，但按照您的代码，这可能会有所帮助：

//////////Newcode///////////////////////////
function milesIt(num) {
  return Math.floor(num).toString().split("").reverse().map((n, i, a) =>
    (i + 1) % 3 === 0 && i + 1 != a.length && "," + n || n).reverse().join("");
}

var inputs = document.querySelectorAll("[type='text']");
inputs.forEach(function(input) {
  //change the values to include the thousand separator each time the user changes an input
  input.onchange = function(e) {
    inputs.forEach(function(inp) {
      inp.value = inp.value.replace(/[,]/g, '');
    });
    calcule2();
    inputs.forEach(function(inp) {
      inp.value = milesIt(inp.value);
    });
    //e.target.value = milesIt(e.target.value.replace(/[.]/g, ''));
  }
  //change the values of the inputs at the beginning, although you could write them as HTML with the thousand separator values in the source code
  input.value = milesIt(input.value);
});
////////////////////////////////////////////



var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  // ... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").style.display='none';
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }

  // ... and run a function that displays the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form... :
    if (n < (x.length - 2))
        document.getElementById("nextBtn").style.display='inline';
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class to the current step:
  x[n].className += " active";
}





function calcule2() {

  var i = 0;
  for (i = 0; i <= 50; i++) {
    calcule();
  }
}

function calcule() {

  CreativeAcquisitions.B28.value = parseFloat(CreativeAcquisitions.B17.value) + parseFloat(CreativeAcquisitions.B19.value) + parseFloat(CreativeAcquisitions.B21.value) + parseFloat(CreativeAcquisitions.B23.value) + parseFloat(CreativeAcquisitions.B25.value);

  CreativeAcquisitions.B52.value = (parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value)) + parseFloat(CreativeAcquisitions.D81.value) +
    parseFloat(CreativeAcquisitions.B300.value);

  CreativeAcquisitions.B55.value = parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value);
  CreativeAcquisitions.B56.value = parseFloat(CreativeAcquisitions.B28.value);

  CreativeAcquisitions.B200.value = Math.round(parseFloat(CreativeAcquisitions.B52.value)); //here is your field

  CreativeAcquisitions.B66.value = parseFloat(CreativeAcquisitions.B200.value);
  CreativeAcquisitions.B67.value = parseFloat(CreativeAcquisitions.D81.value);

  CreativeAcquisitions.B68.value = parseFloat(CreativeAcquisitions.B36.value) + parseFloat(CreativeAcquisitions.B37.value) + parseFloat(CreativeAcquisitions.B38.value) + parseFloat(CreativeAcquisitions.B39.value) + parseFloat(CreativeAcquisitions.B40.value);

  CreativeAcquisitions.B300.value = (parseFloat(CreativeAcquisitions.B36.value) + parseFloat(CreativeAcquisitions.B37.value) + parseFloat(CreativeAcquisitions.B38.value) + parseFloat(CreativeAcquisitions.B39.value) + parseFloat(CreativeAcquisitions.B40.value)) * -1;

  CreativeAcquisitions.B69.value = parseFloat(CreativeAcquisitions.B41.value);
  CreativeAcquisitions.B70.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B46.value)) / 100;
  CreativeAcquisitions.B71.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B47.value)) / 100;
  CreativeAcquisitions.B72.value = parseFloat(CreativeAcquisitions.B66.value) - parseFloat(CreativeAcquisitions.B67.value) - parseFloat(CreativeAcquisitions.B70.value) - parseFloat(CreativeAcquisitions.B69.value) - parseFloat(CreativeAcquisitions.B71.value);
  CreativeAcquisitions.B76.value = parseFloat(CreativeAcquisitions.B17.value);
  CreativeAcquisitions.D76.value = (parseFloat(CreativeAcquisitions.B76.value) * parseFloat(CreativeAcquisitions.C76.value)) / 100;
  CreativeAcquisitions.B77.value = parseFloat(CreativeAcquisitions.B19.value);
  CreativeAcquisitions.D77.value = (parseFloat(CreativeAcquisitions.B77.value) * parseFloat(CreativeAcquisitions.C77.value)) / 100;
  CreativeAcquisitions.B78.value = parseFloat(CreativeAcquisitions.B21.value);
  CreativeAcquisitions.D78.value = (parseFloat(CreativeAcquisitions.B78.value) * parseFloat(CreativeAcquisitions.C78.value)) / 100;
  CreativeAcquisitions.B79.value = parseFloat(CreativeAcquisitions.B23.value);
  CreativeAcquisitions.D79.value = (parseFloat(CreativeAcquisitions.B79.value) * parseFloat(CreativeAcquisitions.C79.value)) / 100;
  CreativeAcquisitions.B80.value = parseFloat(CreativeAcquisitions.B25.value);
  CreativeAcquisitions.D80.value = (parseFloat(CreativeAcquisitions.B80.value) * parseFloat(CreativeAcquisitions.C80.value)) / 100;
  CreativeAcquisitions.B81.value = parseFloat(CreativeAcquisitions.B76.value) + parseFloat(CreativeAcquisitions.B77.value) + parseFloat(CreativeAcquisitions.B78.value) + parseFloat(CreativeAcquisitions.B79.value) + parseFloat(CreativeAcquisitions.B80.value);
  CreativeAcquisitions.D81.value = parseFloat(CreativeAcquisitions.D76.value) + parseFloat(CreativeAcquisitions.D77.value) + parseFloat(CreativeAcquisitions.D78.value) + parseFloat(CreativeAcquisitions.D79.value) + parseFloat(CreativeAcquisitions.D80.value);
  CreativeAcquisitions.B91.value = parseFloat(CreativeAcquisitions.B36.value);

  CreativeAcquisitions.B92.value = parseFloat(CreativeAcquisitions.B37.value);

  CreativeAcquisitions.B93.value = parseFloat(CreativeAcquisitions.B38.value);

  CreativeAcquisitions.B94.value = parseFloat(CreativeAcquisitions.B39.value);

  CreativeAcquisitions.B95.value = parseFloat(CreativeAcquisitions.B40.value);

  CreativeAcquisitions.B96.value = (parseFloat(CreativeAcquisitions.B52.value) * parseFloat(CreativeAcquisitions.B46.value)) / 100;

  CreativeAcquisitions.B97.value = parseFloat(CreativeAcquisitions.B41.value);


  CreativeAcquisitions.B98.value = (parseFloat(CreativeAcquisitions.B91.value) + parseFloat(CreativeAcquisitions.B92.value) + parseFloat(CreativeAcquisitions.B93.value) + parseFloat(CreativeAcquisitions.B94.value) + parseFloat(CreativeAcquisitions.B95.value) + parseFloat(CreativeAcquisitions.B96.value) + parseFloat(CreativeAcquisitions.B97.value)) * -1;

  CreativeAcquisitions.C98.value = (parseFloat(CreativeAcquisitions.C91.value) + parseFloat(CreativeAcquisitions.C92.value) + parseFloat(CreativeAcquisitions.C93.value) + parseFloat(CreativeAcquisitions.C94.value) + parseFloat(CreativeAcquisitions.C95.value) + parseFloat(CreativeAcquisitions.C96.value) + parseFloat(CreativeAcquisitions.C97.value)) * -1;

  CreativeAcquisitions.B101.value = parseFloat(CreativeAcquisitions.B4.value);
  CreativeAcquisitions.B105.value = (parseFloat(CreativeAcquisitions.B101.value) * parseFloat(CreativeAcquisitions.B103.value)) / 100;
  CreativeAcquisitions.B107.value = parseFloat(CreativeAcquisitions.C98.value);
  CreativeAcquisitions.B108.value = parseFloat(CreativeAcquisitions.B101.value) - parseFloat(CreativeAcquisitions.B105.value) + parseFloat(CreativeAcquisitions.B107.value);
}


///Newcode///////////////////////////
函数milesIt（num）{
返回Math.floor（num.toString（）.split（“”）.reverse（）.map（（n，i，a）=>
（i+1）%3==0&&i+1！=a.length&&“，“+n | | n）.reverse（）.join（“”）；
}
var inputs=document.queryselectoral（“[type='text']”）；
输入。forEach（函数（输入）{
//更改值，以便在用户每次更改输入时包含千位分隔符
input.onchange=函数（e）{
输入。forEach（函数（inp）{
inp.value=inp.value.replace（/[，]/g'）；
});
计算2（）；
输入。forEach（函数（inp）{
inp.value=milesIt（inp.value）；
});
//e、 target.value=milesIt（例如target.value.replace（/[.]/g'）；
}
//在开始时更改输入的值，尽管可以在源代码中将它们写成带有千个分隔符值的HTML
input.value=milesIt（input.value）；
});
////////////////////////////////////////////
var currentTab=0；//当前选项卡设置为第一个选项卡（0）
showTab（currentTab）；//显示当前选项卡
功能显示选项卡（n）{
//此函数将显示表单的指定选项卡。。。
var x=document.getElementsByClassName（“选项卡”）；
x[n].style.display=“块”；
//…并修复上一个/下一个按钮：
如果（n==0）{
document.getElementById（“prevBtn”）.style.display=“无”；
}否则{
document.getElementById（“prevBtn”）.style.display=“inline”；
}
如果（n==（x.length-1））{
document.getElementById（“nextBtn”）.style.display='none'；
}否则{
document.getElementById（“nextBtn”）.innerHTML=“Next”；
}
//…并运行显示正确步骤指示器的功能：
固定步进指示器（n）
}
函数nextPrev（n）{
//此函数将确定要显示的选项卡
var x=docu