我需要编写一个 javascript 函数，它将循环输入框并将每个字段中的文本连接在一起，并在结果框中显示结果。我尝试了多种解决方案，但无法解决任何问题，我知道它需要一组文本字段，但我似乎无法解决。<!DOCTYPE html><html><body><form id="myform"> <label for="text1">text1</label><br> <input type="text" id="text1" name="text1"><br> <label for="text2">text2</label><br> <input type="text" id="text2" name="text2"><br> <label for="text3">text3</label><br> <input type="text" id="text3" name="text3"><br> <label for="text4">text4</label><br> <input type="text" id="text4" name="text4"><br> <label for="text5">text5</label><br> <input type="text" id="text5" name="text5"><br> <label for="text6">text6</label><br> <input type="text" id="text6" name="text6"><br> <input type="button" onClick="myFunction()" value="Click This"><br> <label for="result">result</label><br> <input type="text" id="result" name="result"></form><script> function myFunction() { var fields = []; }</script></body></html>
2 回答
动漫人物
TA贡献1815条经验 获得超10个赞
您可以使用过滤器和地图
注意：我为按钮指定了 ID“btn”
document.getElementById('btn').addEventListener('click', function() {
const conc = [...document.querySelectorAll('#myform [id^=text]')] // id starts with text
.filter(fld => fld.value.trim() !== "") // not empty
.map(fld => fld.value) // store value
document.getElementById('result').value = conc.join(","); // join with comma
})
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" id="btn" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
一次性完成：
document.getElementById('btn').addEventListener('click', function() {
const res = [];
[...document.querySelectorAll('#myform [id^=text]')]
.forEach(fld => { const val = fld.value.trim(); if (val !== "") res.push(val) })
document.getElementById('result').value = res.join(","); // join with comma
})
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" id="btn" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
吃鸡游戏
TA贡献1829条经验 获得超7个赞
function myFunction() {
const data = document.querySelectorAll("#myform input[type='text'][id^=text]");
//console.log(data);
var fields = [];
data.forEach(item => {
if (item.value != '') {
fields.push(item.value)
}
})
document.getElementById("result").value = fields.join(",")
}
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" onClick="myFunction()" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
添加回答
举报
0/150
提交
取消