Question

这似乎总是一个问题我无法理解为什么，我正在尝试使用他的ID更改元素p文本，元素p id="para1"位于PostEditor.html内：< / p>

我要更改的元素ID是para1中的following html：

     <!DOCTYPE html>
     <html>
     <head>
           <title>Editor</title>
           <link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
           <script src="scripts/mainScript.js"> </script>
     </head>
     <body>
           <!-- Input fields -->
           <div class="center">
           <form id=caller  method="post">
                    <p id="para1" class="text"><Strong>Post your message</Strong></p>
                    <textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
           <input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
           </form>
           </div>
          <!-- end Input fields -->

      </body>
      </html>

通过单击index.html内的链接并显示您在上面看到的页面，然后应该更改其内容，即可发出以下函数：从index.html我发出链接的功能：

<a onclick="postEditing()"> Edit</a>

此行发出以下函数：

function postEditing()
{
    var result =  window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
    result.document.getElementById("para1").innerHTML = "11111111111";
    result.document.getElementById("para1").innerText = "11111111111";
    result.document.getElementById("para1").value = "11111111111";
}

如你所见，我尝试了三种方法。我永远不明白他们之间的区别是什么，但我尝试了所有三个，没有人工作！

Answer 1

这是因为您正在搜索显示index.html的窗口文档，而不是新打开窗口的文档。尝试以下：

    ...
    var editorWindow = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
    editorWindow.document.getElementById("para1").innerHTML = "11111111111";
    ...

修改现在我看到了问题：在您尝试访问参数element的属性的函数中，但是您没有为它传递值。因此，这将以错误结束，因为访问的对象是undefinded！

所以你有三个选择让它发挥作用：

测试参数（总是一个好主意）：var ID = null; if(element) ID = element.id;

传递值：<a onclick="postEditing(this)"> Edit</a>

删除第var ID = element.id;行

解决方案 :(测试）
我无法说出原因，但index.html找到para1并且可以成功设置新文本。但不知何故，新窗口将再次重新初始化旧值。

因此，您必须在onLoad运行的处理程序中进行更改：

的index.html：

<html> <head> <script> function postEditing() { var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350'); result.onload = function() { result.document.getElementById("para1").innerHTML = "11111111111"; } } </script> </head> <body> <a onclick="postEditing()"> Edit</a> </body> </html>

PostEditor.html：

<!DOCTYPE html> <html> <head> <title>Editor</title> <link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" /> <script src="scripts/mainScript.js"> </script> </head> <body>  <div class="center"> <form id=caller method="post"> <p id="para1" class="text"><Strong>Post your message</Strong></p> <textarea id="textEditor" rows="16" cols="34" name="content"></textarea> <input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post"> </form> </div>  </body> </html>

Answer 2

我很确定你需要查询调用window.open的返回结果，如下所示：

function postEditing(element)
{
    var ID = element.id;
    var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
    result.getElementById("para1").innerHTML = "11111111111";
    result.getElementById("para1").innerText = "11111111111";
    result.getElementById("para1").value = "11111111111";
}

[未经考验]

Answer 3

您的按钮类型是提交，即发布表单。对象在DOM中发生变化，只有在脚本运行后，DOM才会重新加载回原始状态。尝试将按钮类型更改为“按钮”，您应该看到P元素发生了适当的变化。

编辑：这是我用来确定上述内容的HTML。将按钮保持为“提交”会导致我看到文本更改然后换回。下面的HTML应保持文本到位。 HTH！

<!DOCTYPE html>
 <html>
 <head>
       <title>Editor</title>

       <script>
       function postEditing(element)
   {

       document.getElementById('para1').innerHTML = "asdafs";

    }
       </script>
 </head>
 <body>
       <!-- Input fields -->
       <div class="center">
       <form id=caller  method="post">
                <p id="para1" class="text"><Strong>Post your message</Strong></p>
                <textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
       <input type="button" onclick="postEditing('caller')" value="Post">
       </form>
       </div>
      <!-- end Input fields -->

  </body>
  </html>

更改元素文本无效

3 个答案: