Develop Reference

How to detect which Sprite got clicked on

Im trying to figure out how to know which Sprite got clicked on
var current_dots:Array<Sprite>= [];
for(i in 0...4){
var page = new Sprite();
current_dots.push(page);
page.on('pointerdown', dot_click);
this.addChild(page);
}
function dot_click(){
trace("CLICKED");
}
since each sprite was declared in the for-loop im not sure how to identify which one is getting clicked

I figured a way to do it was like this
function dot_click(e:InteractionEvent){
for( i in 0...current_dots.length){
if(current_dots[i] == e.currentTarget) {
trace("Clicked")
}
}
}
had to pass the interactive parameter

How to change a span content more than once using javascript [duplicate]

This question already has an answer here:
Why doesn't my equality comparison using = (a single equals) work correctly? [duplicate]
(1 answer)
Closed 3 years ago.
I have a pause button that i want the icon to change on click between play and pause icons. The first click works and changes the icon from a play arrow to a pause icon but it will only change once. seemingly the else part of the function doesn't work
The icons used are from materializeCSS framework. I've seen similar questions but couldn't find a solution that worked for me. Not using span and instead using the id of the button in the JS code didn't work for me. it didn't load the icon and just returned plain text "pause" and "play_arrow".
the actual pausing functionality works fine, just a problem with the icons.
Sorry if there is a solution posted here already but im new to programming and couldn't find anything myself that matched my problem.
<button class="btn" id="pauseButton" onclick="pause()"><i class="material-icons white-text"><span id="playPause">play_arrow</span></i></button>
var pauseBoolean = 1;
function pause() {
pauseBoolean *= -1;
if (document.getElementById("playPause").innerHTML ="play_arrow") {
document.getElementById("playPause").innerHTML ="pause";
} else {
document.getElementById("playPause").innerHTML ="play_arrow";
}
}
i expected the button to change its content between a pause icon and play icon on each click. Actual result is one change and then it gets stuck. no error messages

