Newbie here. Probably because I'm already sleepy and can't find a solution. I'm trying to stop a function when I click on another button.
Here's the code so far:
When I click on a button (.start), it runs a function that messes up the text randomly without finish. But then, I want to click on button #stop and stop that specific function from running. I've tried toggles, preventDefault, event.stopPropagation(), setInterval, etc... None of them works. I've tried putting inside my function and outside as well.
Here's the current js code:
$(".start").click(function(){
var getTextNodesIn = function(el) {
// Look at all the page elements and returns the text nodes
return $(el)
.find(":not(iframe,script)")
.addBack()
.contents()
.filter(function() {
return this.nodeType == 3; // Text node types are type 3
});
};
// var textNodes = getTextNodesIn($("p, h1, h2, h3","*"));
var textNodes = getTextNodesIn($("p"));
function isLetter(char) {
return /^[\d]$/.test(char);
}
var wordsInTextNodes = [];
for (var i = 0; i < textNodes.length; i++) {
var node = textNodes[i];
var words = [];
var re = /\w+/g;
var match;
while ((match = re.exec(node.nodeValue)) != null) {
var word = match[0];
var position = match.index;
words.push({
length: word.length,
position: position
});
}
wordsInTextNodes[i] = words;
}
function messUpWords() {
for (var i = 0; i < textNodes.length; i++) {
var node = textNodes[i];
for (var j = 0; j < wordsInTextNodes[i].length; j++) {
// Only change a tenth of the words each round.
if (Math.random() > 1 / 10) {
continue;
}
var wordMeta = wordsInTextNodes[i][j];
var word = node.nodeValue.slice(
wordMeta.position,
wordMeta.position + wordMeta.length
);
var before = node.nodeValue.slice(0, wordMeta.position);
var after = node.nodeValue.slice(wordMeta.position + wordMeta.length);
node.nodeValue = before + messUpWord(word) + after;
}
}
}
function messUpWord(word) {
if (word.length < 3) {
return word;
}
return word[0] + messUpMessyPart(word.slice(1, -1)) + word[word.length - 1];
}
function messUpMessyPart(messyPart) {
if (messyPart.length < 2) {
return messyPart;
}
var a, b;
while (!(a < b)) {
a = getRandomInt(0, messyPart.length - 1);
b = getRandomInt(0, messyPart.length - 1);
}
return (
messyPart.slice(0, a) +
messyPart[b] +
messyPart.slice(a + 1, b) +
messyPart[a] +
messyPart.slice(b + 1)
);
}
// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
setInterval(messUpWords, 50);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="controls pt-5">
<button class="start">Simulate</button>
<button id="stop">Stop</button>
</div>
<br>
<br>
<br>
<div>
<h1>Trying</h1>
<p>Friends who have dyslexia described to me how they experience reading. She <em>can</em> read, but it takes a lot of concentration, and the letters seems to "jump around".</p>
</div>
The function works pretty well. I'm just having a hard time making another button stop this function from running... Any help would be appreciated and I wish y'all a nice week.
You cannot stop a function from running because only one function can ever run at a time within the JavaScript runtime environment (single-threaded). When you click the button to try to stop the first function, what actually happens is that the first function finishes and then the click event associated with the button runs. And, by then, the first function has completed, so it's too late to stop it.
You can look into asynchronous operations, which run outside of the JavaScript runtime. In your case, using setInterval() to run a function repeatedly at regular intervals would probably be the best way to go. This would allow you to check between invocations to see if something else has occurred, which should stop the function from running at the next interval.
Now, you are using the interval timer, but you aren't setting up a reference to it, so you can't tell it to stop when you need it to. The solution is to associate a variable with the timer and then to call clearInterval() and pass it the timer reference as shown here:
let timer = null; // This will hold a reference to the timer so you can stop it later
$("#stop").on("click", function(){
clearInterval(timer); // Stop the timer
});
$(".start").click(function(){
var getTextNodesIn = function(el) {
// Look at all the page elements and returns the text nodes
return $(el).find(":not(iframe,script)")
.addBack()
.contents()
.filter(function() {
return this.nodeType == 3; // Text node types are type 3
});
};
// var textNodes = getTextNodesIn($("p, h1, h2, h3","*"));
var textNodes = getTextNodesIn($("p"));
function isLetter(char) {
return /^[\d]$/.test(char);
}
var wordsInTextNodes = [];
for (var i = 0; i < textNodes.length; i++) {
var node = textNodes[i];
var words = [];
var re = /\w+/g;
var match;
while ((match = re.exec(node.nodeValue)) != null) {
var word = match[0];
var position = match.index;
words.push({
length: word.length,
position: position
});
}
wordsInTextNodes[i] = words;
}
function messUpWords() {
for (var i = 0; i < textNodes.length; i++) {
var node = textNodes[i];
for (var j = 0; j < wordsInTextNodes[i].length; j++) {
// Only change a tenth of the words each round.
if (Math.random() > 1 / 10) {
continue;
}
var wordMeta = wordsInTextNodes[i][j];
var word = node.nodeValue.slice(
wordMeta.position,
wordMeta.position + wordMeta.length
);
var before = node.nodeValue.slice(0, wordMeta.position);
var after = node.nodeValue.slice(wordMeta.position + wordMeta.length);
node.nodeValue = before + messUpWord(word) + after;
}
}
}
function messUpWord(word) {
if (word.length < 3) {
return word;
}
return word[0] + messUpMessyPart(word.slice(1, -1)) + word[word.length - 1];
}
function messUpMessyPart(messyPart) {
if (messyPart.length < 2) {
return messyPart;
}
var a, b;
while (!(a < b)) {
a = getRandomInt(0, messyPart.length - 1);
b = getRandomInt(0, messyPart.length - 1);
}
return (
messyPart.slice(0, a) +
messyPart[b] +
messyPart.slice(a + 1, b) +
messyPart[a] +
messyPart.slice(b + 1)
);
}
// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
timer = setInterval(messUpWords, 50); // Set interval reference to variable
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="controls pt-5">
<button class="start">Simulate</button>
<button id="stop">Stop</button>
</div>
<br>
<br>
<br>
<div>
<h1>Trying</h1>
<p>Friends who have dyslexia described to me how they experience reading. She <em>can</em> read, but it takes a lot of concentration, and the letters seems to "jump around".</p>
</div>
You can check at the top of the messUpWords function to see if the stop button has been clicked. If it has, you can clear the interval, reset the the stop button flag, and escape the routine.
var stopBtnClicked = false;
var stopBtn = document.getElementById("stop");
stopBtn.addEventListener("click", function() {
stopBtnClicked = true;
}, false);
$(".start").click(function() {
var getTextNodesIn = function(el) {
// Look at all the page elements and returns the text nodes
return $(el)
.find(":not(iframe,script)")
.addBack()
.contents()
.filter(function() {
return this.nodeType == 3; // Text node types are type 3
});
};
// var textNodes = getTextNodesIn($("p, h1, h2, h3","*"));
var textNodes = getTextNodesIn($("p"));
function isLetter(char) {
return /^[\d]$/.test(char);
}
var wordsInTextNodes = [];
for (var i = 0; i < textNodes.length; i++) {
var node = textNodes[i];
var words = [];
var re = /\w+/g;
var match;
while ((match = re.exec(node.nodeValue)) != null) {
var word = match[0];
var position = match.index;
words.push({
length: word.length,
position: position
});
}
wordsInTextNodes[i] = words;
}
function messUpWords() {
if (stopBtnClicked) {
clearInterval(jumbleTimer);
stopBtnClicked = false;
return;
}
for (var i = 0; i < textNodes.length; i++) {
var node = textNodes[i];
for (var j = 0; j < wordsInTextNodes[i].length; j++) {
// Only change a tenth of the words each round.
if (Math.random() > 1 / 10) {
continue;
}
var wordMeta = wordsInTextNodes[i][j];
var word = node.nodeValue.slice(
wordMeta.position,
wordMeta.position + wordMeta.length
);
var before = node.nodeValue.slice(0, wordMeta.position);
var after = node.nodeValue.slice(wordMeta.position + wordMeta.length);
node.nodeValue = before + messUpWord(word) + after;
}
}
}
function messUpWord(word) {
if (word.length < 3) {
return word;
}
return word[0] + messUpMessyPart(word.slice(1, -1)) + word[word.length - 1];
}
function messUpMessyPart(messyPart) {
if (messyPart.length < 2) {
return messyPart;
}
var a, b;
while (!(a < b)) {
a = getRandomInt(0, messyPart.length - 1);
b = getRandomInt(0, messyPart.length - 1);
}
return (
messyPart.slice(0, a) +
messyPart[b] +
messyPart.slice(a + 1, b) +
messyPart[a] +
messyPart.slice(b + 1)
);
}
// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
var jumbleTimer = setInterval(messUpWords, 50);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="controls pt-5">
<button class="start">Simulate</button>
<button id="stop">Stop</button>
</div>
<br>
<br>
<br>
<div>
<h1>Trying</h1>
<p>Friends who have dyslexia described to me how they experience reading. She <em>can</em> read, but it takes a lot of concentration, and the letters seems to "jump around".</p>
</div>
Related
I'm developing a small calculator that allows you to input a string. So it has to recognize which sign has to be executed in first place.
My problem is that somewhere and by some reason it creates a stackoverflow. I was expecting if you could help me to find out.
The first for is to give each operator a precedence, so * is more important than +. Second loop is destinated to find the sign into the string, so if input.indexOf(signos[i]) is lower or than 0 it jumps off the operator. if its dalse it goes in and put the number in left side and right side into two aux values and in the end it solves the sign and replace it into the string so at the end it shows you the result.
Thanks.
var input;
var signos = ['*', '/', '+', '-'];
var cursor = 0;
var aux1 = "";
var aux2 = "";
var auxSigno = "";
var resuelto = 0;
var encontrado = false;
function lectura(){
input = document.getElementById("ans").value;
console.log(input);
for(i = 0; i < signos.length; i++){
cursor = input.indexOf(signos[i]);
//console.log(cursor);
if (cursor > -1){
auxSigno = input.charAt(cursor);
//console.log(auxSigno);
for(j = 0; j < input.length; i++){
for(k = cursor-1; comparar(k); k--){
aux1+=input[k];
}
for(l = cursor+1; comparar(l); l++){
aux2+=input[l];
}
operar();
var cadena = aux1+auxSigno+aux2;
var auxCadena = input.replace(cadena, resuelto);
input = auxCadena;
}
}
}
console.log(input);
}
function comparar(caracter){
for(m = 0; m < signos.length; m++){
if (caracter === signos[m]){
return true;
}
}
return false;
}
function operar(){
console.log(auxSigno);
console.log(aux1);
console.log(aux2);
if (signos.indexOf(auxSigno) == 0){
resuelto = parseFloat(aux1) * parseFloat(aux2);
console.log(resuelto + " opc1");
} else if (signos.indexOf(auxSigno) == 1) {
resuelto = parseFloat(aux1) / parseFloat(aux2);
console.log(resuelto + " opc2");
} else if (signos.indexOf(auxSigno) == 2) {
resuelto = parseFloat(aux1) + parseFloat(aux2);
console.log(resuelto + " opc3")
} else if (signos.indexOf(auxSigno) == 3){
resuelto = parseFloat(aux1) - parseFloat(aux2);
console.log(resuelto + " opc4")
} else {
console.log("opc no implementada");
}
}
if the input is "6+6*8", the result should be "54", but it doesn't show anything, just keep doing the for.
Please note: This is not a question about scope, per se. I understand that in order to make the code work, I should make a deep copy of the variable board rather than assigning var tboard = board. However, I am not clear why making a shallow copy has the effect I describe below.
I am experiencing something I find baffling. Basically, a global variable (board) gets altered and I have no clue how. board is initialized in the function NewGame() (which is called from select()) as an empty array. After it is initialized, nothing else is called until the user clicks a square on the board (assuming the user has selected Xs for simplicity). When that happens, the function playerMove() is called. The baffling thing is that console.log(board) at the top of playerMove() prints out an array that has an x is the clicked position and os everywhere else (ie not empty). This is bizarre because the board is empty at the end of select() (which called NewGame()) and nothing else should happen in between. To demonstrate this, I print out the function name at the top of each function and I print out the board variable in the select() function and playerMove() function to show that it changes despite nothing else being called. Please note that to get this behavior, refresh the page (otherwise the board variable starts out full of os). I think this must be somewhat an issue of scope (because I am not making a deep copy of board) but it's strange because I have no clue what is being called that is changing the variable before it gets printed out at the top of playerMove().
Here is the link to my pen and the code: http://codepen.io/joshlevy89/pen/MKjxop?editors=101
$(document).ready(function() {
var pSym; // player's symbol
var cSym; // computer's symbol
var board;
var whosMove; // can be "player" or "computer" or "neither"
var gameOver;
setup();
$("#newgame").on('click', '#X', select);
$("#newgame").on('click', '#O', select);
$("#restart").on('click', setup);
$("table").on('click', 'td', playerMove);
function playerMove()
{
console.log('playerMove');
console.log(board);
if (whosMove === "player")
{
var val = $(this).data('value');
$('#g' + val).text(pSym);
var arr = PositionToCoords(val);
board[arr[0]][arr[1]] = pSym;
var tboard = board;
var gc = gameCheck(tboard);
if (gc>=0)
{
endGame(gc);
setTimeout(function(){setup();}, 1000);
return;
}
whosMove = "computer";
computerMove();
}
}
function computerMove() {
console.log('computerMove');
//var p1 = Math.floor(Math.random() * 3);
//var p2 = Math.floor(Math.random() * 3);
var tboard = board;
var pos = chooseMove(tboard);
var arr = PositionToCoords(pos);
board[arr[0]][arr[1]] = cSym;
DrawPosition(arr[0], arr[1], cSym);
var tboard = board;
var gc = gameCheck(tboard);
if (gc>=0) {
endGame(gc);
setTimeout(function(){setup();}, 1000);
return;
}
whosMove = "player";
}
function chooseMove(inboard) {
console.log('chooseMove');
// get the possible moves
var moves=[];
var scores = [];
for (var i=1;i<10;i++) {
var arr = PositionToCoords(i);
if (inboard[arr[0]][arr[1]] === undefined) {
moves.push(i);
var tboard = inboard;
tboard[arr[0]][arr[1]] = cSym;
var gc = gameCheck(tboard);
scores.push(gc);
}
}
//console.log(moves);
//console.log(scores);
return moves[0]; // TEMPORARY
}
function endGame(gc) {
console.log('endGame');
var str;
if (gc===1) { // somebody won
if (whosMove==="player"){
str = "You Won!"
}
else {
str = "You Lost :(";
}
}
else if (gc === 0){//draw
str = "It's a draw."
}
html = '<div id="closer">' + str + '</div>';
$('#endgame').html(html);
}
function gameCheck(tboard) {
console.log('gameCheck');
// get symbol to check for
var sym;
if (whosMove === "player") {
sym = pSym;
} else {
sym = cSym;
}
// check if in a row
var hrow;
var vrow;
// check for horizonal row
for (var i = 0; i < 3; i++) {
hrow = true;
vrow = true;
for (var j = 0; j < 3; j++) {
if (tboard[i][j] !== sym) {
hrow = false;
}
if (tboard[j][i] !== sym) {
vrow = false;
}
}
if ((hrow) || (vrow)) {
return 1;
}
}
var fdrow = true;
var bdrow = true;
for (var i = 0; i < 3; i++) {
if (tboard[i][i] !== sym) {
fdrow = false;
}
if (tboard[i][2 - i] !== sym) {
bdrow = false;
}
}
if ((fdrow) || (bdrow)) {
return 1;
}
// otherwise, check if board is full
var full = true;
for (var i = 1; i < 10; i++) {
var arr = PositionToCoords(i);
if (tboard[arr[0]][arr[1]] === undefined) {
full = false;
break;
}
}
if (full === true) {
return 0;
}
// if neither 0 (tie) or win (1), return -1 (game not over)
return -1;
}
function select() {
console.log('select');
pSym = $(this).data('value');
$('#newgame').html('');
NewGame();
console.log(board);
}
function setup() {
console.log('select');
$('#endgame').html('');
html = '<div id="opener">Xs or Os? <div id="buttons">';
html += '<div id="X" data-value="X" class="btn btn-default">Xs</div>';
html += '<div id="O" data-value="O" class="btn btn-default">Os</div>';
html += '</div></div>';
$('#newgame').html(html);
}
function NewGame() {
console.log('NewGame');
$('td').empty();
board = new Array(3);
for (i = 0; i < 3; i++) {
board[i] = new Array(3)
};
if (pSym === "X") {
cSym = "O";
whosMove = "player";
} else {
cSym = "X";
whosMove = "computer";
computerMove();
}
}
function DrawPosition(p1, p2, sym) {
console.log('DrawPosition');
var pos = p1 * 3 + (p2 + 1);
$("#g" + pos).text(sym)
}
function PositionToCoords(pos) {
console.log('PositionToCoords');
var p1 = Math.ceil(pos / 3) - 1;
var p2 = ((pos - 1) % 3);
var arr = [p1, p2];
return arr;
}
});
Thanks in advance.
Simply add the break in the for loop fixes the problem. Am I missing anything?
function chooseMove(inboard) {
console.log('chooseMove');
// get the possible moves
var moves = [];
var scores = [];
for (var i = 1; i < 10; i++) {
var arr = PositionToCoords(i);
if (inboard[arr[0]][arr[1]] === undefined) {
moves.push(i);
var tboard = inboard;
tboard[arr[0]][arr[1]] = cSym;
var gc = gameCheck(tboard);
scores.push(gc);
break; // <<<<<<<<<<<< This break guarantees that the computer only makes one move
}
}
//console.log(moves);
//console.log(scores);
return moves[0]; // TEMPORARY
}
I have a function to select a random number from 0 to 45 and then I show the div with the specific ID. It's working fine but it repeats a number.
Can anyone advise so it won't repeat numbers?
I call the function onclick like this
$(".skip").click(function () {
scared++;
$("#counter").html("My current count is: " + dared);
var d = 50;
/*$(".question").addClass("hideMe");
$(this).parents("div").next("div").removeClass("hideMe");*/
var r = Math.round(Math.random() * 44) + 1;
var newquestion = "q" + r;
$('.active').removeClass("active");
$("#" + newquestion).addClass("active");
if (scared > 44) {
$('.main').fadeOut('fast');
$('.logo').switchClass("logo", "share");
$('.progress').css("display", "none");
$('.share-game').css("display", "block");
$('.hero').css("right", "-240px");
$('#score-total').html(score + '');
} else {
}
$('.red-line').append('<div id="children' + (d++) + '" class="red"></div>');
return false;
});
You can see what i did.
var usedNumbers = [];
var randomNumbers = [];
$(function() {
//Getting 20 random numbers
for (i = 0; i < 20; i++) {
randomNumbers.push(getRandomNumber());
}
console.log(randomNumbers);
function getRandomNumber() {
var hasInArray = true;
do {
var r = Math.round(Math.random() * 44) + 1;
if (usedNumbers.indexOf(r) === -1) {
usedNumbers.push(r);
hasInArray = false;
return r;
}
} while (hasInArray === true);
}
});
Warning to not set the numbers of randomnumbers more then what you want to get, because that will cause an infinite loop!
Use an array to capture the used numbers and then check that array on each click, generating a new number if that one is found. It resets back to an empty array when it is full.
var savedNumbers = [];
function getRandom() {
if (savedNumbers.length === 45) {
savedNumbers = [];
}
var r = Math.round(Math.random() * 44) + 1;
if (savedNumbers.indexOf(r) > -1) {
getRandom();
} else {
savedNumbers.push(r);
return r;
}
}
DEMO
JSFiddle - SSCCE
function restoreTitle() {
for (var i = 0; i < 4; i++) {
clicks[i] = false;
letter = $('#title-wrapper p[index="' + i + '"]');
letter.css('cursor', "pointer");
}
animateTitle();
}
function animateTitle() {
for (var i = 0; i < 4; i++) {
letter = $('#title-wrapper p[index="' + i + '"]');
direction = i < 2 ? 1 : -1;
letter.css('right', 50 * direction + "%");
doAnimateLetter(i, letter, direction);
}
}
function doAnimateLetter(i, letter, direction) {
loop(function(){
var current = letter.css('right').replace("%", "");
var incoming = parseInt(current) - (5 * direction);
letter.css('right', incoming + "%");
var completed = incoming == 0;
if(completed) letter.fadeTo(animation_speed, 1);
return !completed;
});
}
function loop(run) {
if (run.apply()) requestAnimationFrame(function () {
loop(run);
});
}
What I would like to achieve is for the two left letters to fly in from the left and for the two right ones to fly in from the right. I can't find where I'm going wrong.
I meet a trouble with a function. actually I need to make this function to perform a calculation on some text fields. When I worked on a single line no problems. But recently, someone asked to make a table with multiple lines (one line can be added dynamically) so, I do the following function so that it can not only duplicate line but id change all the fields concerned, so I add class to these fields. therefore I proceed as follows:
function clone(line) {
newLine = line.cloneNode(true);
line.parentNode.appendChild(newLine);
var tab = document.getElementsByClassName('libelle_debours')
var i = -1;
while (tab[++i]) {
tab[i].setAttribute("id", "_" + i);
};
var cab = document.getElementsByClassName('ht_no_tva')
var j = -1;
while (cab[++j]) {
cab[j].setAttribute("id", "_" + j);
};
var dab = document.getElementsByClassName('ht_tva')
var k = -1;
while (dab[++k]) {
dab[k].setAttribute("id", "_" + k);
};
var eab = document.getElementsByClassName('taux')
var l = -1;
while (eab[++l]) {
eab[l].setAttribute("id", "_" + l);
};
var fab = document.getElementsByClassName('tva')
var m = -1;
while (fab[++m]) {
fab[m].setAttribute("id", "_" + m);
};
}
function delRow() {
var current = window.event.srcElement;
//here we will delete the line
while ((current = current.parentElement) && current.tagName != "TR");
current.parentElement.removeChild(current);
}
The problem in fact is the second function that is used to make the calculation:
function calcdebours() {
var taux = document.getElementById('debours_taux_tva').value;
var ht_no_tva = document.getElementById('debours_montant_ht_no_tva').value;
var ht_tva = document.getElementById('debours_montant_ht_tva').value;
var tva = Math.round((((ht_tva) * (taux)) / 100) * 100) / 100;;
if (taux == '') {
taux = 0;
}
if (ht_no_tva == '') {
ht_no_tva = 0;
}
if (ht_tva == '') {
ht_tva = 0;
}
document.getElementById('debours_montant_tva').value = tva;
document.getElementById('debours_montant_ttc').value = (tva) + parseFloat(ht_tva) + parseFloat(ht_no_tva)
}
function
montant_debours() {
var ttc = document.getElementById('debours_montant_ttc').value;
var ttc2 = document.getElementById('debours_montant_ttc2').value;
if (ttc == '') {
var ttc = 0;
} else {
var ttc = document.getElementById('debours_montant_ttc').value;
}
if (ttc2 == '') {
var ttc2 = 0;
} else {
var ttc2 = document.getElementById('debours_montant_ttc2').value;
}
tx = parseFloat(ttc) + parseFloat(ttc2);
document.getElementById('ttc_cheque').value = Math.round(tx * 100) / 100;
}
As Id are not the same, do I have to create as many functions
there are lines?
Is it possible to fit a single function to process each line?
If so can you tell me how?
If I'm not mistaken you can use for loop and append increment to the end of element's id. Like this:
trs = document.getElementById('container Id').getElementsByTagName('tr');
For (var i = 1, i <= trs.length; i++)
{
var el = document.getElementById('debours_montant_ttc' + i);
}