Develop Reference

How Can I call 2 different function using one toggle button in vanilla javascript

I am Using annyang.js for speech-recognition which have 2 different functions, for start annyang.start() and for stop annyang.abort()
Now how do i make a toggle button which will fire both of these functions?
my code
<div class="action" onclick="actionToogle()">
JS
<script>
function actionToogle() {
var action = document.querySelector(".action");
action.classList.toggle("active",annyang.start());
}
</script>
currently its just starting the recognition by annyang.start() ,
but i want whenever i click the button the recognition will be stop by annyang.abort()

You can check if action has active class you can start or if it doesnt have you can stop.
function actionToogle() {
var action = document.querySelector(".action");
action.classList.toggle("active");
if (action.classList.contains("active")) {
// annyang.start();
console.log("Started");
} else {
// annyang.abort();
console.log("Stopped");
}
}

Only can Click the Button for one time per day

I have a button with numeric values of 100. A total number will be displayed on the page. When I click on the "Add 100", it will update and display on the page. I want the button to click only once per day. For example you can't click the button for a second time again. Here's my html code. How can I only make the button clickable once per day? (24 hours)?
<div>Total : <span id="total">0</span></div>
<input class="add" data-amount="100" type="button" value="Add 100" />
$(document).ready(function() {
$('.add').click(function() {
$('#total').text(parseInt($('#total').text()) +
parseInt($(this).data('amount')));
});
})

You'll need to use server-side JavaScript to make it work when you close the page, but if the page doesn't close or reload, ever, you do this:
var dayClicked = true;
$("#button").click(function() {
if (dayClicked) {
alert("Error!");
}
else {
variable += 1;
dayClicked = false;
}
setTimeout(function() {
dayClicked = true;
}, 86400000);
});
This'll add one to variable, then make the #button element show an error message for the next day (86400000 seconds).

Button element is not retrieved at the first call

I've came across a curious thing while scripting in JavaScript and I'm not entirely sure if my way of understanding it is correct.
Basically I would like to click a button which brings up another one, if the second button is not brought up by the first I need to quit the loop.
var intervalID = window.setInterval(myfunc,1000);
function t(){
console.log('quit');
clearInterval(intervalID);
}
function myfunc(){
//first button
document.getElementsByClassName('hit')[0].click();
//try to retrieve the second one
var el = document.getElementsByClassName('hit_ok');
console.log(el.length);
//if it exists click it
if (el.length == 1){
el[0].click();
//otherwise exit
} else {
console.log('ready to quit');
window.setTimeout(t,50);
}
}
My problem is that the first instance returns always 0 in the if statements
I also tried the following:
function myfunc(){
document.getElementsByClassName('hit')[0].click();
var el = document.getElementsByClassName('hit_ok');
console.log(el);
if (el != null){
el[0].click();
} else {
console.log('ready to quit');
window.setTimeout(t,50);
}
}
and in fact it returns:
[] --> length: 0__proto__: HTMLCollection
VM3642:1 Uncaught TypeError: Cannot read property 'click' of undefined
instead of:
[span.hit_ok]
Which means that the first time it cant retrieve the button.
Clearly the second button is there since the first one is pressed.
HTML code:
//first button
<div class="try">
<input type="hidden" id="isHit" value="">
Try
</div>
//second button
<div class="msgbox_button">
<span class="hit_ok" onclick="remove();">OK</span>
</div>
Any ideas?
Regards,

What you do:
intervalID=window.setInterval();
This is valid js, but the script is started before the page has loaded, wich means the DOM is not created at that time.
What to do:
window.onload=function(){
var intervalID=window.Interval(...);
};
This starts the loop after the page has loaded

Javascript pressing the button in an interval

I have a submit button, which sends the value with POST method to the same page.
<button id="log" class="btn bg-purple" formmethod=post value="2" name="start" formaction=start_server.php>Get Log</button>
When I press that button, I get the log from the file in a list using PHP.
What I want to do now is to make a script with javascript to automatically press the "Get Log" button to reload the log file every 2 seconds so I can have an interactive log, without pressing the button myself.
I have tried this script, but only the alert is working I guess, since it doesn't reload the log file at all.
<script type="text/javascript">
window.onload=function(){
var auto = setTimeout(function(){ autoRefresh(); }, 100);
function submitform(){
alert('test');
document.button["log"].submit();
}
function autoRefresh(){
clearTimeout(auto);
auto = setTimeout(function(){ submitform(); autoRefresh(); }, 2000);
}
}
</script>

Replace your script with this:
$(document).ready(function(){
// this handles the click on yout "Get log" button
$("#log").click(function(){
//alert('test');
console.log("Click function");
$("#log").submit();
});
// This sets an interval to simulate a click every 2 seconds.
auto = setInterval(function(){
console.log("Interval iteration");
$("#log").click();
}, 2000);
});

Give an ID to your form and replace this line -
document.button["log"].submit();
With this -
document.getElementById('formID').submit();

disable button with timeout

I have this form with conditions that alert validation errors before posting data. the problem is if someone double clicks (by mistake perhaps), the form is submitted, then the form is cleared on the first click then the second click will alert 'form empty', which could be confusing as it all happens in a split second. so what I want is to temporarily disable the button when clicked for 3 seconds. but what I have now just times out the whole function for 3 seconds not just disabling the button. how should I be doing this? here is a simplified version of the form. Thanks
$('#send').click(function(){
var self = $('#send');
setTimeout(function() {
self.disabled = false;
if(!$('#text').val()){
alert('field empty');
}else{
$('#message').html('done');
$('#text').val('');
}
}, 3000);
});

I've written a small example for you, of disabling a button on click. The timeout will enable the button after 3000 miliseconds.
Working demo
html:
<input id="text">
<input id="send" type="button" value="send"/>
<div id="message"></div>
Javascript:
$('#send').click(function(){
var button = $(this);
button.attr('disabled', 'disabled');
setTimeout(function() {
button.removeAttr('disabled');
},3000);
if(!$('#text').val()){
alert('field empty');
button.removeAttr('disabled');
}else{
$('#message').html('done');
$('#text').val('');
}
});

You could use jQuery's one() instead of click(). Once the function is run it will be unbound.
If you want to re-enable it you could put the timeout to re-bind it at the end of the function.
Using your method, it looks like you're never actually disabling the button:
this.disabled = 'disabled';

You are not correctly disabling the button. You are setting the .disabled property on a jQuery object, not the wrapped DOM element.
Try:
self.prop('disabled', false);
Instead of:
self.disabled = false;
EDIT:
Actually the code above was attempting to re-ebable the button. There was no code to disable the button.
I also think you want to perform the validation right away. The call to setTimeout() should just be for re-enabling the button, like this:
$('#send').click(function() {
var self = $(this);
// Disable the button.
self.prop('disabled', true);
// Process click.
if (!$('#text').val()) {
alert('field empty');
} else {
$('#message').html('done');
$('#text').val('');
}
// Cause the button to re-enable after 3 seconds.
setTimeout(function() {
self.prop('disabled', false);
}, 3000);
});