Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Making Javascript code working

    Hi there, i'm little new in all this stuff with javascrip, html, css, etc...

    I have a code of javascript and i don't know why is not working, i'm seeying only text, no something like fresh or any else, just text.


    This is the code :

    Code:
     $(document).ready(function() {
    	var responses = [];
    
    	responses[0] = "It is certain";
    	responses[1] = "It is decidedly so";
    	responses[2] = "Without a doubt";
    	responses[3] = "Yes definitely";
    	responses[4] = "You may rely on it";
    	responses[5] = "As I see it, yes";
    	responses[6] = "Most likely";
    	responses[7] = "Outlook good";
    	responses[8] = "Yes";
    	responses[9] = "Signs point to yes";
    	responses[10] = "Reply hazy try again";
    	responses[11] = "Ask again later";
    	responses[12] = "Better not tell you now";
    	responses[13] = "Cannot predict now";
    	responses[14] = "Concentrate and ask again";
    	responses[15] = "Don't count on it";
    	responses[16] = "My reply is no";
    	responses[17] = "My sources say no";
    	responses[18] = "Outlook not so good";
    	responses[19] = "Very doubtful";
    	
    	$(document).on('click', '#btn', function(){
    		$('#btn').prop('disabled', true);
    
    		$('#btn').val('Consulting The Spirits');
    		
    		$('#answerWrapper').fadeOut('fast', function() {
    			var a = 0;
    		
    			var t = setInterval(function() {genNum()}, 100);
    			
    			function genNum() {
    				if(a < 10) {
    					var _response = responses[Math.floor((Math.random() * responses.length) + 1)].toString();
    					$('#answerWrapper').html(_response);
    					++a;
    				} else {
    					clearTimeout(t);
    					$('#btn').prop('disabled', false);
    					$('#answerWrapper').fadeIn();
    					$('#btn').val('Ask the 8 Ball!');
    				}
    			}		
    		});		
    	});
    });
    What i have to do to make it working?

    I'm very confused.

  • #2
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ops, flash i wanted to sey, not fresh.

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Ahem ... you want to see flash? There is nothing in the code implying that you'd get flash content ...

    Analyzing the code ...

    - You create an array with 20 text elements
    - On click on a button, you disable this button and set the text "Consulting The Spirits" on it
    - Then you fade out the answerWrapper element and set a to 0
    - Every 100ms after the fade out finished, you execute the following code 10 times
    - Insert a random element from the 20 element array into #answerWrapper

    - After the 10th element has been inserted, show the #answerWrapper again and enable the button again

    So: Text only .... noooo flash. Why did you expect to get flash?

    EDIT: You should use clearInterval rather than clearTimeout, because you started an interval
    Code:
    			
    			function genNum() {
    				if(a < 10) {
    					var _response = responses[Math.floor((Math.random() * responses.length) + 1)].toString();
    					$('#answerWrapper').html(_response);
    					++a;
    				} else {
    					clearInterval(t);
    					$('#btn').prop('disabled', false);
    					$('#answerWrapper').fadeIn();
    					$('#btn').val('Ask the 8 Ball!');
    				}
    			}
    Last edited by devnull69; 06-11-2014 at 09:19 AM.

  • #4
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm seeing the javascript like this when i try to preview o website :

    Making Javascript code working-2.pngMaking Javascript code working-2.png

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    What are you trying to tell us? This is the same code as posted above, just badly formatted ...

  • #6
    New Coder The Noob Coder's Avatar
    Join Date
    Jul 2012
    Location
    The City that Never Sleeps
    Posts
    99
    Thanks
    1
    Thanked 0 Times in 0 Posts
    If you are seeing straight JS when you go to the page in your browser, did you remember to enclose your JS code in script tags? Did you remember to include the jQuery library?

    I think we could help you better if you upload your entire file's code, not just the javascript. Also do you know how to use your browser's JavaScript console for debugging and seeing errors?

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Hah, now I get it. You are seeing the Javascript code as the only text on your website

    I thought you saw the text of the 8-ball-game instead of some flash you expected :-)

    In order to get Javascript working you'll have to construct at least a basic HTML website with a button with id='btn' and an element (let's say a div) with id="answerWrapper" and then include your Javascript file in a script tag. You'll also have to include jQuery (right before your own script) because you are using jQuery in your script.

    Something like this
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="yourscript.js"></src>
    </head>
    <body>
    <div id="answerWrapper"></div>
    <input id="btn" type="button" value="Ask the 8 Ball!" />
    </body>
    </html>

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You should put the JavaScript just before the </body> tag. That way any parts of the page that the JavaScript is supposed to interact with will be there once the JavaScript loads. This placement will also allows the page content to appear to load faster as it isn't held up while the JavaScript loads first.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, thanks, i didn't know i have to use anything else beside javascript, "New in town, hehe".

    And a little one more question,

    I need anything else beside the html website with button?

    I mean, i need only html website + javascript code, or i need something else to make it working?

  • #10
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    That should be it ... but you should try

    In Germany we say "No champion has ever been fallen out of the blue sky"

  • #11
    New Coder The Noob Coder's Avatar
    Join Date
    Jul 2012
    Location
    The City that Never Sleeps
    Posts
    99
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey TyreXo,

    I'm glad we could help. If you are serious about being a web developer (or even doing stuff as a hobby on the side), I recommend you start by building a foundation in HTML/CSS first and then go into JavaScript to learn about manipulating the content like so.

    Have you heard of the site w3schools.com? It's an excellent resource for a beginner to learn about web technologies and languages. I recommend you start here:

    HTML: Introduction to HTML

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by The Noob Coder View Post
    Have you heard of the site w3schools.com? It's an excellent resource for a beginner to learn about web technologies and languages.
    Just ignore most of the other sections of that site though. The two guys who run the site are struggling to try to keep it up to date and so much of the programming content (including JavaScript) tells you how it used to be done ten to fiftenn years ago rather than how to do it now. The only reason the HTML section is still useful is that HTML hasn't changed much in that time.

    For just about all of the subjects the w3schools site covers there are at least a few dozen better sites to learn those subjects from. "Excellent" is the last word most experienced people would use to describe that site - "Antiquated" is a more descriptive term for the site.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    New Coder The Noob Coder's Avatar
    Join Date
    Jul 2012
    Location
    The City that Never Sleeps
    Posts
    99
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    "Excellent" is the last word most experienced people would use to describe that site - "Antiquated" is a more descriptive term for the site.
    Probably because I'm not very experienced in web design.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •