How to pass JavaScript variable from Django-object in html template?

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);
}

in {{ obj.reply }} there are some texts. And I want to convert it in audio. — ChillMan
– ChillMan, Commented Mar 3, 2021 at 13:45

Amandeep Singh · Accepted Answer · 2021-03-03 13:47:01Z

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);
}

edited Mar 3, 2021 at 13:47

answered Mar 3, 2021 at 13:41

Amandeep Singh

1,4311 gold badge16 silver badges39 bronze badges

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

2 Comments

ChillMan Over a year ago

Uncaught SyntaxError: missing Uncaught ReferenceError

ChillMan Over a year ago

actually function is not working and it shows Uncaught SyntaxError: missing ) after argument list

uingtea · Accepted Answer · 2021-03-03 15:39:08Z

0

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>

answered Mar 3, 2021 at 15:39

uingtea

6,6342 gold badges32 silver badges45 bronze badges

Collectives™ on Stack Overflow

How to pass JavaScript variable from Django-object in html template?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related