You're accidentally assigning the value that you mean to be doing a comparison with. You need:
if (document.getElementById("playPause").innerHTML === "play_arrow") {
By the way, instead of looking up the element over and over again, you should try something like:
var pauseBoolean = 1;
var playPauseBtn = document.getElementById("playPause");
function pause() {
pauseBoolean *= -1;
if (playPauseBtn.innerHTML === "play_arrow") {
playPauseBtn.innerHTML = "pause";
} else {
playPauseBtn.innerHTML = "play_arrow";
}
}
Further, you don't even need to do the comparison to innerHTML, since pauseBoolean keeps track of the state for you. And why not make it a real boolean?
var paused = true;
var playPauseBtn = document.getElementById("playPause");
function pause() {
paused = !paused;
playPauseBtn.innerHTML = paused ? "play_arrow" : "pause";
}

Use this script
function pause() {
if (document.getElementById("playPause").innerHTML =='play_arrow') {
document.getElementById("playPause").innerHTML ='pause';
} else {
document.getElementById("playPause").innerHTML ='play_arrow';
}
}

Trying to make the clock function on click

And thanks for stopping by.
I've been trying to add a feature, or function, to a project that I'm working on, but I just can't wrap my head around it.
When my project loads I want the user to activate the time as soon as they move, or click, one of the orbs -- not as soon as the project loads. I know there's an onClick or click event, but I'm having trouble implementing it on the js code. I've gone as far as commenting-out or "greying" entire functions to test things out.
Here's some of the time code:
function clockStart() {
numberOfSecs = setInterval(function () {
seconds.text(`${second}`)
second = second + 1
}, 1000);
}
function rewindSec(seconds) {
if (seconds) {
clearInterval(seconds);
}
}
gameStart();
// GAMES BEGIN!!!
function gameStart() {
var cards = shuffle(listOfCards);
deckOfCards.empty();
match = 0;
Moves = 0;
moveNum.text("0");
ratingStars.removeClass("fa-angry").addClass("fa-star");
for (var i = 0; i < cards.length; i++) {
deckOfCards.append($('<li class="card"><i class="fab fa-' + cards[i] + '"></i></li>'))
}
sourceCard();
rewindSec(numberOfSecs);
second = 0;
seconds.text(`${second}`)
clockStart();
};
Here's a link to the project that I'm talking about:
Full Page View: https://codepen.io/idSolomon/full/RYPZNp/
Editor View: https://codepen.io/idSolomon/pen/RYPZNp/?editors=0010
WARNING: Project not mobile-friendly. At least not yet.
If someone can help me out with this, a thousand thank yous will come your way.
Thanks!

You can Change the event of starting the clock at another position
First remove the clockStart() function from the gameStart() method
seconds.text(`${second}`)
//clockStart();
if have added an Extra variable to detect if the clock is started or not
var isClockStarted=false;
The following code will start the timer when a card is clicked:
var sourceCard = function () {
deckOfCards.find(".card").bind("click", function () {
if(!isClockStarted)
clockStart();
The Bellow Code will check if the timer is started or not.
function clockStart() {
if(!isClockStarted){
isClockStarted=true;
numberOfSecs = setInterval(function () {
seconds.text(`${second}`)
second = second + 1
}, 1000);
}
}
I have found that you are not stopping the timer even after the game finishes
If canceled a game it starts timer again //toCheck

Permanent change to 1 div out of many of the same

I have stumbled on to a problem which I cannot find the solution to, for some time now, and it is kind of a drag, but hey, I will try to be as precice as possible, there is no stupid question so here goes.
This is a DIV table for appointments and a page, these green circles are divs also and there are 209 divs total, divs are clickable and once clicked they open up a new page in a new tab which asks the user to to enter his info Name, Last Name etc. and make an appointment.
When the user enters what is asked of him he clicks a button makes an appointment and the div that has been clicked in the previous "table" page permanently changes color to red, so when someone else visits the "table" page sees that the time for the appointment is unavailable.
I have come up with this.
TABLE PAGE CODE:
<script type="text/javascript">
window.onload = function () {
var myLoadedColor = localStorage.getItem('myDataStorage');
document.getElementById('L1').style.backgroundColor = myLoadedColor;
var d = document.getElementsByClassName("circleBase type1");
for(var i = 0; i < d.length; i++) {
d[i].onclick = function() {
window.open("EnterInformation.html");
}
}
}
window.addEventListener('storage', function (event) {
if (event.storageArea === localStorage) {
var myLoadedColor = localStorage.getItem('myDataStorage');
document.getElementById('L1').style.backgroundColor = myLoadedColor;
}
}, false);
APPOINTMENT PAGE CODE:
function SaveInfo() {
localStorage.Yritys = $('#Yritys').val();
localStorage.Henkilönimi = $('#Henkilönimi').val();
localStorage.Asema_yrityksessa = $('#Asema_yrityksessa').val();
localStorage.Puhelin_Nr = $("#Puhelin_Nr").val();
localStorage.e_Mail = $('#e_Mail').val();
localStorage.Keskustelun_aihe = $('#Keskustelun_aihe').val();
alert("You have successfully made an appointment");
}
function closeSelf() {
window.close(this);
}
function changeColor() {
myCustomColor = 'red';
localStorage.setItem('myDataStorage', myCustomColor);
}
With this code It works but only for 1 div the first one.
My question is do I have to add Id to all of the 209 divs I have and then copy this code 209 times for each and every one of the divs and create a specific storage for each of them? or is there an easier way to do this?
Ajax is like an acquaintance to me.
Any advice would be helpful if it helps me achieve this goal, because I can't sleep and keep thinking about the ways to end the agony!

How to dynamically change tab title when it is not selected?

I want to display dynamic information (score) in the window tab of a javascript games running in a browser (chrome) : my goal is to run several instances of the game in different tabs, running in parallel, and to be able to see the current scores in the tab titles. I tried :
document.title = score
... but it works only in the selected tab, the other one are not refreshed until selected (although the games are running well in background).
==> is there a way to force the update of the tab titles... even if not selected ?

I found couple of same questions on the http://stackoverflow.com but they did not work for me.
You can find your solution here: http://www.raymondcamden.com/2010/10/19/Using-JavaScript-to-update-the-browser-window-title-when-the-user-is-away
So, basically that kind of code will work:
var focused = true;
var baseTitle = "";
var chatsMissed = 0;
//I'm the fake function that represents some process. We randomly determine if a new chat happened
function fakeStuff() {
if(Math.random() > 0.5) {
if(!focused) {
chatsMissed++;
window.document.title = baseTitle + " ("+chatsMissed+")";
}
}
}
$(document).ready(function() {
//store the base title
baseTitle = window.document.title;
//When the window is focused...
$(window).focus(function() {
focused = true;
// window.document.title = baseTitle;
//chrome bug: http://heyman.info/2010/oct/7/google-chrome-bug-when-setting-document-title/
setTimeout(function() {
document.title = baseTitle;
}, 100);
chatsMissed = 0;
});
//When the window is blurred...
$(window).blur(function() {
focused = false;
});
//setup a process
window.setInterval('fakeStuff()',2000);
})
Unfortunately JSfiddle do not support title changing. But I tested, and it works.