[英]document.getElementById is returning null on the button click
I have a textarea and a button. 我有一个textarea和一个按钮。 The button submits the data to a page through AJAX through a function.
按钮通过功能通过AJAX将数据提交到页面。 When the button is clicked it calls a function that takes in 3 parameters for this question only one of them is necessary.
单击该按钮时,它会调用一个函数,该函数需要为该问题输入3个参数,而其中只有一个是必需的。
Let's look at the code to understand more clearly: 让我们看一下代码以更清楚地理解:
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 />');
}
The important part is: 重要的部分是:
...
'<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>' +
...
The most important is: 最重要的是:
...
'<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> ' +
...
In the onclick of that button the function document.getElementById("edited_content")
returns a null value. 在该按钮的onclick中,函数
document.getElementById("edited_content")
返回空值。 I've tried logging it to the console it prints null. 我尝试将其记录到控制台上,该控制台显示null。 Why is that happening?
为什么会这样呢?
Any help would be appreciated! 任何帮助,将不胜感激!
Because at the point you call document.getElementById("edited_content")
, edited_content
does not exist. 因为此时您调用
document.getElementById("edited_content")
, edited_content
不存在。
You are creating it by appending a string, so you'd need to do something like: 您通过添加字符串来创建它,因此您需要执行以下操作:
// 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>');
PS You tagged the question with jQuery - there are much better ways of doing what you are trying to achieve . PS:您用jQuery标记了问题- 有许多更好的方法可以完成您要实现的目标 。 Better still, use a templating engine .
更好的是,使用模板引擎 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.