Использование функции 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 }}`;
}
Вернуться на верх