Question

我是网络开发的新手。

当用户从下拉框中选择任何选项时，我正在尝试创建多个输入框（以便它是动态的）

然而，当我点击时，我只收到弹出消息用于测试目的，但我没有看到任何输入框。此外，当我检查我的源页面时，我的HTML页面出错了我放<div>（这是我的输入框应显示的位置）。我得到的错误信息是在“表”错误中看到的开始标记“div”...我假设程序由于此错误而无法显示输入框。我试图在谷歌寻找答案，但我仍然无法解决这个问题......

请告诉我如何解决此错误....

任何帮助将不胜感激......提前致谢！

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <title>Run test Script</title>
        <script type="text/javascript">

        function createInputs() {
        alert('writing inputs'); //Test....this message shows...when i change
        var value = document.getElementById("test").value; // this gives you the selected value.
        var split = value.split;
        var splitsize = split.length;
        var code = '';
        for (var j=0; j<splitsize; j++){
            var a = "<input type = 'text' name = '" + split[j] + "' id = '" + split[j] + "'>";
            code += a;
        }
        document.getElementById("inputBox").innerHTML = code;
   }

        </script>
    <body>
        <form action="./runtest?host=11.111.11.11&envname=XP" method="post" name="testForm">  
        <table border="0">
        <tr style="font-weight: bold; font-size: 16px;">
            <td>Environment Name: </td>
            <td>XP</td>
        </tr> 
        <tr>
            <td>Select user name :</td>
            <td><select id="userName" name="userName">
                <option value="user">user</option>
                <option value="guest">guest</option>
                </select>
            </td>
         </tr>
         <tr>
            <td>Enter Password :</td>
            <td>                               

            <input id="pass" type="password" name="password">

         </tr>
         <tr>
            <td>Select test : </td>
            <td><select id="testname" name="testname" onchange="createInputs()">
                <option value="" name=""></option>
                <option value="size" name="startup">startup</option>

                <option value="size" name="Performance">Performance</option>

                <option value="" name="reboot">reboot</option>

                <option value="size,time" name="fetch event">fetch event</option>
                </select></td>
         </tr>
         <tr>
             <td></td>
             <div id = "inputBox"></div>   //*************Error message here ***********
        </tr>
         <tr>
                <td> Enter test User: </td>
                <td><input type="text" id="tuser"></td>
         </tr>
         <tr>
                <td> Enter Test Date: </td>
                <td><input type="text" id="tdate"></td>
         </tr>
          </table>
          <br>
          <input type="submit" value="Run" name="Run">&nbsp;&nbsp;
          <input type="button" value="Close" onclick="window.close()"> &nbsp;&nbsp;
          </form>
    </body>
</html>

Answer 1

解决此问题的最快方法是在执行此代码时打开Google Chrome并查看开发人员工具和控制台。

问题1：document.getElementById（“compname”）为null，需要更改为document.getElementById（“testname”）。

var value = document.getElementById("testname").value;

问题2：split是一种方法，需要传递一个分隔符。因此，它不是value.split，而是value.split（“，”）

var split = value.split(",");

请注意，由于您的值为空，因此重启选项可能无法正常运行。

编辑：正如其他人所说，您还应该在http://validator.w3.org/#validate_by_input

验证您的HTML

Answer 2

所以问题是你不能将div元素直接嵌套在tr元素中。事实上，我非常确定您可以“正式”使用tr元素的直接子元素的唯一元素是<th>和<td>

尝试使用div元素包裹td元素，而不是......

<tr>
    <td></td>
    <td>
        <div id = "inputBox"></div>
    </td>
</tr>

如果您尝试动态创建此input元素，那么您的javascript可能会出现问题。您是否收到任何控制台输出错误？

此外，如果您想捕获用户输入，请使用标记...

<tr>
    <td></td>
    <td>
        <input id="inputBox" type="text" />
    </td>
</tr>

Answer 3

<tr>
   <td></td>
   <td>
   <div id = "inputBox"></div>   //*************Error message here ***********
   </td>
</tr>

您需要在<td></td>标记中添加div。

Answer 4

您的脚本执行

document.getElementById("compname")

..但我看不到ID为compname的元素。我看到一个testname。

在“表格”中看到的开始标记“div”错误＆amp; div不显示任何内容

4 个答案: