javascript - 选择选项显示输入 block 并输入计数并自动显示另一个输入值的值

Question

我的面板中有一个用于显示付款状态的 HTML 表单。在此表单中，如果我选择付款状态预付款，则显示我可以输入预付款价格的另一个输入框。还有另一个可用的输入框，即剩余价格，如果我输入预付款的值，则剩余价格应该使用 java 脚本显示剩余值。如果我选择付款状态为空，则在剩余价格输入框中显示总价，如果我选择已付费，则在剩余价格输入框中显示 0...一切都运行良好...但只有一件事不起作用，那就是如果我输入预付款的值，剩余价格不显示。这是我的 HTML 代码

    <div class="col-md-6">
        <div class="form-group">
            <label>Final Total</label>
            <input type="text" value="100" name="total" id="Ftotal" class="form-control" >
        </div>
    </div>

    <div class="col-md-6">
        <div class="form-group">
            <label for="paymentstatus">Payment Status</label>
            <select class="form-control" name="paymentstatus" style="height: 40px;" onchange="yesnoCheck(this);">
                <option value=""> ---Select Payment Status---</option>
                <option>Advance</option>
                <option>Null</option>
                <option>Paid</option>
            </select>
        </div>
    </div>

    <div class="col-md-6" id="ifYes" style="display: none;">
        <div class="form-group">
            <label for="advancepaid">Advanced Paid</label>
            <input type="text" name="advancedPiad" id="advancedPiad" onKeyUp="remaining()"  class="form-control">
        </div>
    </div> 

    <div class="col-md-6">
        <div class="form-group">
            <label for="remainingammount">Remaining Ammount</label>
            <input type="text" name="remaining" id="remaining" class="form-control remaining" >
        </div>
    </div>

这是我的 JavaScript

function yesnoCheck(that) {
        if (that.value == "Advance") {

            document.getElementById("ifYes").style.display = "block";
        } else {
            document.getElementById("ifYes").style.display = "none";
        }
        if (that.value == "Null") {
           a = Number(document.getElementById('Ftotal').value);
          document.getElementById('remaining').value = a;
        }
         if (that.value == "Paid") {
           a = 0;
          document.getElementById('remaining').value = a;
        }

    }

function remaining()
{
    a = Number(document.getElementById('Ftotal').value);
    b = Number(document.getElementById('advancedPiad').value);
    c = a - b;

    document.getElementsByClassName("remaining").value = c;
}

Answer 1

尝试

document.getElementsByClassName("剩余")[0].value = c;

document.getElementsByClassName 为您提供具有指定类名的元素数组。在您的情况下，只需设置第一个元素的值。