One of my Django templates includes a Javascript function. Here's an example:
<a class ="edit" href="{% url notecards.views.edit_notecard notecard.id %}"> Edit </a>
<h3 class="notecard"><p id="boldStuff">{{ notecard.notecard_name }}</p></h3>
<input id ="myButton" type="button" onclick="changeText()" value="View Answer"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
function changeText(){
if (document.getElementById("boldStuff").textContent == "{{ notecard.notecard_name }}")
{
document.getElementById("boldStuff").textContent = "{{ notecard.notecard_html|safe }}";
$("#myButton").prop("value", "View Question");
}
else
{
document.getElementById("boldStuff").textContent = "{{ notecard.notecard_name }}";
$("#myButton").prop("value", "View Answer");
}
}
</script>
While this script functions correctly with regular variable values, it encounters issues when the values contain HTML. Clicking the button doesn't trigger any action. The console displays messages such as undetermined string literal and changeText is not defined.
Here's an excerpt from my page source that illustrates the problem with one of the values:
function changeText(){
if (document.getElementById("boldStuff").textContent == "Here is a question hey whats up?")
{
document.getElementById("boldStuff").textContent = "<p>Here is an answer hey whats up. </p>
<p>Here is an answer hey whats up. Here is an answer hey whats up. </p>
<p>Here is an answer hey whats up.</p>
<p>Here is an answer hey whats up.Here is an answer hey whats up.vHere is an answer hey whats up. v</p>";
$("#myButton").prop("value", "View Question");
}
else
{
document.getElementById("boldStuff").textContent = "Here is a question hey whats up?";
$("#myButton").prop("value", "View Answer");
}
}
The values can include paragraph tags, list items, and other HTML elements.
I have attempted using both .textContent and .innerHTML, but the issue persists.
Thank you