У меня есть веб-страница, где у меня есть список названий стихов, и если пользователь нажимает на одно из этих названий, я хочу, чтобы текст стихотворения отображался на той же странице. Стихи и их заголовки передаются через flask в словаре, где ключ - это заголовок, а значение - это содержание стихотворения. Содержание стихотворения HTML. Мне удалось вывести на экран весь словарь с идеальным форматированием, поэтому я знаю, что все правильно передаю, но у меня возникают проблемы с работой моих слушателей события «щелчка». Вот код:
{% extends "index.html" %}
{% block postContent %}
<div id ="poemText">
<br/><br/><br/>
</div>
{% for title in allpoems.keys() %}
<li><a class='nameOfPoem' id='{{ title }}'> {{ title }}</a></li>
{% endfor %}
{% endblock %}
{% block rightHand %}
{% endblock %}
{% block footer %}
{% endblock %}
{% block scripts %}
<script>
{% for key, value in allpoems.items() %}
document.getElementById('{{ key }}').addEventListener("click", function(){
var h = document.getElementById('poemText')
h.innerHTML = '{{ value | safe }}';
});
console.log(document.getElementById('poemText').innerHTML)
{% endfor %}
</script>
{% endblock %}
Но я получаю SyntaxError: Invalid или Unexpected Token в следующих строках скрипта:
document.getElementById('like dancing with a cracked heel, she tries...').addEventListener("click", function(){
var h = document.getElementById('poemText')
h.innerHTML = 'like dancing with a cracked heel, she tries,<br/>
staccato, awkwardly, every other note, <br/>
to possess herself with grace,<br/>
and flashes uncertain smiles,<br/>
a hand around her waist,<br/>
that, soon, she lets guide her,<br/>
as she succumbs to drought,<br/>
enters a dark doorway—and exits,<br/>
a token of depseration<br/>
planted in her mouth<br/>';
});
И так далее для каждого отдельного элемента. Это привело меня к стене, так как я не очень знаком с HTML. Может кто-нибудь заметить, что я делаю неправильно, или придумать более простой способ добиться того же?