Как вставить php-массив с innerHTML в javascript
Я хотел бы иметь возможность вставлять html-код из javascript, который вставляет php-код, содержащий массив. Что я делаю, так это получаю в переменной $ Teams массив команд. И затем я просматриваю массив с помощью foreach, чтобы установить значения в параметрах выбора
Я сделал следующее, но это не работает.
document.getElementById('selectTeam').innerHTML = '<select class = "form-control"><?php $teams = ControllerTeam::ctrTeam(); foreach ($teams as $key => $value) { echo '<option value = "'.$value["id"].'">'.$value["name"].'</option>';}?></select>';
вместо кода PHP попробуйте жестко закодировать <option value = "123">Aha</option> и посмотреть, работает ли это
@cornel.raiu Консоль выдает следующую ошибку: login.js: 78 Uncaught TypeError: невозможно установить для свойства 'innerHTML' значение null. Я пробовал с более простым примером, и он работает. Я думаю, что проблема заключается в сочетании двойных и одинарных кавычек в части php внутри innerHTML.
Это работает? document.getElementById('selectTeam').innerHTML = '<select class = "form-control"><option value = "123">Aha</option></select>';
@cornel.raiu Да. Теперь работают простейшие примеры. На данный момент проблема заключается в части php внутри внутренней части, я думаю, что уверен, что это из-за двойных и одинарных кавычек
возможно ли, что когда вы делаете это с помощью PHP, элемент selectTeam не загружается ПЕРЕД частью JS? Вы делаете JS-часть onLoad или что-то в этом роде? Проверьте этот пример с точно такой же ошибкой, которую вы получаете: stackoverflow.com/questions/18239430/…
Возможный дубликат Невозможно установить для свойства "innerHTML" значение null
Ошибка связана не с содержимым, которое вы пытаетесь добавить, а с тем фактом, что JS не находит это: document.getElementById('selectTeam') поскольку JS загружается перед содержимым в вашем случае, следовательно, оно равно нулю. Итак, JS видит это так: (null).innerHTML='bla bla' что недопустимо
@cornel.raiu Да. Уже та ошибка не появляется. Что происходит сейчас, так это то, что при печати html, который я указываю в innerHTML, часть php появляется в виде комментария.
я добавлю ответ
@cornel.raiu спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В вашем коде опечатка. Пожалуйста, измените его на:
document.getElementById('selectTeam').innerHTML = '<select class = "form-control"><?php
$teams = ControllerTeam::ctrTeam();
foreach ($teams as $key => $value) {
echo '<option value = "' . $value["id"] . '">' . $value["name"] . '</option>';
}
?></select>';
Код, который вы мне дали, также содержит опечатку. Я поставил его в свой проект, и он дает ошибку
Я думаю, что проблема в двойных и одинарных кавычках
почему бы вам не подготовить строку параметров вне JS и добавить туда только переменную. Код станет намного читабельнее.
Первая проблема заключается в том, что, вероятно, контент загружается после JS, поэтому селектор возвращает null, следовательно, ошибка в коде OP. Невозможно установить для свойства "innerHTML" значение null
Это означает, что вы должны выполнять код JS только в window.load или любом другом подобном событии, которое обеспечивает загрузку HTML перед попыткой выполнения.
Теперь о другой проблеме в комментариях, если вы перепишете PHP-код следующим образом:
<?php
$teams = ControllerTeam::ctrTeam();
$options_html = '';
foreach ($teams as $key => $value) {
$options_html .= '<option value = "' . $value["id"] . '">' . $value["name"] . '</option>';
}?>
И в JS - убедитесь, что он загружается на window.load или аналогичный -
document.getElementById('selectTeam').innerHTML =
'<select class = "form-control"><?php echo $options_html ?></select>';
Это делает код более читаемым и облегчает отладку.
Идеально! Спасибо :)
Рад, что смог помочь!
что значит "не работает"? это не меняет содержание? содержимое, на которое оно изменяется, неверно?