Page 1 of 1

Javascript in chrome

Posted: Sat Oct 11, 2014 8:28 pm
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>

Re: Javascript in chrome

Posted: Sun Oct 12, 2014 2:59 pm
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?

Re: Javascript in chrome

Posted: Sun Oct 12, 2014 4:06 pm
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);

Re: Javascript in chrome

Posted: Sun Oct 12, 2014 4:32 pm
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?

Re: Javascript in chrome

Posted: Sun Oct 12, 2014 5:26 pm
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.

Re: Javascript in chrome

Posted: Sun Oct 12, 2014 5:29 pm
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

Re: Javascript in chrome

Posted: Sun Oct 12, 2014 6:34 pm
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

Re: Javascript in chrome

Posted: Sun Oct 12, 2014 6:45 pm
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.

Re: Javascript in chrome

Posted: Sun Oct 12, 2014 8:28 pm
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.

Re: Javascript in chrome

Posted: Sun Oct 12, 2014 9:40 pm
by Epiales
Okay, small video showing what it looks like.

https://www.youtube.com/watch?v=5iCEOE2 ... e=youtu.be