document.getElementById在單擊按鈕時返回null

Question

我有一個textarea和一個按鈕。 按鈕通過功能通過AJAX將數據提交到頁面。 單擊該按鈕時，它會調用一個函數，該函數需要為該問題輸入3個參數，而其中只有一個是必需的。

讓我們看一下代碼以更清楚地理解：

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")返回空值。 我嘗試將其記錄到控制台上，該控制台顯示null。 為什么會這樣呢？

任何幫助，將不勝感激！

Answer 1

因為此時您調用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>');

PS：您用jQuery標記了問題- 有許多更好的方法可以完成您要實現的目標 。 更好的是，使用模板引擎 。