Manipulating the output of variables in Django with JavaScript function

I use this piece of code to grab part of the description from video object:

        <div id="description">
            <p>{{video.description | slice:":20" }}</p>
            <button onclick="showDescription()">Show description</button>
        </div>

There I got showDescription() function, I want it to display the rest of the description by changing the inner HTML code:

function showDescription() {
    var text = document.getElementById('description')
    text.innerHTML = "<p style='overflow-wrap: break-word; width: 100%;'>{{video.description}}</p>"
};

But it returns

{{video.description}}

Instead of actual description, any thoughts?

Answer

You need to pass {{video.description}} as a function argument.

<div id="description">
    <p>{{video.description | slice:":20" }}</p>
    <button onclick="showDescription('{{video.description}}')">Show description</button>
</div>

function showDescription(description) {
    var text = document.getElementById('description')
    text.innerHTML = "<p style='overflow-wrap: break-word; width: 100%;'>" + description + "</p>"
};