HTML not working inside of Javascript function - Django

Question

I have a Django template that contains a Javascript function, like so:

<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>

This script works perfectly when the variable values are not HTML. However, when they are HTML values, the function does not work at all. When clicking the button, nothing happens. In the console, I get:

undetermined string literal on the 4th line of the Javascript function, and I also get changeText is not defined on the 1st function declaration line.

My page source for the function looks like this for one of the values that is having an issue:

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 have

tags as shown, as well as list items, etc.

I have tried using both .textContent and .innerHTML, and the issue is the same.

Thank you

Answer 1

Use escapejs template filter