如何从 html 模板中的 Django 对象传递 JavaScript 变量？

Question

Here, I'm trying to convert the text to speech from django object and sorry to say that I don't know basic Js. Here is what I've tried.

Code

HTML

<p class="mb-1">{{ obj.reply }}</p>
<button class="btn btn-dark" onclick="txttospeech(obj.reply)">listen</button>

js

function txttospeech(txt) {
    var utterance  = new SpeechSynthesisUtterance();
    utterance.text = txt;
    speechSynthesis.speak(utterance);
}

Answer 1

If you are trying to pass value of reply attribute to txttospeech function then you should do like this:

<button class="btn btn-dark" onclick="txttospeech({{ obj.reply }})">listen</button>

And if you want to cross verify whether value is actually getting passed. Then you can log in browser's console

function txttospeech(txt) {
    console.log("Value of reply attribute",txt);
    var utterance  = new SpeechSynthesisUtterance();
    utterance.text = txt;
    speechSynthesis.speak(utterance);
}

Answer 2

you can replace onclick event with addEventListener , the following will get text from previous element or <p> as parameter for the .speak()

 function txttospeech(txt) { var utterance = new SpeechSynthesisUtterance(); utterance.text = txt; speechSynthesis.speak(utterance); } document.querySelectorAll('button.btn-dark').forEach(function(item) { item.addEventListener('click', function() { var textInput = this.previousElementSibling.textContent; txttospeech(textInput) }) })

 <.-- <p class="mb-1">{{ obj.reply }}</p> --> <p class="mb-1">This is speech test</p> <button class="btn btn-dark">listen</button> <p class="mb-1">hello world</p> <button class="btn btn-dark">listen</button>