JavaScript - 如何更改輸入和更改字段值

Question

我無法弄清楚如何使用oninput或onchange方法更改表單域值。例如，我需要讓一個輸入字段在另一個輸入字段被更改後立即更改其值。所以我想：

<input type="number" id="a" value="999.99" oninput="updateInput(value)"/> 
<input type="number" id="b" value=""/> 

<script> 
    $(document).ready(function updateInput(value) { 
     document.getElementById("b").value = document.getElementById("a").value; 
    }); 
</script> 

它什麼也沒做。我究竟做錯了什麼？

在另一種情況下，我需要根據另一個下拉列表（使用if子句）更改下拉列表的值。由於上面的簡單腳本已經不能工作，我甚至不知道如何處理第二個腳本......

Answer 1

您必須在$(document).ready()之外定義updateInput()函數，以便您可以從其餘代碼中調用該函數，否則它僅在該範圍內。其次，函數所採用的參數從來沒有使用過，所以我冒昧地將其刪除。

第三，只要在頁面加載後調用該函數，只需在$(document).ready()之內調用該函數即可。

這裏有一個工作示例：

function updateInput() { 
 
    document.getElementById("b").value = document.getElementById("a").value; 
 
} 
 

 
$(document).ready(updateInput());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="number" id="a" value="999.99" oninput="updateInput()" /> 
 
<input type="number" id="b" value="" />

Answer 2

這裏有幾個問題;第一個要理清的地方就是你聲明你的函數的地方。 JavaScript有一個概念範圍，你可以把它看作是聲明變量的容器。你的功能沒有做任何事情的原因是因爲updateInput的定義被鎖定在你的jquery $(document).ready範圍內。

一旦你將這個定義從jquery包裝中取出，它就可以用於全局窗口範圍 - 這是你在oninput中訪問的範圍。我應該指出，有一些更靈活/有用的方法可以將事件監聽器放在某個事物上，但是如果這是一個簡單的用例，那麼您將擁有什麼工作。

function updateInput(value) { 
 
    document.getElementById("b").value = document.getElementById("a").value; 
 
}

<input type="number" id="a" value="999.99" oninput="updateInput(value)"/> 
 
<input type="number" id="b" value=""/>

Answer 3

你的功能是不明確的標記，因爲它傳遞給ready和範圍的存在。最好不要將update函數傳遞給ready，而是在其內部創建並將該函數從代碼附加到input。不要每次都獲取DOM元素，而只需要一次並使用變量來保存它們。

此外，您還混合jQuery方法與純Javascript方法。我認爲使用其中之一會更好。

使用jQuery

$(document).ready(function() { 
 

 
    const aInput = $("#a"); 
 
    const bInput = $("#b"); 
 
    
 
    aInput.on('input', function() { 
 
     bInput.val(aInput.val()); 
 
    }); 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="number" id="a" value="999.99"/> 
 
<input type="number" id="b" value=""/>

使用純JavaScript

window.onload = function() { 
 

 
    const aInput = document.getElementById("a"); 
 
    const bInput = document.getElementById("b"); 
 
    
 
    aInput.addEventListener('input', function() { 
 
     bInput.value = aInput.value; 
 
    }); 
 

 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="number" id="a" value="999.99"/> 
 
<input type="number" id="b" value=""/>