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點擊

回答

相關問題