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/
Related
I need to design a text box textbox
As in the the above picture.
It should have two text box and if i edit one it should reflect in another(via versa).
Kindly help me on this.
Thanks in advance
Does this meet your requirements?
function showPopup() {
document.getElementById('2').style.display = "block";
}
function syncValueWith2() {
document.getElementById('2').value = document.getElementById('1').value;
}
function syncValueWith1() {
document.getElementById('1').value = document.getElementById('2').value;
}
<textarea onkeyup="syncValueWith2()" id="1"></textarea>
<br>
<textarea onkeyup="syncValueWith1()" id="2" style="display: none;"></textarea>
<input type="button" value="Show Popup" onclick="showPopup()">
#Keshav solution will update everytime you finish editing the text area
If you want to update it directly when you press the key, you can use jQuery and with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<textarea class="textarea-1" rows="4" cols="50">
test
</textarea>
<textarea class="textarea-2" rows="4" cols="50">
test
</textarea>
</body>
<script type="text/javascript">
var textarea1 = $('.textarea-1');
var textarea2 = $('.textarea-2');
textarea1.keyup(function() {
textarea2.val(textarea1.val());
});
textarea2.keyup(function() {
textarea1.val(textarea2.val());
});
</script>
</html>
Is this what you want?
var textarea1 = document.getElementById("textarea1");
var textarea2 = document.getElementById("textarea2");
var button = document.getElementById("button");
function Show(button) {
if (button.innerHTML = "Show") {
button.innerHTML = "Hide" ;
textarea2.style.display = "inline";
} else {
button.innerHTML = "Show" ;
textarea2.style.display = "none";
}
}
function change1() {
textarea2.value = textarea1.value;
}
function change2() {
textarea1.value = textarea2.value;
}
<textarea id="textarea1" onkeyup="change1();"></textarea>
<textarea id="textarea2" onkeyup="change2();" style="display:none"></textarea> <br />
<button onclick="Show(this)">Show</button>
I am trying to update a textbox based on whether or not a checkbox is checked or not. Thanks to this post I got a text box working fine, but I can't get a checkbox to update the value. What am I missing?
<html>
<head>
<title>sum totals</title>
<script type="text/javascript">
function calculate(t){
var j = document.getElementById("output");
var rege = /^[0-9]*$/;
if ( rege.test(t.tons.value) ) {
var treesSaved = t.tons.value * 17;
j.value = treesSaved;
}
else
alert("Error in input");
}
$('input[name="selectedItems1"]').click(function(){
var j = document.getElementById("output");
if (this.checked) {
j.value=j.value+300
}else{
j.value=j.value-300
}
});
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" onkeyup="calculate(this.form)"/>
<br />
<input type="checkbox" name="selectedItems1" value="val1" />I have a car
<br/>
<input type="text" id="output" value="Output" />
</form>
</body>
</html>
Place the <script> tag after <form>
Reason:
When the html page loads, it'll be interpreted line by line. When it come to click(), jQuery will try to find the element input[name="selectedItems1"] which won't be loaded into the DOM at that time. So, jQuery won't attach the click() event handle to that checkbox. That's the reason why your code didn't work.
Try this :
<html>
<head>
<title>sum totals</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script type="text/javascript">
function calculate(){
var j = document.getElementById("output");
var rege = /^[0-9]*$/;
var tons = $('#tons').val();
if ( rege.test(tons) ) {
val = parseInt(tons);
var treesSaved = val * 17;
if($('input[name="selectedItems1"]').is(":checked"))
{
treesSaved = treesSaved +300;
}
else
{
treesSaved = treesSaved -300;
}
if(isNaN(treesSaved))
j.value=0
else
j.value=treesSaved;
}
else
alert("Error in input");
}
$(function(){
$('input[name="selectedItems1"]').change(function(){
calculate();
});
});
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" onkeyup="calculate()"/>
<br />
<input type="checkbox" name="selectedItems1" value="val1" />I have a car
<br/>
<input type="text" id="output" value="Output" />
</form>
</body>
</html>
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>
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>
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.