Использование функции JavaScript onclick для изменения innerHTML поля формы
Я пытаюсь использовать функцию JavaScript onclick() для изменения фрагмента HTML в поле формы модели Django при нажатии на него?
Используя приведенный ниже код, я ожидаю, что при нажатии на {{ tasks.owner }}
html с id "task_owner" изменится на {{ task_update_form.owner }}
.
Мой шаблон Django выглядит следующим образом:
<script>
function OwnerUpdate() {
document.getElementById("task_owner").innerHTML = "{{ task_update_form.owner }}";
}
</script>
<p id = "task_owner", onclick = "OwnerUpdate()"> {{ tasks.owner }} </p>
Если я использую приведенный ниже код, заменяя {{ task_update_form.owner }}
на "Test"
, он работает отлично.
<script>
function OwnerUpdate() {
document.getElementById("task_owner").innerHTML = "Test";
}
</script>
<p id = "task_owner", onclick = "OwnerUpdate()"> {{ tasks.owner }} </p>
Я также протестировал его, используя неформенный контекст из моего views.py, и он работает.
{{ task_update_form.owner }}
нормально работает при вставке в шаблон Django.
Мой опыт работы с JavaScript ограничен, и я буду благодарен за любую помощь.
Код на стороне клиента для функции OwnerUpdate
приведен ниже:
<select name="owner" class="specific_task_header" required="" id="id_owner">
<option value="">---------</option>
<option value="1" selected="">Peter</option>
</select>
Код функции приведен ниже:
function OwnerUpdate() {
document.getElementById("task_owner").innerHTML = "<select name="owner" class="specific_task_header" required id="id_owner">
<option value="">---------</option>
<option value="1" selected>Peter</option>
</select>";
}
Приводит к ошибке Uncaught SyntaxError: Unexpected identifier
Ошибка возникала при заключении `` {{ task_update_form.owner }}`` в "" и может быть решена с помощью обратных знаков для создания литерала шаблона (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
Ниже приведена рабочая функция:
function OwnerUpdate() {
document.getElementById("task_owner").innerHTML = `{{ task_update_form.owner }}`;
}