Динамическое appendChild внутри успеха AJAX - PullRequest
0 голосов
/ 19 октября 2019

Я новичок в веб-разработке.

Я обработал текст из функции успеха ajax. Я хотел бы добавить холст под каждой текстовой строкой.

Внутри успеха AJAX, я попробовал ниже два, тексты были успешно обработаны, а текстовые идентификаторы успешно назначены динамически, но они оба потерпели неудачу с Cannot read property 'appendChild' of null, я думаю, что есть проблема с document.getElementById('result'+idx).appendChild(canv);, как будто я использую document.body.appendChild(canv);Я получаю холсты, но не в нужном месте.

Понятия не имею, почему getElementById получает значение NULL, я тоже пытался 'result'+idx.toString(), но он тоже не работает.

$.each(cat_result, function(idx, value) { 
text.append('<id="result'+idx+'">'+'<br>');
canvas_and_plot(idx,cat_result[idx][8],cat_result[idx][9],cat_result[idx][10])
});
$('#result').replaceWith(text);
$.each(cat_result, function(idx, value) { 
text.append('<id="result'+idx+'">'+'<br>');
});
$('#result').replaceWith(text);
$.each(cat_result, function(idx, value) { 
canvas_and_plot(idx,cat_result[idx][8],cat_result[idx][9],cat_result[idx][10])
});

HTML

<p class="result-box" id="result-box">The result is : <br><strong id="result"></strong></p>

Функция JS

function canvas_and_plot(idx,a,b,c) {
var canv = document.createElement("canvas");
canv.width = 200;
canv.height = 200;
canv.setAttribute('id', 'canv_'+idx);
canv.style.position = 'relative';
canv.style.float = 'left';
document.getElementById('result'+idx).appendChild(canv); // Cannot read property 'appendChild' of null
//other code that does the plotting
}

Ответы [ 2 ]

0 голосов
/ 19 октября 2019

Понятия не имею, почему форматирование вокруг getElementById не работает после нескольких разных попыток. Я работал с использованием обычного холст HTML для создания холста в text.append, и это работает.

0 голосов
/ 19 октября 2019

Попробуйте это:

document.getElementById('"result'+idx+'"').appendChild(canv); 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...