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

JavaScript doesn't support multi-line strings like that, you'll need to escape the embedded newlines. I'm no Django guru but there should be something in the template system that should properly escape text for JavaScript. — mu is too short
– mu is too short, Commented Apr 18, 2012 at 2:50
Thanks. This may be the newb in me talking, but if I escape the HTML through Django, then there would be no way for me to display the output in separate lines then correct? New lines in the output are absolutely necessary here, so if that's the case I may have to remove the JS here. — Dan Hoerst
– Dan Hoerst, Commented Apr 18, 2012 at 3:01
There should be an "escape for JavaScript" function that would take care of the newlines (and embedded quotes and ...). — mu is too short
– mu is too short, Commented Apr 18, 2012 at 3:03

ilvar · Accepted Answer · 2012-04-18 03:27:23Z

2

Use escapejs template filter

answered Apr 18, 2012 at 3:27

ilvar

5,8611 gold badge23 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML not working inside of Javascript function - Django

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related