Javascript in chrome

Place for questions and answers for all newcomers and new coders. This is a free for all forum, no question is too stupid and to noob.
Post Reply
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Javascript in chrome

Post by Epiales »

Is there a setting that blocks this? My javascript function I wrote works in FF and IE just fine, but nothing at all works in chrome?

Code: Select all

<script type="text/javascript">

setInterval  ( "bulletattack()", 5000 );

function bulletattack ( )
{
  document.getElementById("lose_bullets").innerHTML = "<?php echo $outputList; ?>";
}
</script>
<div id="lose_bullets" style="height: 1.5em; font-size: 16px; color: red;">
</div>
Nothing fancy, but a work in progress!

http://gameplaytoday.net
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Javascript in chrome

Post by Jackolantern »

Weird...typically things will work in Chrome but not work in IE lol.

Have you tried using the debugger in Chrome to see if it is even picking the script up?
The indelible lord of tl;dr
User avatar
kaos78414
Posts: 507
Joined: Thu Jul 22, 2010 5:36 am

Re: Javascript in chrome

Post by kaos78414 »

Not sure why it isn't working in Chrome, but I want to point out that you have a weird situation here. Set Interval is going to call that method several times, but $outputList is only loaded once, so the content of that div will never change. You should be using setTimeout instead. Try this:

Code: Select all

var bulletattack = function () {
  document.getElementById('lose_bullets').innerHTML = '<?php echo $outputList; ?>';
};

setTimeout(bulletattack, 5000);
w00t
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Javascript in chrome

Post by Epiales »

kaos78414 wrote:Not sure why it isn't working in Chrome, but I want to point out that you have a weird situation here. Set Interval is going to call that method several times, but $outputList is only loaded once, so the content of that div will never change. You should be using setTimeout instead. Try this:

Code: Select all

var bulletattack = function () {
  document.getElementById('lose_bullets').innerHTML = '<?php echo $outputList; ?>';
};

setTimeout(bulletattack, 5000);
The content of the div changes based upon the result of the players attack: Win/Lose... Here is what it shows:

[YouTube]https://www.youtube.com/watch?v=72VMyPF ... e=youtu.be[/YouTube]

The progress bar and results are in the div at the bottom. I did change it to setTimeout though.. but still no difference in chrome. It shows the progress bar but will not do the attack for whatever reason. Maybe it's just because it's on my localhost and not online. I'll try and update the server online a bit later.

Also, it shows the progress bar upon page load, before I even click the javascript, so is there a way to keep the image from showing until after the attack is clicked?
Nothing fancy, but a work in progress!

http://gameplaytoday.net
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Javascript in chrome

Post by Jackolantern »

I guess another piece of Javascript not shown would change it? Because he is right that the code you showed us would never change since the PHP runs only once on the server side.
The indelible lord of tl;dr
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Javascript in chrome

Post by Epiales »

Jackolantern wrote:I guess another piece of Javascript not shown would change it? Because he is right that the code you showed us would never change since the PHP runs only once on the server side.
I was thinking that it could do a ECHO the IMAGE of the progress bar and wait 5 seconds and then ECHO the results of the attack? There should be a way to do this with setInterval or something???? Maybe? lol
Nothing fancy, but a work in progress!

http://gameplaytoday.net
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Javascript in chrome

Post by Epiales »

Okay, I am a bit closer then before. I tried using it this way while creating two function:

Code: Select all

 <input type="submit" value="Attack Player"  onclick="bulletattack(); progressbar();">
1st Function is the progressbar:

Code: Select all

<script>
setTimeout   ( "progressbar()", 2000 );
function progressbar ( )
{
  document.getElementById("lose_bullets").innerHTML = "<?php echo $image; ?>";
sleep(10);
}
</script>
2nd Function displays the results of the attack:

Code: Select all

<script>
setTimeout   ( "bulletattack()", 10000 );
function bulletattack ( )
{
  document.getElementById("lose_bullets").innerHTML = "<?php echo $outputList; ?>";
}
</script>
But the image is still loading upon page load. I thought having it in a function, it wouldn't run until the button was clicked?

So I figured php would run first, so I tried it in html

Code: Select all

  document.getElementById("lose_bullets").innerHTML = "<img src='images/progressbar1.gif'>";
