document.getElementById возвращает null на кнопку

У меня есть текстовое поле и кнопка. Кнопка передает данные на страницу через 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), '# edit_content' не существует. –

Кроме того, следует отметить, что использование 'document.write' для сбрасывания массивной строки в DOM - ужасный способ сделать что-то. Вы должны реорганизовать это для создания реальных узлов DOM или использовать плагин шаблонов. –

это адский код в том, что onclick atribute – 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>');

P.S. Вы отметили вопрос с помощью 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 на кнопку

ответ

Смежные вопросы