How to add Javascript "Stop" and "Reset" Button to the following: - javascript

I need help with adding a stop and reset button for the following count up, so that it doesnt start till you press start, and it doesnt reset unless you press reset, also a stop button would be good! Thanks! cause as you see the buttons i have dont work. Thanks
<html>
<head>
<title>Untitled Document</title>
</head>
<script>
var timer;
function startCount()
{
timer = setInterval(count,1);
}
function count()
{
var el = document.getElementById('counter');
var currentNumber = parseFloat(el.innerHTML);
el.innerHTML = currentNumber+0.00000003831417624521;
}
</script>
<body onload="startCount();">
<div id="counter">0</div>
<input type="button" value="reset" id="reset" />
<input type="button" value="start" id="start" />
</body>
</html>

function stopCount() {
clearInterval(timer);
}
function resetCount() {
document.getElementById('counter').innerHtml = 0;
}
And use jQuery to attach event listeners to some html element, or if you are never going to get complicated enough to need it, just stick them in the onclick properties as recommended by SimonMayer.

How about this?
<script>
var timer;
var stop;
function startCount()
{
stop = false;
timer = setInterval(count,1);
}
function stopCount()
{
stop = true;
}
function count()
{
if(stop == false)
{
var el = document.getElementById('counter');
var currentNumber = parseFloat(el.innerHTML);
el.innerHTML = currentNumber+0.00000003831417624521;
}
}
</script>
</head>
<body>
<div id="counter">0</div>
<input type="button" value="reset" id="reset" onclick="document.getElementById('counter').innerHTML = 0;" />
<input type="button" value="start" id="start" onclick="startCount();" />
<input type="button" value="stop" id="stop" onclick="stopCount();" />
</body>
</html>
EDIT - now includes stop functionality
NOTE - I have moved the <script> into the <head> - All content should either be inside the head or the body.

Related

how to have a userinput be ".pushed" into an array

I would like the user to be able to add a url into the box submit it and then it will be in the array and be displayed in order. I would like this to be able to happen as many times as they click submit.
this is where I am but it searches my computer for the url rather than the web.
<!DOCTYPE html>
<html>
<head>
<title>images</title>
</head>
<body>
<input type="text" id="user_input" />
<button onClick="add()">ADD</button>
<img id="light" width="10%">
<button onclick="colourChange()">Click Me To Cycle Through The Colours</button>
<script>
var x=1
var user = document.getElementById("user_input");
var colour = ["red.gif", "amber1.gif", "green.gif", "amber1.gif"];
document.getElementById("light").src = colour[0];
function add(){
colour.push(user);
}
function colourChange(){
document.getElementById("light").src = colour[x];
x += 1;
if (x == colour.length ) x = 0
}
</script>
</body>
</html>
If you want this to be reset when user reloads the page, you don't need to use a form.
<input type="text" id="user_input" />
<button onClick=add()>ADD</button>
And your add function
function add(){
var newVal = document.getElementById('user_input').value;
fruits.push(newVal); //assuming your array is named fruits, I can't see in your code where you have defined it.
}
Replace your add function with
var imageInput = document.querySelector("input[name=url]");
function add(evnt){
evnt.preventDefault();
colour.push(imageInput.value);
return false;
}
First you need to declare the array before you try to push it.
var fruits = [];
and then in your add function, get the url element and push to the array you declared previously. It's convenient if you give the element an id.
function add() { fruits.push(document.getElementById('url').value); }
<!DOCTYPE html>
<html>
<head>
<title>images</title>
</head>
<body>
<form id="user">
insert an image URL to add to cycle: <input type="text" id="url" name="url"><br>
<button onclick="add()">ADD</button>
</form>
<img id="light" width="10%">
<button onclick="colourChange()">Click Me To Cycle Through The Colours</button>
<script>
var x = 1;
var colour = ["red.gif", "amber1.gif", "green.gif", "amber1.gif"];
var fruits = [];
document.getElementById("light").src = colour[0];
var url = document.getElementById('url');
function add(){
fruits.push(url.value);
}
function colourChange(){
document.getElementById("light").src = colour[x];
x += 1;
if (x == colour.length ) x = 0
}
</script>
</body>
</html>
Add into from tag onsubmit="return false" and see add() function which is mentioned in below line.
var x=1
var colour = ["red.gif", "amber1.gif", "green.gif", "amber1.gif"];
document.getElementById("light").src = colour[0];
function add(){
var newVal = document.getElementById('url').value;
colour.push(newVal);
document.getElementById('url').value = '';;
}
function colourChange(){
document.getElementById("light").src = colour[x];
x += 1;
if (x == colour.length ) x = 0
}
<!DOCTYPE html>
<html>
<head>
<title>images</title>
</head>
<body>
<form id="user" onsubmit="return false">
insert an image URL to add to cycle: <input type="text" name="url" id="url"><br>
<input type="submit" value="Submit" onclick="add()">
</form>
<img id="light" width="10%">
<button onclick="colourChange()">Click Me To Cycle Through The Colours</button>
</body>
</html>

ASCII Animation

I'm not sure what I'm missing here in my code. I can't get my clearTimeout to work... I keep getting an error saying myStopFunction() is not defined. Any ideas?
I've tried renaming it and checked to make sure that everything matches up, I'm just not sure why I keep getting this dang error!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ASCII Animations</title>
<h1> ASCII Animation Editor/Viewer </h1>
<br><h3> Jordan Keith: Linn-Benton Community College</h3>
<body>
<p> Enter the frams below, separated by "====="
<input onclick = "playAnimation();" type="button" id= "Play" value = "PLAY" />
<input onclick = "myStopFunction();" type="button" id= "Stop" value = "STOP" /></p>
<textarea id = "frameArea" cols="50" rows="30"></textarea>
<textarea id = "displayArea" cols="50" rows="30"></textarea>
<script src="ASCII.js"></script><br>
</form>
</div>
</body>
</html>
JavaScript
function playAnimation()
{
frameStr = document.getElementById("frameArea").value;
if(frameStr.indexOf("\r\n") !=-1)
{
frameSeq = frameStr.split("=====\r\n");
}
else
{
frameSeq = frameStr.split("=====\n");
}
currentFrame = 0;
showNextFrame();
}
var t;
function showNextFrame()
{
document.getElementById("displayArea").value = frameSeq[currentFrame]
currentFrame = (currentFrame+1)% frameSeq.length;
t = setTimeout("showNextFrame();" , 250);
}
function myStopFuntion()
{
clearTimeout(t);
}
Your call for myStopFunction is missing a C in function.
clearInterval(t);
is what is used to clear the timer for Javascript
myStopFunction is not getting called due to a typo in function name.
Replace function myStopFuntion() with function myStopFunction() .
Here is the running code:
<head>
<script>
function playAnimation()
{
frameStr = document.getElementById("frameArea").value;
if (frameStr.indexOf("\r\n") != -1) {
frameSeq = frameStr.split("=====\r\n");
} else {
frameSeq = frameStr.split("=====\n");
}
currentFrame = 0;
showNextFrame();
}
var t;
function showNextFrame()
{
document.getElementById("displayArea").value = frameSeq[currentFrame];
currentFrame = (currentFrame + 1) % frameSeq.length;
t = setTimeout(showNextFrame, 250);
}
function myStopFunction()
{
alert("Stopping Now");
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input onclick="playAnimation();" type="button" id="Play" value="PLAY" />
<input onclick="myStopFunction();" type="button" id="Stop" value="STOP" />
<textarea id="frameArea" cols="50" rows="30"></textarea>
<textarea id="displayArea" cols="50" rows="30"></textarea>
</form>
</body>
JSFIDDLE LINK: http://jsfiddle.net/52Nvj/4/

How to keep delay of 10 seconds after each submit

I have this Javascript below
And want to do it in working in FireFox
I wanted to keep 5 seconds delay after each submit
<html>
<head>
<script type="text/javascript">
function sleep(ms)
{
var dt = new Date();
dt.setTime(dt.getTime() + ms);
while (new Date().getTime() < dt.getTime());
}
function test() {
var windowCounter = 1;
var myStringArray = [ "user1", "user2" , "user3" , "user4" ]
var len = myStringArray.length;
for (var i=0; i<3; ++i) {
document.inform.cid = myStringArray[i];
document.inform.pwd = "xxxxxxxx";
document.inform.target = windowCounter++; // a different target each time
document.inform.submit();
}
}
</script>
</head>
<body >
<form name="inform" target="newWin" action="https://www.google.co.in/">
<input type="text" name="cid" />
<input type="hidden" name="pwd" />
<input type="hidden" name="throttle" value="999" />
<input type="submit" value="go" onclick="test()">
</form>
</body>
</html>
I have tried keeping sleep manually after each submit and tried using setTimeOut , but nothing is working .
could anybody please help me
Edited Part
<html>
<head>
<script type="text/javascript">
var interval = window.setInterval(iterate, 5000);
var myStringArray = ["user1", "user2", "user3", "user4"];
function iterate() {
iterate.arr = iterate.arr || myStringArray.slice(0);
//if it still has elements left
if(iterate.arr.length > 0) {
document.inform.cid = iterate.arr.pop(); //remove the top one
alert(document.inform.cid);
document.inform.pw = "xxxx";
document.inform.target = iterate.arr.length; // a different target each time - length of the arr
document.inform.submit();
} else {
window.clearInterval(interval); //no more left cancel it
}
};
</script>
</head>
<body>
<form name="inform" method="get" target="newWin" action="https://www.google.co.in/">
<input type="text" name="cid" />
<input type="password" name="pw" />
<input type="hidden" name="throttle" value="999" />
<input type="submit" value="go" onclick="iterate()"/>
</form>
</body>
</html>
Could you use something like (not tested though):
var interval = window.setInterval(iterate, 5000);
var myStringArray = ["user1", "user2", "user3", "user4"];
function iterate() {
iterate.arr = iterate.arr || myStringArray.slice(0); //set a private array to cache
//if it still has elements left
if(iterate.arr.length > 0) {
//thought there was more than one formon the page - but if only one then we can reference by its name - cid
///:document.inform.cid = iterate.arr.pop(); //remove the top one
iterate.arr.pop();
document.inform.pwd = "xxxxxxxx";
document.inform.target = iterate.arr.length; // a different target each time - length of the arr
document.inform.submit();
} else {
window.clearInterval(interval); //no more left cancel it
}
};
Plaese try This:
<html>
<head>
<script type="text/javascript">
function submit()
{
document.inform.submit();
}
function test() {
setTimeout('submit()',5000);
}
</script>
</head>
<body >
<form name="inform" target="newWin" action="https://www.google.co.in/">
<input type="text" name="cid" />
<input type="hidden" name="pwd" />
<input type="hidden" name="throttle" value="999" />
<input type="button" value="go" onclick="test()">
</form>
</body>
</html>

Changing button text onclick

When I click on myButton1 button, I want the value to change to Close Curtain from Open Curtain.HTML:
<input onclick="change()" type="button" value="Open Curtain" id="myButton1"></input>
Javascript:
function change();
{
document.getElementById("myButton1").value="Close Curtain";
}
The button is displaying open curtain right now and I want it to change to close curtain, is this correct?
If I've understood your question correctly, you want to toggle between 'Open Curtain' and 'Close Curtain' -- changing to the 'open curtain' if it's closed or vice versa. If that's what you need this will work.
function change() // no ';' here
{
if (this.value=="Close Curtain") this.value = "Open Curtain";
else this.value = "Close Curtain";
}
Note that you don't need to use document.getElementById("myButton1") inside change as it is called in the context of myButton1 -- what I mean by context you'll come to know later, on reading books about JS.
UPDATE:
I was wrong. Not as I said earlier, this won't refer to the element itself. You can use this:
function change() // no ';' here
{
var elem = document.getElementById("myButton1");
if (elem.value=="Close Curtain") elem.value = "Open Curtain";
else elem.value = "Close Curtain";
}
When using the <button> element (or maybe others?) setting 'value' will not change the text, but innerHTML will.
var btn = document.getElementById("mybtn");
btn.value = 'my value'; // will just add a hidden value
btn.innerHTML = 'my text';
When printed to the console:
<button id="mybtn" class="btn btn-primary" onclick="confirm()" value="my value">my text</button>
It seems like there is just a simple typo error:
Remove the semicolon after change(), there should not be any in the
function declaration.
Add a quote in front of the myButton1 declaration.
Corrected code:
<input onclick="change()" type="button" value="Open Curtain" id="myButton1" />
...
function change()
{
document.getElementById("myButton1").value="Close Curtain";
}
A faster and simpler solution would be to include the code in your button and use the keyword this to access the button.
<input onclick="this.value='Close Curtain'" type="button" value="Open Curtain" id="myButton1" />
There are lots of ways. And this should work too in all browsers and you don't have to use document.getElementById anymore since you're passing the element itself to the function.
<input type="button" value="Open Curtain" onclick="return change(this);" />
<script type="text/javascript">
function change( el )
{
if ( el.value === "Open Curtain" )
el.value = "Close Curtain";
else
el.value = "Open Curtain";
}
</script>
this code work for me
var btn = document.getElementById("your_btn_id");
if(btn.innerText=="show"){
btn.innerText="hide";
}
else{
btn.innerText="show";
}
using value is not work in my case
Add this function to the script
function myFunction() {
var btn = document.getElementById("myButton");
if (btn.value == "Open Curtain") {
btn.value = "Close Curtain";
btn.innerHTML = "Close Curtain";
}
else {
btn.value = "Open Curtain";
btn.innerHTML = "Open Curtain";
}
}
and edit the button
<button onclick="myFunction()" id="myButton" value="Open Curtain">Open Curtain</button>
If you prefer binding your events outside the html-markup (in the javascript) you could do it like this:
document.getElementById("curtainInput").addEventListener(
"click",
function(event) {
if (event.target.value === "Open Curtain") {
event.target.value = "Close Curtain";
} else {
event.target.value = "Open Curtain";
}
},
false
);
<!doctype html>
<html>
<body>
<input
id="curtainInput"
type="button"
value="Open Curtain" />
</body>
</html>
i know this is an old post but there is an option to sent the elemd id with the function call:
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
function f1(objButton)
{
if (objButton.innerHTML=="EXPAND") objButton.innerHTML = "MINIMIZE";
else objButton.innerHTML = "EXPAND";
}
You are missing an opening quote on the id= and you have a semi-colon after the function declaration. Also, the input tag does not need a closing tag.
This works:
<input onclick="change()" type="button" value="Open Curtain" id="myButton1">
<script type="text/javascript">
function change()
{
document.getElementById("myButton1").value="Close Curtain";
}
</script>
Try this,
<input type="button" id="myButton1" value="Open Curtain" onClick="javascript:change(this);"></input>
<script>
function change(ref) {
ref.value="Close Curtain";
}
</script>
this can be done easily with a vbs code (as i'm not so familiar with js )
<input type="button" id="btn" Value="Close" onclick="check">
<script Language="VBScript">
sub check
if btn.Value="Close" then btn.Value="Open"
end sub
</script>
and you're done , however this changes the Name to display only and does not change the function {onclick} , i did some researches on how to do the second one and seem there isnt' something like
btn.onclick = ".."
but i figured out a way using <"span"> tag it goes like this :
<script Language="VBScript">
Sub function1
MsgBox "function1"
span.InnerHTML= "<Input type=""button"" Value=""button2"" onclick=""function2"">"
End Sub
Sub function2
MsgBox "function2"
span.InnerHTML = "<Input type=""button"" Value=""button1"" onclick=""function1"">"
End Sub
</script>
<body>
<span id="span" name="span" >
<input type="button" Value="button1" onclick="function1">
</span>
</body>
try it yourself , change the codes in sub function1 and sub function2, basically all you need to know to make it in jscript is the line
span.InnerHTML = "..."
the rest is your code you wanna execute
hope this helps :D
This worked fine for me. I had multiple buttons which I wanted to toggle the input value text from 'Add Range' to 'Remove Range'
<input type="button" onclick="if(this.value=='Add Range') { this.value='Remove Range'; } else { this.value='Add Range'; }" />
var count=0;
document.getElementById("play").onclick = function(){
if(count%2 =="1"){
document.getElementById("video").pause();
document.getElementById("play").innerHTML ="Pause";
}else {
document.getElementById("video").play();
document.getElementById("play").innerHTML ="Play";
}
++count;
This is simple way to change Submit to loading state
<button id="custSub" type="submit" class="button left tiny" data-text-swap="Processing.. ">Submit <i class="fa fa-angle-double-right"></i></button>
<script>
jQuery(document).ready(function ($) {
$("button").on("click", function() {
var el = $(this);
if (el.html() == el.data("text-swap")) {
el.html(el.data("text-original"));
} else {
el.data("text-original", el.html());
el.html(el.data("text-swap"));
}
setTimeout(function () {
el.html(el.data("text-original"));
}, 500);
});
});
</script>
<input type="button" class="btn btn-default" value="click me changtext" id="myButton1" onClick="changetext()" >
<script>
function changetext() {
var elem = document.getElementById("myButton1");
if (elem.value=="click me change text")
{
elem.value = "changed text here";
}
else
{
elem.value = "click me change text";
}
}
</script>
If not opposed to or may already be using jQuery, you could do this without the approach of having to use obtrusive js. Hope it helps. https://en.wikipedia.org/wiki/Unobtrusive_JavaScript Also like to reference, https://stackoverflow.com/a/3910750/4812515 for a discussion on this.
HTML:
<input type="button" value="Open Curtain" id=myButton1"></input>
Javascript:
$('#myButton1').click(function() {
var self = this;
change(self);
});
function change( el ) {
if ( el.value === "Open Curtain" )
el.value = "Close Curtain";
else
el.value = "Open Curtain";
}
<!DOCTYPE html>
<html>
<head>
<title>events2</title>
</head>
<body>
<script>
function fun() {
document.getElementById("but").value = "onclickIChange";
}
</script>
<form>
<input type="button" value="Button" onclick="fun()" id="but" name="but">
</form>
</body>
</html>
Or more simple without having to name the element (with 'button' element):
<button onclick="toggleLog(this)">Stop logs</button>
and script :
var bWriteLog = true;
function toggleLog(elt) {
bWriteLog = !bWriteLog;
elt.innerHTML = bWriteLog ? 'Stop logs' : 'Watch logs';
}
function change() {
myButton1.value=="Open Curtain" ? myButton1.value="Close Curtain" : myButton1.value="Open Curtain";
}

JavaScript onclick event handlers not functioning properly

For some reason, my onclick JavaScript event handlers are not functioning properly.
Here is my markup, script and style:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quadratic Root Finder</title>
<script>
document.ready = function() {
document.getElementById('calculate').onClick.calculateQuad()
{
var inputa = document.getElementById('variablea').value;
var inputb = document.getElementById('variableb').value;
var inputc = document.getElementById('variablec').value;
root = Math.pow(inputb,2) - 4 * inputa * inputc;
root1 = (-inputb + Math.sqrt(root))/2*inputa
root2 = (-inputb + Math.sqrt(root))/2*inputa
document.getElementById('root1').value = root1;
document.getElementById('root2').value = root2;
if(root<'0')
{
alert('This equation has no real solution.')
}
else {
if(root=='0')
{
document.getElementById('root1').value = root1
document.getElementById('root2').value = 'No Second Answer'
}
else {
document.getElementById('root1').value = root1
document.getElementById('root2').value = root1
}
}
};
document.getElementById('erase').onClick.document.getElementById('form1').reset();
}
</script>
<style>
#container
{
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<h1>Quadratic Root Finder!</h1>
<form id="form1">
a:<input id="variablea" value="" type="text">
<br/>
b:<input id="variableb" value="" type="text">
<br />
c:<input id="variablec" value="" type="text">
<br />
<input id="calculate" value="Calculate!" type="button">
<input id="erase" value="Clear" type="button">
<br />
<br />
Roots:
<br />
<input id="root1" type="text" readonly>
<br />
<input id="root2" type="text" readonly>
</form>
</div>
</body>
</html>
Is there an explainable reason?
This is wrong
document.getElementById('calculate').onClick.calculateQuad()
It must be
document.getElementById('calculate').onClick = function ()
And this is wrong too
document.getElementById('erase').onClick.document.getElementById('form1').reset();
Fixing:
document.getElementById('erase').onClick = function(){document.getElementById('form1').reset();}
There's not really a "ready" event like that. If you want to do things at what's commonly thought of as the "ready" point, you'll need to use a framework. Otherwise, you can use "onload" instead of "ready".
If, for example, you were using jQuery, you'd do this:
$(function() {
var inputa = document.getElementById('variablea').value;
var inputb = document.getElementById('variableb').value;
var inputc = document.getElementById('variablec').value;
// etc ...
});
Without that, you'd do:
window.onload = function() {
// all your stuff
};
Also:
... .onclick.calculateQuad() {
makes no sense at all.
.onClick.document.getElementById('form1').reset()
I think you want to turn this into:
.onclick = function () { document.getElementById('form1').reset(); }
if you can use Jquery
$(document).ready(function()
{
$("#variablea").click(function(element)
{
///....operation
});
});
you can use $(" input").click(function(element){}) operate all of input elements

Categories

Resources