Show/hide element according to the selected option

I want to hide the speech response element, if the user selects the Tamil language from the drop down, but if the user selects English, the speech response element should be hidden.

It doesn't work, I don't know why. Please, give me a suggestion on what's wrong with my code.

Here is my code:

function Speech(say) {
if ('speechSynthesis' in window && talking) {
$('#clitamilhide').hide();

var utterance = new SpeechSynthesisUtterance(say);
speechSynthesis.speak(utterance);
}

}

var msg = new SpeechSynthesisUtterance(ans);
window.speechSynthesis.speak(msg);

<select name="language_" id="langu" class="selectpicker form-control form-control-sm" style="width: 300px; margin-top: 125px;">
<option value="English">
English
</option>
<option value="Tamil">
Tamil
</option>
</select>

In line

var msg = new SpeechSynthesisUtterance(ans);


the backend response will be used and this response goes to the speech() function responding an output as voice.

speech()

The main problem is I want to hide the Tamil option tag value inside the function speech(say).

speech(say)

1 Answer
1

Based on your description (if I got it right), here's a sample you can customize according to your needs.

Change the select tag's option and you'll see, that the sample hides/shows the example element according to the currently selected option.

Quick rundown:

When the user runs your site/web app, we check the currently selected option, if it's English, we are okay, if it's not, we hide the "speech response" element (whatever element will be your final implementation)

An event listener will be also attached to the select tag to detect, when the user changes the current option. If it's English, again, we show the "speech response", if it's not, we're gonna hide it.

// hides the speech response
function showSpeechResponse() {
$('.response').show();
}

// showes the speech response
function hideSpeechResponse() {
$('.response').hide();
}

// checks what's the currently selected option
function checkSelectedOption() {
var element = $('.selectpicker');

switch ($(element).val()) {
case 'English':
showSpeechResponse();
break;

case 'Tamil':
hideSpeechResponse();
break;
}
}

// check the initially selected option
checkSelectedOption();

// when the user selects another option, check the selected option
$('.selectpicker').on('change', checkSelectedOption);

/* your own code here ...
function speech(say) {
if ('speechSynthesis' in window && talking) {
$('#clitamilhide').hide();

var utterance = new SpeechSynthesisUtterance(say);
speechSynthesis.speak(utterance);
}
}

var ans = 'The answer';
var msg = new SpeechSynthesisUtterance(ans);
window.speechSynthesis.speak(msg);
*/

.selectpicker {
/*margin-top: 125px;*/
width: 300px;
}

.response {
margin-top: 15px
}

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

<select name="language_" id="langu" class="selectpicker form-control form-control-sm">
<option value="English">English</option>
<option value="Tamil" >Tamil</option>
</select>



Speech Response

I hope you wanted something like this, at least a starting point to use, if I'm mistaken, please, tell me and we're gonna figure out a better solution.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.