2 回答

TA貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超7個(gè)贊
Get document.getElementById("test1","test2"),只返回一個(gè)元素。您可以通過 id 從調(diào)用函數(shù)中進(jìn)行修改。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function myFunction(input, id) {
var elementValue = input.value;
document.getElementById(id).innerHTML = elementValue;
}
</script>
<input id="name" name="name" onkeyup="myFunction(this,'text2')" type="text" value="HuggBiscuit">
<input id="person" name="name" onkeyup="myFunction(this, 'text1')" type="text" value="my">
<br>
Hello <code id="text1">my</code> name is <code id="text2">HuggBiscuit</code>
</body>
</html>

TA貢獻(xiàn)1788條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以將兩個(gè)參數(shù)傳遞給myFunction()
使用此技術(shù),您可以定位單個(gè)文本字段。
使用document.querySelectorAll()您可以自動(dòng)執(zhí)行此過程,以便每個(gè)輸入元素以一個(gè)具有相同參數(shù)(“名稱”、“目標(biāo)”等)的文本字段為目標(biāo)
<body>
<script type="text/javascript">
function myFunction(input,field){
var elementValue = input.value;
document.getElementById(field).innerHTML = elementValue;
}
</script>
<input id="name" class="inputField" name="name" onkeyup = myFunction(this,'test1') type="text" value="HuggBiscuit">
<input id="person" class="inputField" name="name" onkeyup = myFunction(this,'test2') type="text" value="my">
<br>
Hello <code id="test2">my</code> name is <code id="test1">HuggBiscuit</code>
</body>
這是創(chuàng)建多個(gè)輸入/文本字段連接的自動(dòng)化方式的簡(jiǎn)單代碼
<body>
<input id="name" class="inputField" name="test1" type="text" value="HuggBiscuit">
<input id="person" class="inputField" name="test2" type="text" value="my">
<input id="pet" class="inputField" name="test3" type="text" value="parrot">
<br>
Hello <code id="test2">my</code> name is <code id="test1">HuggBiscuit</code> and i have a(n) <code id="test3">parrot</code>
</body>
<script type="text/javascript">
document.querySelectorAll(".inputField")
.forEach(x=>x.addEventListener("keyup",(e)=>{document.getElementById(e.target.name).innerText = e.target.value}))
</script>
添加回答
舉報(bào)