jQuery : Clear Interval not working after stop button click - javascript

I'm trying to stop a loop after bt_stop click. But it is not working fine. clearInterval is not woking after the stop button is clicked.
<div id="abc">
<input id="bt_go" type="button" value="go" />
<input id="bt_stop" type="button" value="stop" />
<div id="output"></div>
</div>
<script>
$('#bt_stop').click(function () {
Get_close('','user1');//enter code here
})
$('#bt_go').click(function () {
Get_close(''#output'',user1');
});
function Get_close(id, output) {
if (id!= '') {
id = setInterval(function () {
chatMSG(id, outpu);
}, 1000)
}
else {
clearInterval(id);
alert('stop');
}
}
</script>

There's quite a bit missing from this code that would make it work. There's at least 3 forseeable errors, some are syntax and some are logic so off we go!
1) $('bt_stop') and $('bt_go') should be $('#bt_stop') and $('#bt_go')
2) chatMSG doesn't even exist in your code so unless you're including it somewhere else that'll be an error. (also outpu should probably be output)
3) When calling Get_close() you shouldn't need to double single quote ''#output'' like that. You can just do '#output'
If you do all these things then it should work.

In order to select an element using its id you shoud add '#':
$('#bt_stop')
Here is an example of what you are trying to do: http://jsfiddle.net/FpgLh/
Good Luck!

Related

Get a dynamic element to change text

I have a dynamic element in my web page like this that appear when I click on an icon:
<span class="elasticbar-item text-right text-baseline">
<button class="button primary" data-next-button="">MY TEXT</button>
</span>
But I want to change default text that come from server (where I don't have access) with a new text.
What I tried before now is represented by:
var buttonIntervalCheck = setInterval(function () {
var button = $("[data-next-button]");
if(button.length === 1) {
button.text("NEW TEXT");
clearInterval(buttonIntervalCheck);
}
}, 1000);
Example in Google Chrome
First result is when I clicked on my icon.
Second result is when I make Inspect on the button (Ctrl+Shift+I) on the button.
And I don't understand how exactly works.
How I can fix it?
Try running this on your console:
$("[data-next-button]").text("NEW TEXT");
If it works correctly, then your timing is wrong. You are probably calling button.text before the DOM has loaded. Try wrapping your code around the ready fuction:
$(function() {
var buttonIntervalCheck = setInterval(function () {
var button = $("[data-next-button]");
if(button.length === 1) {
button.text("NEW TEXT");
clearInterval(buttonIntervalCheck);
}
}, 1000);
});
You can't select a dynamic element with jquery , try with js like
document.querySelector("[data-next-button]")
In the example below there is a setTimeout() that adds the button in the HTML dynamically in 5 seconds. Then, the setInterval() changes the text of the button and close the interval. Everything worked as you expected. I don't see any error here.
var buttonIntervalCheck = setInterval(function () {
var button = $("[data-next-button]");
if(button.length === 1) {
button.text("NEW TEXT");
clearInterval(buttonIntervalCheck);
}
}, 1000);
setTimeout(function(){
$('#ss').html(`<span class="elasticbar-item text-right text-baseline">
<button class="button primary" data-next-button="">MY TEXT</button>
</span>`);
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='ss'></div>

Hiding input type by click event Javascript

I try to hide the submit button but it didn't work. I wrote several alerts to test and it turned out that it never got into the click event. Can someone tell me where were my mistakes? Thanks a lot!
<!DOCTYPE html>
<head>
<title>Dindin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="play">
<p>What's your name?</p>
<br><input type="text" name="name">
<p>What time are you going to dinner?</p>
<br><input type="time" name="time">
<br><input type='submit' value='Submit'>
</div>
<script>
alert("Hello");
$('input:submit').click(function() {
alert("Into click");
storeInfo();
showResult();
$('.play').html("<input type='submit'value='Booked!'");
}
var answers= [];
var storeInfo = function() {
alert("Into storeInfo");
$('input:submit').hide();
answers.push([$('input:text').val(), $('input:time').val()]);
var time = $('#time');
}
var showResult = function() {
alert("Into showResult");
$('.play').html('These are the people going to dinner near your time:');
for (var i = 0; i < answers.length; i++) {
if (Math.abs(answers[i][1] - time)/1000 =< 10000) {
$('.play').html('<br>'+answers[i][0]+' '+answers[i][1]);
}
}
}
</script>
</body>
You're missing a closing parenthesis and semicolon, which is causing an error in your JS.
$('input:submit').click(function() {
alert("Into click");
storeInfo();
showResult();
$('.play').html("<input type='submit'value='Booked!'");
}); // <<<< here
You have other errors in your code that you also need to fix. Look at F12 console log. For example, this is incorrect:
if (Math.abs(answers[i][1] - time)/1000 =< 10000) {
=< should be <=.
Also, you should be using $(document).ready() in order to make sure your events are bound after the DOM has loaded.
You should place your jQuery code inside a
$(function() {
// place your code here
});
Otherwise it might not work because jQuery is not "ready".
You forgot all your closing parentheses for the functions, and also the document ready event

javascript onclick change onclick to new function

I need to be able to change the onclick event of an id so that once it has been clicked once it executes a function which changes the onclick event
Here is my code:
Javascript:
function showSearchBar()
{
document.getElementById('search_form').style.display="inline";
document.getElementById('searchForm_arrow').onclick='hideSearchBar()';
}
function hideSearchBar()
{
document.getElementById('search_form').style.display="none";
document.getElementById('searchForm_arrow').onclick='showSearchBar()';
}
and here is the HTML:
<!-- Search bar -->
<div class='search_bar'>
<img id='searchForm_arrow' src="images/icon_arrow_right.png" alt=">" title="Expand" width="10px" height="10px" onclick='showSearchBar()' />
<form id='search_form' method='POST' action='search.php'>
<input type="text" name='search_query' placeholder="Search" required>
<input type='image' src='images/icon_search.png' style='width:20px; height:20px;' alt='S' >
</form>
</div>
Thanks
Change your code in two places to reference the new functions directly, like:
document.getElementById('searchForm_arrow').onclick=hideSearchBar;
Can you try this,
function showSearchBar()
{
if(document.getElementById('search_form').style.display=='none'){
document.getElementById('search_form').style.display="inline";
}else{
document.getElementById('search_form').style.display="none";
}
}
You were nearly right. You are settingthe onclick to a string rather than a function. Try:
in showSearchBar()
document.getElementById('searchForm_arrow').onclick=hideSearchBar;
in hideSearchBar()
document.getElementById('searchForm_arrow').onclick=showSearchBar;
You do not need to create two function.
Just create one function and using if condition you can show and hide the form tag..
function showSearchBar()
{
if(document.getElementById('search_form').style.display=='none'){
document.getElementById('search_form').style.display=''; // no need to set inline
}else{
document.getElementById('search_form').style.display='none';
}
}
function searchBar(){
var x = document.getElementById('search_form').style.display;
x = (x == 'inline') ? 'none' : 'inline';
}
You can wrap up both functions into one by adding a check to the current condition of the element and applying your style based on that condition. Doesn't actually change the function but doesn't need to as there is now only one functon performing both actions.
With javascript you can check and perform opration
function SearchBarevent()
{
if(document.getElementById('search_form').style.display=='none'){
document.getElementById('search_form').style.display="inline";
}else{
document.getElementById('search_form').style.display="none";
}
}
or if you may go for jquery there is better solution toogle
Like:
$("#button_id").click(function(){
$( "#search_form" ).toggle( showOrHide );
});
Fiddle is example
Here is an option that uses jQuery:
$('#searchForm_arrow').click(function() {
$('#search_form').slideToggle();
});
http://jsfiddle.net/PuTq9/

Hiding a button in Javascript

In my latest program, there is a button that displays some input popup boxes when clicked. After these boxes go away, how do I hide the button?
You can set its visibility property to hidden.
Here is a little demonstration, where one button is used to toggle the other one:
<input type="button" id="toggler" value="Toggler" onClick="action();" />
<input type="button" id="togglee" value="Togglee" />
<script>
var hidden = false;
function action() {
hidden = !hidden;
if(hidden) {
document.getElementById('togglee').style.visibility = 'hidden';
} else {
document.getElementById('togglee').style.visibility = 'visible';
}
}
</script>
visibility="hidden"
is very useful, but it will still take up space on the page. You can also use
display="none"
because that will not only hide the object, but make it so that it doesn't take up space until it is displayed. (Also keep in mind that display's opposite is "block," not "visible")
Something like this should remove it
document.getElementById('x').style.visibility='hidden';
If you are going to do alot of this dom manipulation might be worth looking at jquery
document.getElementById('btnID').style.visibility='hidden';
//Your code to make the box goes here... call it box
box.id="foo";
//Your code to remove the box goes here
document.getElementById("foo").style.display="none";
of course if you are doing a lot of stuff like this, use jQuery
If the space on that page is not disabled then put your button inside a div.
<div id="a1">
<button>Click here</button>
</div>
Using Jquery:
<script language="javascript">
$("#a1").hide();
</script>
Using JS:
<script language="javascript">
document.getElementById("a1").style.visibility = "hidden";
document.getElementById("a1").style.display = "none";
</script>
when you press the button so it should call function that will alert message. so after alert put style visible property .
you can achieve it using
function OpenAlert(){
alert("Getting the message");
document.getElementById("getMessage").style.visibility="hidden";
}
<input type="button" id="getMessage" name="GetMessage" value="GetMessage" onclick="OpenAlert()"/>
Hope this will help . Happy to help
function popAlert(){
alert("Button will be hidden on click");
document.getElementById("getMessage").style.visibility="hidden";
}
h1 {
color: #0000ff;
}
<h1>KIAAT</h1>
<b>Hiding a button in Javascript after click</b>
<br><br>
<input type="button" id="getMessage" value="Hide Button OnClick" onclick="popAlert()"/>
If you are not using jQuery I would suggest using it. If you do, you would want to do something like:
$( 'button' ).on(
'click'
function ( )
{
$( this ).hide( );
}
);
<script>
$('#btn_hide').click( function () {
$('#btn_hide').hide();
});
</script>
<input type="button" id="btn_hide"/>
this will be enough
You can use this code:
btnID.hidden = true;
var start = new Date().getTime();
while ((new Date().getTime() - start) < 1000){
} //for 1 sec delay

What is the problem on this jquery form that checks for number of chars in a textarea?

this is a code that enables the submit button if there are more than 100 chars in the textarea. However I can't get it work. Maybe the jquery version is wrong? I don't know.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<form>
<textarea id="textareaId"></textarea>
<input type="submit" id="submitId" disabled="disabled" />
</form>
<script type="text/javascript">
setInterval(function () {
if(("#textareaId").val().length > 100) {
$("#submitId").removeAttr("disabled");
} else {
$("#submitId").attr("disabled", "disabled");
}
}, 500); //Runs every 0.5s
</script>
You're missing a $ in front of ("#textareaId")
you are missing the $ by ("#textareaId")
and try using an onchange instead of a setInterval this might be more efficient:
$("#textareaId").change(function () {
if((this.value).length > 100) {
$("#submitId").removeAttr("disabled");
} else {
$("#submitId").attr("disabled", "disabled");
}
}).keyup(function(){$(this).change()});
fiddle: http://jsfiddle.net/maniator/7Kch9/
Why do you want to check after every 0.5 seconds? You could have simply checked on change of the textinput.
$('#textareaID').change(function () {
//you logic for checking 100 characters here.
});
Slightly different approach binding on 'keyup' rather than 'change'. It's also best to disable the button with JS rather than in the HTML.
http://jsbin.com/aviji4
I've done it slightly different than the rest, same principle though:
var $submit = $("#submitId"),
$textarea = $("#textareaId"),
NUM_OF_CHARS_TO_ENABLE_SUBMIT = 100;
$textarea.keyup(function() {
if (this.value.length > NUM_OF_CHARS_TO_ENABLE_SUBMIT) {
$submit.removeAttr("disabled");
} else { $submit.attr("disabled", "disabled"); }
});
View the working jsFiddle demo.

Categories