I need use two button in the same page to control two diferent textarea with speech api
When I click on the button to enable the microphone that you type in a textarea, and when click the other button to enable the microphone type in another text area all within the same form by calling the speech API i was watching to use the getElementsByTagName or the getElementsByClassName but i don't has so far proven nothing good
showInfo('info_start');
var final_transcript = '';
var recognizing = false;
var ignore_onend;
var start_timestamp;
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
start_button.style.display = 'inline-block';
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = false;
recognition.lang = "es-BO";
recognition.onstart = function() {
recognizing = true;
showInfo('info_speak_now');
start_img.src = 'mic-animate.gif';
};
recognition.onerror = function(event) {
if (event.error == 'no-speech') {
start_img.src = 'mic.gif';
showInfo('info_no_speech');
ignore_onend = true;
}
if (event.error == 'audio-capture') {
start_img.src = 'mic.gif';
showInfo('info_no_microphone');
ignore_onend = true;
}
if (event.error == 'not-allowed') {
if (event.timeStamp - start_timestamp < 100) {
showInfo('info_blocked');
} else {
showInfo('info_denied');
}
ignore_onend = true;
}
};
recognition.onend = function() {
recognizing = false;
if (ignore_onend) {
return;
}
start_img.src = 'mic.gif';
if (!final_transcript) {
showInfo('info_start');
return;
}
showInfo('');
if (window.getSelection) {
window.getSelection().removeAllRanges();
var range = document.createRange();
range.selectNode(document.getElementById('final_span'));
window.getSelection().addRange(range);
}
};
recognition.onresult = function(event) {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = final_transcript;
final_span.innerHTML = linebreak(final_transcript);
interim_span.innerHTML = linebreak(interim_transcript);
if (final_transcript || interim_transcript) {
showButtons('inline-block');
}
};
}
function upgrade() {
start_button.style.visibility = 'hidden';
showInfo('info_upgrade');
}
var two_line = /\n\n/g;
var one_line = /\n/g;
function linebreak(s) {
return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
}
var first_char = /\S/;
function startButton2(event) {
if (recognizing) {
recognition.stop();
return;
}
final_transcript = '';
recognition.lang ="es-BO";
recognition.start();
ignore_onend = false;
final_span.innerHTML = '';
interim_span.innerHTML = '';
start_img.src = 'mic-slash.gif';
showInfo('info_allow');
showButtons('none');
start_timestamp = event.timeStamp;
}
function showInfo(s) {
if (s) {
for (var child = info.firstChild; child; child = child.nextSibling) {
if (child.style) {
child.style.display = child.id == s ? 'inline' : 'none';
}
}
info.style.visibility = 'visible';
} else {
info.style.visibility = 'hidden';
}
}
var current_style;
function showButtons(style) {
if (style == current_style) {
return;
}
current_style = style;
}
<div >
<p>
<button id="start_button" onclick="startButton(event)">
<img id="start_img" src="mic.gif" alt="Start"></button>
<textarea id="final_span" class="final"></textarea>
<span id="interim_span" class="interim"></span>
</p>
</div>
<a>---------------------------------------------------</a>
<div >
<p>
<button id="start_button" onclick="startButton(event)">
<img id="start_img" src="mic.gif" alt="Start"></button>
<textarea id="final_span" class="final"></textarea>
<span id="interim_span" class="interim"></span>
</p>
</div>
You need to change the onclick of the second button to startButton2(event) to call your second function.
<div >
<p>
<button id="start_button" onclick="startButton(event)">
<img id="start_img" src="mic.gif" alt="Start"></button>
<textarea id="final_span" class="final"></textarea>
<span id="interim_span" class="interim"></span>
</p>
</div>
<a>---------------------------------------------------</a>
<div >
<p>
<button id="start_button" onclick="startButton2(event)">
<img id="start_img" src="mic.gif" alt="Start"></button>
<textarea id="final_span" class="final"></textarea>
<span id="interim_span" class="interim"></span>
</p>
</div>
Related
I have an similar problem like this post: Validation with datalist
However the answer of FelDev is in JavaScript I need it in jquery .
I am new to jquery therefore it would be of great help if some can help.
In the following the answer of FelDev:
let btn = document.getElementById("btnSend");
let form = document.getElementById("zeForm");
let input = document.getElementById("zeInput");
let msg = document.getElementById("msg");
let allowedValues = ["atown", "btown", "ctown"]; // same values as the options in your datalist
btn.onclick = function() {
let allGood = false;
allowedValues.forEach(function(elm) {
if(elm === input.value) {
allGood = true;
return;
}
})
if(allGood) {
msg.innerHTML = "Success!!";
msg.style.color = "green";
//form.submit();
} else {
msg.innerHTML = "This value is not accepted";
msg.style.color = "red";
}
msg.style.display = "inline";
}
#msg {
display: none;
}
#btnSend {
display: block;
margin-top:1rem;
}
<form id="zeForm">
<input id="zeInput" type="text" list="typ" name="name" placeholder="gtown" >
<datalist id="typ">
<!-- notice the absence of a <select> here... -->
<option value="atown">atown</option>
<option value="btown">btown</option>
<option value="ctown">ctown</option>
</datalist>
</input>
<p id="msg"></p>
<button id="btnSend" type="button">send</button>
</form>
So do you need a translation?
So the jquery of this js is :
let btn = $("#btnSend");
let form = $("#zeForm");
let input = $("#zeInput");
let msg = $("#msg");
let allowedValues = ["atown", "btown", "ctown"]; // same values as the options in your datalist
btn.on('click' , function() {
let allGood = false;
allowedValues.each(function(index, element) {
if (element === input.value) {
allGood = true;
return;
}
})
if (allGood) {
msg.text("Success!!");
msg.attr('style',"color:green");
//form.submit();
} else {
msg.text("This value is not accepted";
msg.attr('style',"color:red");
}
msg.attr('style',"display:inline");
});
So i have the following 2 checkboxes on my page on small script attached to it which is designed to hide the billing section.
<script>
function myFunction2() {
var x = document.getElementById("billing_info");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
I'm using the below script to try and uncheck the checkboxes
<script>
$(document).ready( function a()
{
if ( $('#sameAsBilling').is(':checked'))
{
$('#check2').attr('checked', false);
}
});
</script>
<div class="header">
<h3 class="checkout-headers">STEP 3 - Billing Information </h3>
<!--START: sameAsBilling1-->
<!--value="ON"-->
<div class="sameAsBilling1">
<input type="checkbox" name="sameAsBilling" id="sameAsBilling" onclick="showHideShipping();check_address('');"/>
<label for="sameAsBilling">Same as Delivery Address</label>
<div class="clear"></div>
</div>
<div class="differentBilling">
<input type="checkbox" class="example" id="check2" onclick="myFunction2()"; return false;>Different Billing Address?</div>
<!--END: sameAsBilling1-->
<div class="clear"></div>
</div>
My problem is someone as buried the following code in a javascript file which is what transfers the delivery details onto the billing details if the specific checkbox is ticked.
function showHideShipping() {
if (document.billing.sameAsBilling.checked) {
add_overlay("billing_info", 0);
if (get_Element('billing_firstname').value != get_Element('shipping_firstname').value) {
get_Element('billing_firstname').value = get_Element('shipping_firstname').value;
get_Element('billing_lastname').value = get_Element('shipping_lastname').value;
get_Element('billing_company').value = get_Element('shipping_company').value;
get_Element('billing_phone').value = get_Element('shipping_phone').value;
get_Element('billing_address').value = get_Element('shipping_address').value;
get_Element('billing_address2').value = get_Element('shipping_address2').value;
get_Element('billing_city').value = get_Element('shipping_city').value;
get_Element('billing_zip').value = get_Element('shipping_zip').value;
get_Element('billing_country').value = get_Element('shipping_country').value;
populateState('billing_state', 'billing_country');
get_Element('billing_state').value = get_Element('shipping_state').value;
}
} else {
remove_overlay("billing_info");
get_Element('billing_firstname').value = '';
get_Element('billing_lastname').value = '';
get_Element('billing_company').value = '';
get_Element('billing_phone').value = '';
get_Element('billing_address').value = '';
get_Element('billing_address2').value = '';
get_Element('billing_city').value = '';
get_Element('billing_zip').value = '';
get_Element('billing_country').value = get_Element('shipping_country').value;
populateState('billing_state', 'billing_country');
get_Element('billing_state').value = get_Element('shipping_state').value;
}
}
You're missing an else. So the code that hides the billing info and copies the shipping info to it is executed all the time, regardless of the state of the checkbox.
if (document.billing.sameAsBilling.checked) {
add_overlay("billing_info", 0);
get_Element('billing_firstname').value = '';
get_Element('billing_lastname').value = '';
get_Element('billing_company').value = '';
get_Element('billing_phone').value = '';
get_Element('billing_address').value = '';
get_Element('billing_address2').value = '';
get_Element('billing_city').value = '';
get_Element('billing_zip').value = '';
get_Element('billing_country').value = get_Element('shipping_country').value;
populateState('billing_state', 'billing_country');
get_Element('billing_state').value = get_Element('shipping_state').value;
} else {
remove_overlay("billing_info");
if (get_Element('billing_firstname').value != get_Element('shipping_firstname').value) {
get_Element('billing_firstname').value = get_Element('shipping_firstname').value;
get_Element('billing_lastname').value = get_Element('shipping_lastname').value;
get_Element('billing_company').value = get_Element('shipping_company').value;
get_Element('billing_phone').value = get_Element('shipping_phone').value;
get_Element('billing_address').value = get_Element('shipping_address').value;
get_Element('billing_address2').value = get_Element('shipping_address2').value;
get_Element('billing_city').value = get_Element('shipping_city').value;
get_Element('billing_zip').value = get_Element('shipping_zip').value;
get_Element('billing_country').value = get_Element('shipping_country').value;
populateState('billing_state', 'billing_country');
get_Element('billing_state').value = get_Element('shipping_state').value;
}
}
Objective
A user will make a set of choices about what gifts they want to buy by clicking a series of buttons on panel.html, the data from those three choices pickOne, pickTwo and pickThree are saved in a query string and is passed to gifts.html
On document.ready or window.onload, the values from the query
string are concatenated and passed to an isotope.js filter, which sorts
the gifts on the page based on the query
Problem
When clicking the next button on the final and third panel, the value of the third pick is not being added to the query string and it is appearing empty pickThree=""
If I paste the url to go directly to that URL with the querystring,
the page doesn't appear to filter results on document.ready or
window.onload
scripts.js
// Pass choices to query string
var pickOne = null;
var pickTwo = null;
var pickThree = null;
$(".btn--next").on("click", function(){
// Progress bar circles
var circleOneSelected = $(".circle--one").hasClass("is-selected");
var circleTwoSelected = $(".circle--two").hasClass("is-selected");
var circleThreeSelected = $(".circle--three").hasClass("is-selected");
// Panel One options
var giftsforHimSelected = $(".btn--option-him").hasClass("is-selected");
var giftsforHerSelected = $(".btn--option-her").hasClass("is-selected");
var giftsforKidsSelected = $(".btn--option-kids").hasClass("is-selected");
var giftsforAnyoneSelected = $(".btn--option-anyone").hasClass("is-selected");
// Panel Two options
var typeHimJewelry = $(".btn--option-him-jewelry").hasClass("is-selected");
var typeHimScarves = $(".btn--option-him-scarves").hasClass("is-selected");
var typeHimFishing = $(".btn--option-him-fishing").hasClass("is-selected");
var typeHimCologne = $(".btn--option-him-cologne").hasClass("is-selected");
var typeHimShirts = $(".btn--option-him-shirts").hasClass("is-selected");
var typeHimSports = $(".btn--option-him-sports").hasClass("is-selected");
var typeHerCashmere = $(".btn--option-her-cashmere").hasClass("is-selected");
var typeHerPerfume = $(".btn--option-her-perfume").hasClass("is-selected");
var typeHerScarves = $(".btn--option-her-scarves").hasClass("is-selected");
var typeHerSweaters = $(".btn--option-her-sweaters").hasClass("is-selected");
var typeHerBeauty = $(".btn--option-her-beauty").hasClass("is-selected");
var typeHerCandles = $(".btn--option-her-candles").hasClass("is-selected");
var typeHerNecklaces = $(".btn--option-her-necklaces").hasClass("is-selected");
var typeHerJewelry = $(".btn--option-her-jewelry").hasClass("is-selected");
var typeHerWatches = $(".btn--option-her-watches").hasClass("is-selected");
var typeHerBags = $(".btn--option-her-bags").hasClass("is-selected");
var typeHerShoes = $(".btn--option-her-shoes").hasClass("is-selected");
var typeHerOther = $(".btn--option-her-other").hasClass("is-selected");
var typeAnyoneCookbooks = $(".btn--option-anyone-cookbooks").hasClass("is-selected");
var typeAnyoneSpirits = $(".btn--option-anyone-spirits").hasClass("is-selected");
var typeAnyoneSuitcases = $(".btn--option-anyone-suitcases").hasClass("is-selected");
var typeAnyoneFood = $(".btn--option-anyone-food").hasClass("is-selected");
var typeAnyoneGardening = $(".btn--option-anyone-gardening").hasClass("is-selected");
var typeAnyoneGadgets = $(".btn--option-anyone-gadgets").hasClass("is-selected");
var typeAnyoneStLouis = $(".btn--option-anyone-stlouis").hasClass("is-selected");
var typeAnyoneGiveBack = $(".btn--option-anyone-giveback").hasClass("is-selected");
var typeAnyoneFitness = $(".btn--option-anyone-fitness").hasClass("is-selected");
var typeAnyoneSubscriptions = $(".btn--option-anyone-subscriptions").hasClass("is-selected");
var typeAnyoneOrnaments = $(".btn--option-anyone-ornaments").hasClass("is-selected");
var typeAnyonePets = $(".btn--option-anyone-pets").hasClass("is-selected");
var typeAnyonePersonalized = $(".btn--option-anyone-other").hasClass("is-selected");
var typeAnyoneOther = $(".btn--option-anyone-other").hasClass("is-selected");
// Panel Three options
var under25 = $(".btn--option-25").hasClass("is-selected");
var under50 = $(".btn--option-50").hasClass("is-selected");
var under75 = $(".btn--option-75").hasClass("is-selected");
var under100 = $(".btn--option-100").hasClass("is-selected");
var under250 = $(".btn--option-u250").hasClass("is-selected");
var over250 = $(".btn--option-o250").hasClass("is-selected");
var btnLikeSelected = $(".btn--like").hasClass("is-selected");
var btnSpendSelected = $(".btn--spend").hasClass("is-selected");
// // Pass choices to query string
// var pickOne = "";
// var pickTwo = "";
// var pickThree = "";
var data = {
pickOne: pickOne,
pickTwo: pickTwo,
pickThree: pickThree
}
if (circleOneSelected) {
if (giftsforHimSelected) {
completeStepOne();
showPanelHim();
pickOne = ".GiftsForHim";
console.log(pickOne);
} else if (giftsforHerSelected) {
completeStepOne();
showPanelHer();
pickOne = ".GiftsForHer";
console.log(pickOne);
} else if (giftsforKidsSelected) {
completeStepsOneTwo();
showPanelThree();
pickOne = ".GiftsForKids";
console.log(pickOne);
} else if (giftsforAnyoneSelected) {
completeStepOne();
showPanelAnyone();
pickOne = ".GiftsForAnyone";
console.log(pickOne);
}
}
if (circleTwoSelected && btnLikeSelected) {
completeStepTwo();
showPanelThree();
// Gifts he might like
if (typeHimJewelry) {
pickTwo = ".Jewelry";
} else if (typeHimScarves) {
pickTwo = ".Scarves";
} else if (typeHimFishing) {
pickTwo = ".Fishing";
} else if (typeHimCologne) {
pickTwo = ".Cologne";
} else if (typeHimShirts) {
pickTwo = ".Shirts";
} else if (typeHimSports) {
pickTwo = ".Sports";
// Gifts she might like
} else if (typeHerCashmere) {
pickTwo = ".Cashmere";
} else if (typeHerPerfume) {
pickTwo = ".Perfume";
} else if (typeHerScarves) {
pickTwo = ".Scarves";
} else if (typeHerSweaters) {
pickTwo = ".Sweaters";
} else if (typeHerBeauty) {
pickTwo = ".Beauty";
} else if (typeHerCandles) {
pickTwo = ".Candles";
} else if (typeHerNecklaces) {
pickTwo = ".Necklaces";
} else if (typeHerJewelry) {
pickTwo = ".SportsJewelry";
} else if (typeHerWatches) {
pickTwo = ".Watches";
} else if (typeHerBags) {
pickTwo = ".SuitcasesBags";
} else if (typeHerShoes) {
pickTwo = ".Shoes";
} else if (typeHerOther) {
pickTwo = ".Other";
// Gifts they might like
} else if (typeAnyoneCookbooks) {
pickTwo = ".Cookbooks";
} else if (typeAnyoneSpirits) {
pickTwo = ".Spirits";
} else if (typeAnyoneSuitcases) {
pickTwo = ".Suitcases";
} else if (typeAnyoneFood) {
pickTwo = ".Food";
} else if (typeAnyoneGardening) {
pickTwo = ".Garden";
} else if (typeAnyoneGadgets) {
pickTwo = ".Gadgets";
} else if (typeAnyoneStLouis) {
pickTwo = ".StLouis";
} else if (typeAnyoneGiveBack) {
pickTwo = ".GiveBack";
} else if (typeAnyoneFitness) {
pickTwo = ".Fitness";
} else if (typeAnyoneSubscriptions) {
pickTwo = ".Subscription";
} else if (typeAnyoneOrnaments) {
pickTwo = ".Ornaments";
} else if (typeAnyonePets) {
pickTwo = ".Pets";
} else if (typeAnyonePersonalized) {
pickTwo = ".Personalized";
} else if (typeAnyoneOther) {
pickTwo = ".Other";
}
}
if (circleThreeSelected && btnSpendSelected) {
if (under25) {
var pickThree = ".Under25";
} else if (under50) {
var pickThree = ".Under50";
} else if (under75) {
var pickThree = ".Under75";
} else if (under100) {
var pickThree = ".Under100";
} else if (under250) {
var pickThree = ".Under250";
} else if (over250) {
var pickThree = ".Over250";
}
var query = jQuery.param(data);
window.open("http://staging.graphics.stltoday.com/apps/giftguide/gifts.html?"+query);
}
});
gifts.html
This script should run if the final next button is clicked on panel.html or going directly to that URL
<script>
$(function(){
// if (window.location.href.indexOf("?" && "pickOne=." && "pickTwo=." && "pickThree=.") !== -1) {
if (window.location.href.indexOf("?") !== -1) {
console.log(window.location.href);
function getParameterByName(name, url) {
if (!url) {
url = window.location.href;
}
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var paramOne = getParameterByName("pickOne");
var paramTwo = getParameterByName("pickTwo");
var paramThree = getParameterByName("pickThree");
var filter = paramOne+paramTwo+paramThree
console.log(filter);
var $grid = $('.gifts').isotope({
itemSelector: '.gift',
layoutMode: 'masonry',
getSortData: {
name: '.gift__name',
price: '.gift__price parseInt',
},
sortAscending: {
name: true,
price: true
}
});
$grid.isotope({ filter: filter });
// If your query returns zero results, then make another search
var filter = $('.gifts').filter(function () {
return this.style.display == 'none'
});
if (filter.length === 0) {
console.log("There are no results");
}
}
});
</script>
panel.html
<!-- Panel Three -->
<div class="panel panel--three is-hidden">
<!-- <div class="advertising advertising--horizontal">
<img src="http://placehold.it/720x90">
</div> -->
<div class="panel__inner inner--spend">
<div class="panel__info">
<h2 class="panel__title">How much do you want to spend?</h2>
<h3 class="panel__instructions pick--one">Pick one of the options below</h3>
<!-- <h3 class="panel__instructions">Remember, it's the thought that counts</h3> -->
</div>
<div class="button__group">
<button class="btn btn--option btn--option-25 btn--spend">Under $25 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-50 btn--spend">Under $50 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-75 btn--spend">Under $75 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-100 btn--spend">Under $100 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-u250 btn--spend">Under $250 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-o250 btn--spend">$250 and over <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--three"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--three">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div> <!-- .panel .panel--three -->
You are creating new pickThree instances using the var keyword, so the original pickThree instance that was added to data never gets set with a value. You need to remove the var keywords like so:
if (under25) {
pickThree = ".Under25";
} else if (under50) {
pickThree = ".Under50";
} else if (under75) {
pickThree = ".Under75";
} else if (under100) {
pickThree = ".Under100";
} else if (under250) {
pickThree = ".Under250";
} else if (over250) {
pickThree = ".Over250";
}
i'm working about education web that recognize the phonem of user voice then check whether the word is true or false
my HTML
<div id="results">
<table class="tg">
<tr>
<th class="tg-4bcc">German</th>
<th class="tg-4bcc">English</th>
<th class="tg-ii5f">Record</th>
<th class="tg-ii5f">Result</th>
<th class="tg-031e"></th>
</tr>
<tr>
<td class="tg-iu59" id="word1">Rose</td>
<td class="tg-zbsj">rose</td>
<td class="tg-dilm"><img id="start_img" src="mic.gif" alt="Start"></img></td>
<td class="tg-hy62"><span id="final_span" class="final"></span></td>
<td class="tg-031e"><span id="answer" class="answer"></span></td>
</tr>
<tr>
<td class="tg-iu59" id="word2">Risiko</td>
<td class="tg-zbsj">risk</td>
<td class="tg-dilm"><img id="start_img" src="mic.gif" alt="Start"></img></td>
<td class="tg-hy62"><span id="final_span" class="final"></span></td>
<td class="tg-031e"><span id="answer" class="answer"></span></td>
</tr>
</table>
My javascript
var final_transcript = '';
var recognizing = false;
if ('webkitSpeechRecognition' in window) {
var recognition = new webkitSpeechRecognition();
recognition.lang = 'de-DE';
recognition.continuous = false;
recognition.interimResults = false;
document.getElementById("answer").innerHTML = '';
recognition.onstart = function() {
recognizing = true;
};
recognition.onerror = function(event) {
console.log(event.error);
};
recognition.onend = function() {
recognizing = false;
};
recognition.onresult = function(event) {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = capitalize(final_transcript);
final_span.innerHTML = linebreak(final_transcript);
interim_span.innerHTML = linebreak(interim_transcript);
if(final_span.innerHTML == word){
document.getElementById("answer").innerHTML = "Good day!";
}
else document.getElementById("answer").innerHTML = "oh no :(";
};
}
var two_line = /\n\n/g;
var one_line = /\n/g;
function linebreak(s) {
return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
}
function capitalize(s) {
return s.replace(s.substr(0,1), function(m) { return m.toUpperCase(); });
}
function startDictation1(event,className) {
if (recognizing) {
recognition.stop();
return;
}
var word = className.value;
final_transcript = '';
recognition.start();
final_span.innerHTML = '';
interim_span.innerHTML = '';
}
function startDictation2(event,className) {
if (recognizing) {
recognition.stop();
return;
}
var word = className.value;
final_transcript = '';
recognition.start();
final_span.innerHTML = '';
interim_span.innerHTML = '';
}
i can input the voice but final_span won't produce the result...
i want when i'm click the 'Rose' recognizer, the final_span at rose row is produce the result.. same with 'Risiko' recognizer..
what must i do?
You have two elements both with id final_span. I suppose you want to name them differently like final_span1 and final_span2.
Also, there is no need to return when recognizing is active, I suspect it is not expected behaviour
if (recognizing) {
recognition.stop();
return; // You can remove return here and just proceed
}
I have a code that uses localStorage and javascript. I tried to add more slots, like slot1, slot2, slot3 up to 5. I just copy and paste then change the variable names like like slot1, slot2, slot3 up to 5. But it won't work. Help will be appreciated so much.
Javascript:
var slot = localStorage.getItem("slot");
if (slot == null) {
slot = 10;
}
document.getElementById("slot").innerText = slot;
function reduceSlot() {
if (slot >= 1) {
slot--;
localStorage.setItem("slot", slot);
if (slot > 0) {
document.getElementById('slot').innerText = slot;
} else {
document.getElementById('slot').innerText = "FULL";
document.getElementById("button1").style.display = "none";
}
}
}
document.getElementById("button1").onclick = reduceSlot;
function clearLocalStorage() {
localStorage.clear();
}
HTML:
<p id="slot">10</p>
Deduct
<button onclick="window.localStorage.clear();">Clear All</button>
Fiddle: http://jsfiddle.net/barmar/K8stQ/3/
not sure but. is this what you want to do?? working demo
i changed your code a bit.. you can change it into your liking later..
<span id="slot0">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(0)})()" ><br>
<span id="slot1">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(1)})()" ><br>
<span id="slot2">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(2)})()" ><br>
<span id="slot3">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(3)})()" ><br>
<span id="slot4">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(4)})()" ><br>
<p>
<button onclick="clearAll()">Clear All</button>
</p>
and for the js...
ls = localStorage.getItem("slots") ;
if(!ls) { localStorage.setItem("slots", "10,10,10,10,10");
}
var slots = localStorage.getItem("slots").split(',').map(Number);
window.onload = updateSlots;
function updateSlots() { for(var i=0;i<slots.length;i++) {
document.getElementById('slot' + i ).innerHTML = slots[i] ;
}}
var reduceSlot = function(slotId) {
console.log(slots[slotId]) ;
if(slots[slotId] >= 1) {
slots[slotId]--; localStorage.setItem("slots",slots);
document.getElementById('slot' + slotId).innerHTML = slots[slotId];
}
else { document.getElementById('slot'+slotId).innerText = "FULL";
}
};
function clearAll() {
window.localStorage.clear();
slots = [10,10,10,10,10];
updateSlots();
}
Try this,
Script
window.ready = function() {
checkStorage();
}
function checkStorage() {
var slot = localStorage.getItem("slot");
if (slot == null) {
slot = 10;
}
document.getElementById("slot").innerHTML = slot;
}
function reduceSlot() {
var slot = localStorage.getItem("slot");
if (slot == null) {
slot = 10;
}
if (slot >= 1) {
slot--;
localStorage.setItem("slot", slot);
if (slot > 0) {
document.getElementById('slot').innerHTML = slot;
} else {
document.getElementById('slot').innerHTML = "FULL";
document.getElementById("button1").style.display = "none";
}
}
}
document.getElementById("button1").onclick = reduceSlot;
document.getElementById("clear").onclick = clear_me;
function clear_me() {
localStorage.clear();
checkStorage();
}
HTML
<p id="slot">10</p>
Deduct
<button id="clear">Clear All</button>
Demo