Does the same thing. I need that image not to show upon page load grrrrrrr
Nothing fancy, but a work in progress!

http://gameplaytoday.net
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Javascript in chrome

Post by Jackolantern »

Epiales wrote:
Jackolantern wrote:I guess another piece of Javascript not shown would change it? Because he is right that the code you showed us would never change since the PHP runs only once on the server side.
I was thinking that it could do a ECHO the IMAGE of the progress bar and wait 5 seconds and then ECHO the results of the attack? There should be a way to do this with setInterval or something???? Maybe? lol
No, you can't do that. Remember, even though you can mix PHP in the Javascript code, they work in totally different ways and at totally different times. The PHP runs only once, when the initial request comes into the server. The PHP runs, and writes the HTML/CSS/Javascript response to send to the server. For example:

Code: Select all

document.getElementById("lose_bullets").innerHTML = "<?php echo $image;
This code will add the value of the $image variable into this line of text while the PHP is executing on the server (not while the Javascript is executing). Say the $image variable holds "progress.png". Once the PHP is done executing, this is what is sent to the browser:

Code: Select all

document.getElementById("lose_bullets").innerHTML = "progress.png";
Once the code reaches the browser, then the Javascript is executed, and "progress.png" is hard-coded into the Javascript, meaning you would be calling a static piece of Javascript over and over with the interval. It won't change because the PHP has already been executed.

PHP and Javascript don't interact like that. The only interaction they can have is that PHP can be used to write Javascript code, but once that Javascript reaches the browser, it is set in stone. The PHP is done executing and won't change again.

Anything that requires time, or needs to be checked again against user actions must be done 100% in Javascript. Or it could be done with PHP through further page loads. But just remember that PHP only runs on the server once to generate the HTML/CSS/Javascript response to the browser.

EDIT: After looking a bit more at what you are wanting to do (click a button to attack other players), it looks like you will need to use AJAX for that. The easiest way to implement AJAX is to use jQuery, so I would suggest checking that out. AJAX is the only way that the Javascript executing on the page can call back to PHP scripts on the server.
The indelible lord of tl;dr
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Javascript in chrome

Post by Epiales »

I have it figured out how I wanted it:

Code: Select all

<script type="text/javascript">

window.setTimeout("document.getElementById('lose_bullets').style.visibility = 'visible';",1500);
window.setTimeout("document.getElementById('lose_bullets1').style.visibility = 'visible';",3000);
window.setTimeout("document.getElementById('lose_bullets2').style.visibility = 'visible';",5000);
window.setTimeout("document.getElementById('lose_bullets3').style.visibility = 'visible';",5000);
window.setTimeout("document.getElementById('lose_bullets4').style.visibility = 'visible';",5000);

</script>

<div id="lose_bullets" style="height: 2em; background-color:#666666; font-size: 16px; color: black; vertical-align:middle" align="center">
Your battle has begun!
</div>

<div id="lose_bullets1" style="visibility: hidden; height: 2em; background-color:#666666; font-size: 16px; color: black; vertical-align:middle" align="center">
<?php echo $outputList; ?>
</div>

<div id="lose_bullets2" style="visibility: hidden; height: 2em; background-color:#666666; font-size: 16px; color: black; vertical-align:middle" align="center">
<?php echo $outputList2; ?>
</div>
Thanks for the help :)

Only problem still is that Chrome won't echo the results but FF and IE will :oops: :oops: :oops:

And I thought I had it right... it still loads on page load, but doesn't echo the output because they haven't hit the attack yet. What did I do wrong now? lmao

Okay I made the background transparent basically, so it won't show the divs upon page load like they did. Divs were background grey, so when you loaded the page, it showed the grey divs after the timer. Now it does not. YAY! lol :mrgreen: :mrgreen: :mrgreen: I guess I won't do a progress bar, but it is working how I want now... cept stupid chrome.
Nothing fancy, but a work in progress!

http://gameplaytoday.net
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Javascript in chrome

Post by Epiales »

Okay, small video showing what it looks like.

https://www.youtube.com/watch?v=5iCEOE2 ... e=youtu.be
Nothing fancy, but a work in progress!

http://gameplaytoday.net
Post Reply

Return to “Beginner Help and Support”