document.getElementById在按钮上返回null点击

我有一个textarea和一个按钮。该按钮通过功能通过AJAX将数据提交给页面。点击按钮时，它会调用一个函数，该函数需要3个参数才能解决此问题，但只有其中一个参数是必需的。document.getElementById在按钮上返回null点击

让我们看看代码更清晰地了解：

var offers = <? php echo PostOffer::GetOffers($_GET["id"]); ?> ; 
for (var i = 0; i < offers.length; i++) { 
    var date = offers[i].Date.split(" "); 
    document.write('<div class="row-fluid offer">' + 
     '<div class="span2">' + 
     '<img class="profile_picture" src="' + offers[i].Picture_Path + '" />' + 
     '</div>' + 
     '<div class="span10">' + 
     '<div class="row-fluid">' + 
     '<div class="username">' + 
     '<p style="font-weight: bold;">' + offers[i].Name + '</p>' + 
     '</div>' + 
     '</div>' + 
     '<div class="row-fluid">' + 
     '<div class="content">' + 
     '<p class="content">' + offers[i].Text + '</p>' + 
     '<textarea class="hide span12" id="edited_content">' + offers[i].Text + '</textarea>' + 
     '<button type="button" class="hide btn btn-primary btn-small" id="save_edits" onclick=\'editPostOffer("<?php echo $_GET["id"]; ?>","' + offers[i].Offer_ID + '","' + document.getElementById("edited_content") + '");\'>Save Edits</button>&nbsp;' + 
     '<button type="button" class="hide btn btn-primary btn-small cancel_edits">Cancel Edits</button>' + 
     '</div>' + 
     '</div>' + 
     '<div class="row-fluid">' + 
     '<div class="date">' + 
     '<p class="pull-right"><strong><span class="muted">Offered on: </span></strong>' + date[0] + '</p>' + 
     '</div>'); 
    if (offers[i].Username == "<?php echo $_SESSION[" 
    username "]; ?>") { 
     document.write('<div class="controls pull-right">' + 
      '<a href="" class="no_link edit_offer">Edit</a>&nbsp;' + 
      '<a href="" class="no_link" onclick="showDeleteOfferModal(' + offers[i].Offer_ID + ');">Delete</a> |&nbsp;' + 
      '</div>'); 
    } 
    document.write('</div>' + 
     '</div>' + 
     '</div>' + 
     '<hr />'); 
}

最重要的部分是：

... 
'<div class="row-fluid">' + 
    '<div class="content">' + 
    '<p class="content">' + offers[i].Text + '</p>' + 
    '<textarea class="hide span12" id="edited_content">' + offers[i].Text + '</textarea>' + 
    '<button type="button" class="hide btn btn-primary btn-small" id="save_edits" onclick=\'editPostOffer("<?php echo $_GET["id"]; ?>","' + offers[i].Offer_ID + '","' + document.getElementById("edited_content") + '");\'>Save Edits</button>&nbsp;' + 
    '<button type="button" class="hide btn btn-primary btn-small cancel_edits">Cancel Edits</button>' + 
    '</div>' + 
    '</div>' + 
...

最重要的是：

... 
'<button type="button" class="hide btn btn-primary btn-small" id="save_edits" onclick=\'editPostOffer("<?php echo $_GET["id"]; ?>","' + offers[i].Offer_ID + '","' + document.getElementById("edited_content") + '");\'>Save Edits</button>&nbsp;' + 
...

在那的onclick按钮功能document.getElementById("edited_content")返回空值。我试着将它记录到它打印为空的控制台。为什么会发生？

任何帮助，将不胜感激！

来源

2013-10-11 Mohammad Areeb Siddiqui

发生这种情况是因为当解释字符串时（即在被插入到DOM之前）'＃edited_content'不存在。 –

此外，应该指出的是，使用'document.write'将大量字符串转储到DOM是一种可怕的做事方式。你应该重构这个来创建实际的DOM节点，或者使用模板插件。 –

这是一个代码在那个onclick属性 – webduvet

因为在您拨打电话document.getElementById("edited_content"),edited_content不存在。

你被追加一个字符串创建它，所以你需要做的是这样的：

// Add the first part 
document.write('<div class="row-fluid offer">' + 
     '<div class="span2">' + 
     '<img class="profile_picture" src="' + offers[i].Picture_Path + '" />' + 
     '</div>' + 
     '<div class="span10">' + 
     '<div class="row-fluid">' + 
     '<div class="username">' + 
     '<p style="font-weight: bold;">' + offers[i].Name + '</p>' + 
     '</div>' + 
     '</div>' + 
     '<div class="row-fluid">' + 
     '<div class="content">' + 
     '<p class="content">' + offers[i].Text + '</p>' + 
     '<textarea class="hide span12" id="edited_content">' + offers[i].Text + '</textarea>'); 
// Now we can get edited_content 
document.write('<button type="button" class="hide btn btn-primary btn-small" id="save_edits" onclick=\'editPostOffer("<?php echo $_GET["id"]; ?>","' + offers[i].Offer_ID + '","' + document.getElementById("edited_content") + '");\'>Save Edits</button>&nbsp;'); 
// Write the rest of the HTML 
document.write('<button type="button" class="hide btn btn-primary btn-small cancel_edits">Cancel Edits</button>' + 
     '</div>' + 
     '</div>' + 
     '<div class="row-fluid">' + 
     '<div class="date">' + 
     '<p class="pull-right"><strong><span class="muted">Offered on: </span></strong>' + date[0] + '</p>' + 
     '</div>');

附：你用jQuery标记了这个问题 - there are much better ways of doing what you are trying to achieve。更好的是，使用templating engine。

来源

2013-10-11 12:33:59 CodingIntrigue

所以我怎么能解决这个问题？ –

那么我提供的代码应该可以工作。我提供的链接应该解释更好的方法来解决这个问题。剩下的你必须自己做 – CodingIntrigue

document.getElementById在按钮上返回null点击

回答

相关问题