如何使用 javascript 循环遍历文本字段并连接结果
我需要编写一个 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回答
-
动漫人物
您可以使用过滤器和地图注意：我为按钮指定了 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> -
吃鸡游戏
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>
随时随地看视频慕课网APP
相关分类
JavaScript