如何使2个自动填充脚本一起工作

Question

我希望两个字段（id =“ cost”和id =“ deposit”）基于表单中的id =“ size”字段显示2个单独的值。

以下自动填充脚本旨在实现此目标。但是，它们似乎无法一起工作。奇怪的是，我删除了AutoFillCost或AutoFillDepost，然后另一个将自己运行。

但是，它们在一起时不起作用。谁能告诉我为什么会这样。我在下面提供了相关代码：

 <form action="send_form_email.php" method="post" name="contactform">
<table>
  <tbody>
<tr>
  <td>Group Size:</td>
  <td><input type="number" min="6" max="200" id="size"                 
onblur="autoFilldeposit();sizeValidate();" required><strong id="demo"></> 
</td>
<tr>
  <td>Deposit:</td>
  <td><input type="text" id="deposit"></td>
</tr>
<tr>
  <td>Total cost:</td>
  <td><input type="text" id="cost"></td>
</tr>



 <!--Total Cost auto populate-->

<script>

 function autoFillcost() { 
 var sizeb = document.getElementById("size").value;
 if (sizeb <= 25)
 document.getElementById("cost").value = "£200";
 else if (sizeb >= 26 && sizeb <= 50)
document.getElementById("cost").value = "£400";
else
document.getElementById("cost").value = "£600";
}

</script>


<!--Group Size/deposit fields and Validation Message-->

<script>

function autoFilldeposit() { 
var size = document.getElementById("size").value;
if (size <= 25)
document.getElementById("deposit").value = "£100";
else if (size >= 26 && size <= 50)
document.getElementById("deposit").value = "£200";
else
document.getElementById("deposit").value = "£300";
}

function sizeValidate() {
var size = document.getElementById("size");
if (!size.checkValidity()) {
    document.getElementById("demo").innerHTML = size.validationMessage;
} else {
    document.getElementById("demo").innerHTML = "";
} 
} 
</script>