document.getElementById가 버튼 클릭시 null을 반환합니다.

Question

텍스트 영역과 버튼이 있습니다. 버튼은 함수를 통해 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>' + 
... 

가장 중요한은 : 그의 OnClick에서

... 
'<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;' + 
... 

버튼 document.getElementById("edited_content")은 null 값을 반환합니다. 콘솔에 기록하여 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>'); 

P.S.을 jQuery - there are much better ways of doing what you are trying to achieve으로 질문에 태그를 답니다. 더 나은 방법은 templating engine입니다.