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?
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>"
};