Question

我的屏幕上有这个字段，这是一个文本输入字段，但是当我尝试从JS访问它时，它返回null

下面我附上了一个屏幕截图，您可以看到Chrome存储了值（请参阅左侧面板）并且JavaScript无法获取值（底部面板）和底部面板的上半部分您可以看到HTML代码。

现在我也不确定这是否会有所帮助，但这些字段是使用PHP动态创建的，而脚本是在html文档的顶部注册的。在我的HTML页面上只有一个带有该名称的字段

完整的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>

对于粘贴代码的方式感到抱歉。它是直接从chrome中复制的。

screen shot

**编辑**

我的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中。当我检查这个命令时，我意识到这可能是相关的.getElementsByTagName（'input'）

Answer 1

好吧我发现了这个问题，我要感谢This link和This Link帮助我找到答案。

好的，这就是实际问题：

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

javascript没有返回文本输入的值

1 个答案: