0

画面にテキスト入力フィールドであるこのフィールドがありますが、JS から値にアクセスしようとすると null が返されます

以下に、Chrome に値が保存されていること (左のパネルを参照)、JavaScript が値を取得できなかったこと (下のパネル)、および下のパネルの上半分に html コードが表示されていることを確認できるスクリーン ショットを添付しました。

これが役立つかどうかもわかりませんが、フィールドは PHP を使用して動的に作成され、スクリプトは html ドキュメントの上部に登録されます。そして、私のHTMLページにはその名前のフィールドが1つしかありません

完全な HTML コード

<body>
<link href="Objects.css" rel="stylesheet" type="text/css">
<script src="eFarmClicks.js"></script>
<div class="ContentPanel"><label class="HeadingLabel">ADD GROUP</label>
    <table>
        <tbody>
            <tr>
                 <td><label>GROUP NAME</label></td>
                 <td><input type="text" name="edtGroupName"></td>
            </tr>
            <tr>
                <td><label>MAX ANIMALS</label></td>
                <td><input type="text" name="edtMaxAnimal"></td>
            </tr>
            <tr>
                <td><label>MAX MALE ANIMALS</label></td>
                <td><input type="text" name="edtMaxMAnimal"></td>
            </tr>
            <tr>
                <td><label>MAX FEMALE ANIMALS</label></td>
                <td><input type="text" name="edtMaxFAnimal"></td>
            </tr>
        </tbody>
    </table>
    <input type="submit" name="btnSubmitAddGroup" value="Add Group" onclick="btnSubmitAddGroup_click()" ;="" onmousemove="mousemove(this)" onmouseout="mouseout(this)" style="background-color: green;">
</div>
</body>

コードの貼り方が悪くてすみません。それはクロムから直接コピーされました。

スクリーンショット

** 編集 **

私のJavaScriptコード:

function btnSubmitAddGroup_click(){
var xmlhttp = new XMLHttpRequest();
var groupname = document.getElementsByName('edtGroupName').item(0).value;
var max1 = document.getElementsByName('edtMaxAnimal').item(0).value;
var max2 = document.getElementsByName('edtMaxMAnimal').item(0).value;
var max3 = document.getElementsByName('edtMaxFAnimal').item(0).value;
alert(max1); // to test the value
};

** マウス移動機能 **

function mousemove(obj){
    if(document.getElementsByName(obj.name).item(0).style.backgroundColor!="blue")
    {document.getElementsByName(obj.name).item(0).style.backgroundColor="Green";};
};

function mouseout(obj){
    if(document.getElementsByName(obj.name).item(0).style.backgroundColor!="blue"){
        document.getElementsByName(obj.name).item(0).style.backgroundColor="transparent";
    };
};

****今日の4つを編集**

（私のコメントにもあります）

皆さん、これは私のコードにどのように影響しますか? 編集が iframe にあることに言及することが関連している可能性があることに気付きました。このコマンド document.getElementsByTagName('input') をチェックしたときに、これが関連している可能性があることに気付きました

4

1 に答える 1

0

問題が見つかりました。回答にたどり着くのを手伝ってくれたこのリンクとこのリンクに感謝します。

さて、これが実際の問題でした：

  • iframe は動的に作成されます
  • 入力はiframeにありました（最初は元の質問で言う必要はありませんでした）
  • しかし、さらに調査とレビューを行った結果、これが問題の原因であることがわかりました

入力が別のドキュメントであるiframeにあったためだと思います（そして、私はまだ修正中です）。したがって、値を取得する実際のコードは

document.getElementById('content').contentDocument.getElementsByName('edtGroupName').item(0).value

リンクに記載されている方法を使用して解決することもできます。

jsのすべての初心者にとって、これはコードが行うことです：

//this gets the i frame of the current page
document.getElementById('content')
// this is the document (or if you will, the page loaded in the iframe)
document.getElementById('content').contentDocument
//this gets my edit on my page of the frame
document.getElementById('content').contentDocument.getElementsByName('edtGroupName')
// and this simply gets the input value
document.getElementById('content').contentDocument.getElementsByName('edtGroupName').item(0).value
于 2013-09-09T13:28:24.037 に答える