1

这似乎总是一个问题，我不明白为什么，我试图p通过使用他的 ID 来更改元素文本，元素p id="para1"在里面PostEditor.html：

我要更改的 elementIDpara1位于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";
}

如您所见，我尝试了三种方法。我永远不会明白它们之间有什么区别，但是我尝试了所有三种方法，但都没有奏效！

4

3 回答 3

3

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

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

编辑： 现在我看到了问题：在函数中你试图访问参数的属性element，但你没有为它传递一个值。所以这将以错误结束，因为访问的对象是undefinded！

因此，您可以通过三个选项来使其正常工作：

  1. 测试参数（总是一个好主意）：var ID = null; if(element) ID = element.id;
  2. 传递一个值：<a onclick="postEditing(this)"> Edit</a>
  3. 删除线var ID = element.id;

解决方案：（已测试）
我无法真正说出原因，但index.html发现para1并可以成功设置新文本。但不知何故，新窗口会再次重新初始化旧值。

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

索引.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>
       <!-- 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>
于 2013-07-03T14:30:16.110 回答
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";
}

[虽然未经测试]

于 2013-07-03T14:34:21.403 回答
0

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

编辑：这是我用来确定上述内容的 HTML。将按钮保持为“提交”使我看到文本更改然后换回。下面的 HTML 应该将文本保留在适当的位置。！

<!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>
于 2013-07-03T14:37:37.403 回答