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.

Javascript in chrome

Postby Epiales » Sat Oct 11, 2014 3:28 pm

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
Epiales
 
Posts: 1119
Joined: Wed Aug 14, 2013 8:38 pm
Has thanked: 62 times
Been thanked: 6 times

Re: Javascript in chrome

Postby Jackolantern » Sun Oct 12, 2014 9:59 am

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
Jackolantern
 
Posts: 10893
Joined: Wed Jul 01, 2009 6:00 pm
Location: Houston, TX
Has thanked: 22 times
Been thanked: 92 times
Blog: View Blog (1)

Re: Javascript in chrome

Postby kaos78414 » Sun Oct 12, 2014 11:06 am

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
kaos78414
 
Posts: 507
Joined: Thu Jul 22, 2010 12:36 am
Location: Dallas, TX
Has thanked: 0 time
Been thanked: 2 times

Re: Javascript in chrome

Postby Epiales » Sun Oct 12, 2014 11:32 am

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=72VMyPF1snI&feature=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
Epiales
 
Posts: 1119
Joined: Wed Aug 14, 2013 8:38 pm
Has thanked: 62 times
Been thanked: 6 times

Re: Javascript in chrome

Postby Jackolantern » Sun Oct 12, 2014 12:26 pm

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
Jackolantern
 
Posts: 10893
Joined: Wed Jul 01, 2009 6:00 pm
Location: Houston, TX
Has thanked: 22 times
Been thanked: 92 times
Blog: View Blog (1)

Re: Javascript in chrome

Postby Epiales » Sun Oct 12, 2014 12:29 pm

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: Wed Aug 14, 2013 8:38 pm
Has thanked: 62 times
Been thanked: 6 times

Re: Javascript in chrome

Postby Epiales » Sun Oct 12, 2014 1:34 pm

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
Epiales
 
Posts: 1119
Joined: Wed Aug 14, 2013 8:38 pm
Has thanked: 62 times
Been thanked: 6 times

Re: Javascript in chrome

Postby Jackolantern » Sun Oct 12, 2014 1:45 pm

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
Jackolantern
 
Posts: 10893
Joined: Wed Jul 01, 2009 6:00 pm
Location: Houston, TX
Has thanked: 22 times
Been thanked: 92 times
Blog: View Blog (1)

Re: Javascript in chrome

Postby Epiales » Sun Oct 12, 2014 3:28 pm

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: Wed Aug 14, 2013 8:38 pm
Has thanked: 62 times
Been thanked: 6 times

Re: Javascript in chrome

Postby Epiales » Sun Oct 12, 2014 4:40 pm

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
User avatar
Epiales
 
Posts: 1119
Joined: Wed Aug 14, 2013 8:38 pm
Has thanked: 62 times
Been thanked: 6 times

Next

Return to Beginner Help and Support

Who is online

Users browsing this forum: No registered users and 1 guest

cron

x