1

私はWeb開発の初心者です。

ユーザーがドロップダウンボックスからオプションを選択したときに複数の入力ボックスを作成しようとしています(動的になるように)

ただし、クリックすると、テスト目的でのみポップアップ メッセージが表示されますが、入力ボックスは表示されません。また、ソース ページを確認すると、HTML ページに入力した場所にエラーがあります<div>(ここに入力ボックスを表示する必要があります)。私が得ているエラーメッセージは、「テーブル」エラーで見られる開始タグ「div」です...このエラーにより、プログラムが入力ボックスを表示できないと想定しています。Googleで答えを探してみましたが、まだこの問題を解決できません...

このエラーを修正する方法を教えてください。...

どんな助けでも大歓迎です...事前に感謝します!

<!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>
4

4 に答える 4

2

この問題を解決する最も簡単な方法は、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 も検証する必要があります。

于 2012-11-27T15:05:35.143 に答える
1 
<tr>
   <td></td>
   <td>
   <div id = "inputBox"></div>   //*************Error message here ***********
   </td>
</tr>

タグにdivを追加する必要があります<td></td>。

于 2012-11-27T14:54:47.873 に答える
1

スクリプトが実行されます

document.getElementById("compname")

..しかし、idの要素が表示されませんcompname。が付いているものがありtestnameます。

于 2012-11-27T14:56:32.830 に答える
1

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>
于 2012-11-27T14:53:34.040 に答える