文章/答案/技术大牛

发布

社区首页 >问答首页 >如何访问表单中的输入(文本)元素，将它们放入一个数组中，并使用循环访问它们的值？

问如何访问表单中的输入(文本)元素，将它们放入一个数组中，并使用循环访问它们的值？
EN

Stack Overflow用户

提问于 2019-11-13 00:33:56

回答 2查看 118关注 0票数 0

注意:我是JavaScript的新手。该程序的目的是使用用户选择的不同算法对输入的数值进行排序。它必须这样做，因为这是我们的讲师给我们的课程作业。

我想要获取表中、表单元素中的输入值，但由于某些原因，我无法访问输入值。

我尝试过在我的javascript文件中使用document.getElementById访问Id、类、标签等元素，比如；

for (let i = 1; i <=  20; i++){
        myArray[i] = document.getElementById(`input${i}`).value
    }

和

myArray.forEach(function(element){
        document.write(element);
    })

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="mainStyling.css">
        <script src="mainFunctionality.js" type="text/javascript"></script>
    </head>
    <header>
        <h1>CIS1103 Assignment 1 - Sorting Algorithms</h1>
    </header>
    <body>
        <section class="inputs" id="inputSection">
            <form onsubmit="determineWhichButton()">
                <table>
                    <tr>
                        <td>Number 1: </td>
                        <td><input type="text" class="inputs" id="input1"</td>
                        <td>Number 11: </td>
                        <td><input type="text" class="inputs" id="input11"</td>
                    </tr>
                    <tr>
                        <td>Number 2: </td>
                        <td><input type="text" class="inputs" id="input2"</td>
                        <td>Number 12: </td>
                        <td><input type="text" class="inputs" id="input12"></td>
                    </tr>
                    <tr>
                        <td>Number 3: </td>
                        <td><input type="text" class="inputs" id="input3"></td>
                        <td>Number 13: </td>
                        <td><input type="text" class="inputs" id="input13"></td>
                    </tr>
                    <tr>
                        <td>Number 4: </td>
                        <td><input type="text" class="inputs" id="input4"></td>
                        <td>Number 14: </td>
                        <td><input type="text" class="inputs" id="input14"></td>
                    </tr>
                    <tr>
                        <td>Number 5: </td>
                        <td><input type="text" class="inputs" id="input5"></td>
                        <td>Number 15: </td>
                        <td><input type="text" class="inputs" id="input15"></td>
                    </tr>
                    <tr>
                        <td>Number 6: </td>
                        <td><input type="text" class="inputs" id="input6"></td>
                        <td>Number 16: </td>
                        <td><input type="text" class="inputs" id="input16"></td>
                    </tr>
                    <tr>
                        <td>Number 7: </td>
                        <td><input type="text" class="inputs" id="input7"></td>
                        <td>Number 17: </td>
                        <td><input type="text" class="inputs" id="input17"></td>
                    </tr>
                    <tr>
                        <td>Number 8: </td>
                        <td><input type="text" class="inputs" id="input8"></td>
                        <td>Number 18: </td>
                        <td><input type="text" class="inputs" id="input18"></td>
                    </tr>
                    <tr>
                        <td>Number 9: </td>
                        <td><input type="text" class="inputs" id="input9"></td>
                        <td>Number 19: </td>
                        <td><input type="text" class="inputs" id="input19"></td>
                    </tr>
                    <tr>
                        <td>Number 10: </td>
                        <td><input type="text" class="inputs" id="input10"></td>
                        <td>Number 20: </td>
                        <td><input type="text" class="inputs" id="input20"></td>
                    </tr>
                </table>
                <hr>
                <div class="inputs" id="buttonSection">
                    <input type="submit" name="submit" value="Bubble" onclick="determineWhichButton('bubble')">
                    <input type="submit" name="submit" value="Quick" onclick="determineWhichButton('quick')">
                    <input type="submit" name="submit" value="Insertion" onclick="determineWhichButton('insertion')">
                    <input type="submit" name="submit" value="Shell" onclick="determineWhichButton('shell')">
                </div>
            </form>
        </section>
        <hr>
        <section class="inputs" id="displaySection">
            <p class="inputs" id="algoDisplay">
                Algorithm steps go here;
            </p>
        </section>
        <hr>
    </body>
</html>

javascript

html

Stack Overflow用户

发布于 2019-11-13 00:40:45

您只是没有正确地编写您的HTML

输入'>‘的

缺少闭合

<td><input type="text" class="inputs" id="input1"</td>

将其更改为

<td><input type="text" class="inputs" id="input1" ></td>

诸若此类

你现在需要完成你的家庭作业，这是一个简单的开始：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="mainStyling.css">
        <script src="mainFunctionality.js" type="text/javascript"></script>
    </head>
    <header>
        <h1>CIS1103 Assignment 1 - Sorting Algorithms</h1>
    </header>
    <body>
        <section class="inputs" id="inputSection">
            <form onsubmit="determineWhichButton()">
                <table>
                    <tr>
                        <td>Number 1: </td>
                        <td><input type="text" class="inputs" id="input1"></td>
                        <td>Number 11: </td>
                        <td><input type="text" class="inputs" id="input11"></td>
                    </tr>
                    <tr>
                        <td>Number 2: </td>
                        <td><input type="text" class="inputs" id="input2"></td>
                        <td>Number 12: </td>
                        <td><input type="text" class="inputs" id="input12"></td>
                    </tr>
                    <tr>
                        <td>Number 3: </td>
                        <td><input type="text" class="inputs" id="input3"></td>
                        <td>Number 13: </td>
                        <td><input type="text" class="inputs" id="input13"></td>
                    </tr>
                    <tr>
                        <td>Number 4: </td>
                        <td><input type="text" class="inputs" id="input4"></td>
                        <td>Number 14: </td>
                        <td><input type="text" class="inputs" id="input14"></td>
                    </tr>
                    <tr>
                        <td>Number 5: </td>
                        <td><input type="text" class="inputs" id="input5"></td>
                        <td>Number 15: </td>
                        <td><input type="text" class="inputs" id="input15"></td>
                    </tr>
                    <tr>
                        <td>Number 6: </td>
                        <td><input type="text" class="inputs" id="input6"></td>
                        <td>Number 16: </td>
                        <td><input type="text" class="inputs" id="input16"></td>
                    </tr>
                    <tr>
                        <td>Number 7: </td>
                        <td><input type="text" class="inputs" id="input7"></td>
                        <td>Number 17: </td>
                        <td><input type="text" class="inputs" id="input17"></td>
                    </tr>
                    <tr>
                        <td>Number 8: </td>
                        <td><input type="text" class="inputs" id="input8"></td>
                        <td>Number 18: </td>
                        <td><input type="text" class="inputs" id="input18"></td>
                    </tr>
                    <tr>
                        <td>Number 9: </td>
                        <td><input type="text" class="inputs" id="input9"></td>
                        <td>Number 19: </td>
                        <td><input type="text" class="inputs" id="input19"></td>
                    </tr>
                    <tr>
                        <td>Number 10: </td>
                        <td><input type="text" class="inputs" id="input10"></td>
                        <td>Number 20: </td>
                        <td><input type="text" class="inputs" id="input20"></td>
                    </tr>
                </table>
                <hr>
                <div class="inputs" id="buttonSection">
                    <input type="submit" name="submit" value="Bubble" onclick="determineWhichButton('bubble')">
                    <input type="submit" name="submit" value="Quick" onclick="determineWhichButton('quick')">
                    <input type="submit" name="submit" value="Insertion" onclick="determineWhichButton('insertion')">
                    <input type="submit" name="submit" value="Shell" onclick="determineWhichButton('shell')">
                </div>
            </form>
        </section>
        <hr>
        <section class="inputs" id="displaySection">
            <p class="inputs" id="algoDisplay">
                Algorithm steps go here;
            </p>
        </section>
        <hr>
    </body>
    <script type="text/javascript" >
    function determineWhichButton(algorithm){
      if(algorithm === 'bubble'){
        console.log('inside bubble')
          var myArray = [];
for (let i = 1; i <=  20; i++){
        myArray[i] = document.getElementById(`input${i}`).value
        console.log('input : '+ document.getElementById(`input${i}`).value)
    }
      }
    }

    </script>
</html>

票数 0

查看全部 2 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58822927

复制

相似问题

问如何访问表单中的输入(文本)元素，将它们放入一个数组中，并使用循环访问它们的值？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何访问表单中的输入(文本)元素，将它们放入一个数组中，并使用循环访问它们的值？EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何访问表单中的输入(文本)元素，将它们放入一个数组中，并使用循环访问它们的值？
EN