Intercept event on an image JS has put itself

Hi,

Then, my kingdom game with rats in JS is on the road. I even started to make it have "turns". Work well (thanks again for the innerHTML solution, guys).

Actually, to wait between turns, i'm using an "alert box". But i want something else.

What i'm wanting is :

- The script put an image "next turn" on the page, with a createElement.
=> work well, the image appear.

Then i put a loop for the turns.
=> work well too. You can choose starting turn, ending turn, increment, and if there is a turn "0" (when starting is negative and ending positive, by example. You know year 0 didn't exist, of course).


My problem is now :

How do my script can intercept an event (a click will do) on a image it put itself in the page ?

Of course, i searched for explanations and tutorials, but those i found speak of an "onclick" on the image calling a new JS script, and i don't know if trading data between scripts is even possible.

An idea ?

Something like this:

Code:

---

document.getElementById('someId').innerHTML = '<img src="SomeImage.png" onlick="doSomeJS()" />";

---

I understand, but what i want is a way to make the same script intercept the "onclick" (onlick ? You wish !). With your example, a click call another script.


I want, basically, that :

JS script put the image on screen.

JS script enter an infinite loop (a while waiting for a condition==true, by example).

When the image is clicked, the condition of the loop is put on "true", then the script exit the loop.


Sorry if it wasn't clear enough. English is not my primary language.

I am 99% sure this cannot be done because until the function has ran, it pretty much ignores all input. What is your goal, maybe I could help think of an alternative.

File : The game. Beware, the script is NOT optimized (no cache for the pictures). On my Linux computer, it's too much for Opera, but good for Firefox.


Basically, it's a kingdom game (like "Civilization" and so). I want him to be only client-side : The player download it, put him in his computer, then open the html file (pictures are in subdirectories).

The script begin by drawing the map, putting ground, trees, cities. Each element has is own ID.

After it has finished, he run a loop for the turns, and for now put the actual turn number on screen (no problem with that).

I tested it by putting an alert box in the loop : Work well, the game stop at each turn until a click on the box button.

But an alert box is ugly, and the player can wanting to do a lot of others things than clicking on an alert box button, like clicking on a city or an unit, opening a menu, and so on.

Then i though i could make the script waiting for events like that :
just before the end of the first loop, i put another loop (i think of a while, that wait for an event, like clicking on the "next turn" button. If the player click on the "next turn" button, the condition is met and the script exit the waiting loop, and go for his next iteration of the first loop.

I though, then, to put in the waiting lood some coding for capturing others events, like clicks on a city then call this function, click on an unit then call that function, etc.

Well, like that :

Code:

---

FOR loop (that's the loop the the games turn. That work well).

Show turn number.
Shop total population.
Waiting loop (exit on a event "click on the element with the ID X").

if event "click on City X" ix true, then go to function "show city panel".

end Waiting loop.

end FOR.

---

Oh got, i though my Internet connection was cut, but it was just the first box crash in months. My heart...

After hard brainstorming, i finally discovered how to do... to be kicked in the balls by the fact that when a javascript run too long (and too long mean very short), the browser complain and ask for stop it.

I think i'll look now for a mean to put datas directly on the page, maybe by using the elements' array. I will see.


My idea (work, until the browser complain) was that :

When the JS create the image, add a :


case8[2].setAttribute('onclick','tour()')
case8[2].setAttribute('name','1')


Then in the turn loop, i add a waiting loop :

var i=1;
while (i==1)
{
i=document.getElementById('case8[2]').getAttribute('name');
}
i=1;


then the little function here do the job :


function tour()
{
document.getElementById('case8[2]').setAttribute('name','2');
}


Mean :

When JS put the "next turn" image on the screen, it add it an onclick calling a new "tour" function.
Then it add, on the same image, an attribute called "name" with the value "1".

When the player click on the image, the function "tour" is called, and change the image attribute "name" from 1 to 2.

BUT, in the waiting loop, a "getAttribute" read periodically for the value of "name", and put it in the "i" variable.
And what happen when i == 2 ? The while of the waiting loop is FALSE, then loop exit for the next turn of the game.


That was so cool. I'm pretty sad actually, because i that was a big work for me, and damnit that worked !


That mean creating an entire game with ONE JS is probably impossible, because browsers don't accept "long" pauses.
As i said, i will look now in storing datas directly in the page, probably in images attributes, or maybe in an hidden layer, i don't know for now.

See ya later, i need to drown myself (in movies), now.

You cannot infinitely loop JS. You can, however, use setInterval and setTimeout pointing to a seperate function to make the browser "wait".

Thanks Gray1989, but i found another solution :

The main (onload) JS just put the map and games elements. He create, by example, the "next turn" button and "setattribute" with elements like "last turn", "present turn", "first turn", etc.
Then this script end and the player has the hand.

Then by clicking on the "next turn" button, you call another script that read the value of the "present turn" of the "next button", add the increment (do some unspeakables others things), then display the turn number (by an innerHTML), et put this number in the "present turn" attribute.


I hope i'm clear. I think separating activities (turns calculations, city panel, unit moves, battles, etc.). is more do-able if i can find quickly the data when i need them.

For now, i read a page on #menu and queryselector. Hope that help me.