Javascript document.getElementById在单击按钮时返回null
我有一个文本区和一个按钮。该按钮通过一个函数通过AJAX将数据提交到页面。单击该按钮时,它将调用一个函数,该函数接受此问题的3个参数,其中只需要一个参数 让我们看一下代码,以便更清楚地理解:Javascript document.getElementById在单击按钮时返回null,javascript,jquery,html,domdocument,Javascript,Jquery,Html,Domdocument,我有一个文本区和一个按钮。该按钮通过一个函数通过AJAX将数据提交到页面。单击该按钮时,它将调用一个函数,该函数接受此问题的3个参数,其中只需要一个参数 让我们看一下代码,以便更清楚地理解: var offers = <? php echo PostOffer::GetOffers($_GET["id"]); ?> ; for (var i = 0; i < offers.length; i++) { var date = offers[i].Date.split("
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> ' +
'<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> ' +
'<a href="" class="no_link" onclick="showDeleteOfferModal(' + offers[i].Offer_ID + ');">Delete</a> | ' +
'</div>');
}
document.write('</div>' +
'</div>' +
'</div>' +
'<hr />');
}
var提供=;
对于(变量i=0;i”+提供[i].Name+”'+
'' +
'' +
'' +
'' +
“”+提供[i].Text+”
'+
''+提供[i].文本+''+
“因为在调用document.getElementById(“编辑的内容”)
时,编辑的内容不存在
您是通过附加字符串来创建它的,因此需要执行以下操作:
// 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> ');
// 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>');
//添加第一部分
文件。写(“”)+
'' +
'' +
'' +
'' +
'' +
'' +
“”+提供[i].Name+”
'+
'' +
'' +
'' +
'' +
“”+提供[i].Text+”
'+
''+提供[i].文本+'';
//现在我们可以编辑内容了
write('发生这种情况是因为在解释字符串时(即插入DOM之前)\edited_content
不存在。另外,应该注意的是,使用document.write
将大量字符串转储到DOM中是一种糟糕的做法。您应该重构它以创建实际的DOM节点,或者使用模板插件。这是一个地狱般的代码,只要单击一下,我提供的代码就会正常工作。我提供的链接应该解释解决这个问题的更好方法。其余的你必须自己做
...
'<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> ' +
...
// 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> ');
// 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>');