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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Need help with events and setting a variable

    I have an assignment that requires me to get the minimum value out of three numbers input by the user and display that number. Also, depending on the number of digits that number is, it need to load a certain image corresponding to that. The code of displaying the minimum number by itself works, but every time I try to add more code and try to make the image grab functional, it breaks the prompts I had before.

    I just need someone to look at this and tell me where I am going wrong. I am still not sure how I am going to define the "var = imgValue" in the setImage function.

    Code:
    <!DOCTYPE html>     
    <html>
    <head>
    	<title>Welcome!</title>
    	<script type = "text/javascript">
    		var input1 = window.prompt( "Enter first number", "0" );
    		var input2 = window.prompt( "Enter second number", "0" );
    		var input3 = window.prompt( "Enter third number", "0" );
    		
    		var value1 = parseFloat( input1 );
    		var value2 = parseFloat( input2 );
    		var value3 = parseFloat( input3 );
    		
    		var minValue = minimum( value1, value2, value3 );
    		
    		document.writeln( "<h1>Minimum number is: " + minValue + "</h1>" );
    		
    		function minimum( x, y, z )
    		{
    			return Math.min( x, Math.min( y, z ) );
    		}
    		
    		var numberImage;
    		
    		function start()
    		{
    			var button = document.getElementById( "getImage" );
    			button.addEventListener( "click", rollDice, false );
    			numberImage = document.getElementById( "digitImage" );
    		}
    		
    		function getImage()
    		{
    			setImage( numberImage );
    		}
    		
    		function setImage( digitImg )
    		{
    			var imgValue = ;
    			digitImg.setAttribute( "src", "number" + imgValue + ".jpg" );
    			digitImg.setAttribute( "alt", "image for " + imgValue + " digits" );
    		}
    		
    		window.addEventListener( "load", start, false );
    	</script>
    </head>
    <body>
    <form action = "#">
    	<input id = "getImage" type = "button" value = "Click Here">
    </form>
    <ol>
    	<li><img id = "digitImage" src = "blank.png" alt = "how many digits the number is"></li>
    </ol>
    	<p>Click Refresh (or Reload) to run the script again</p>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    First of all: document.write and prompt are functions that are considered obsolete and should not be used anymore. Use DOM methods instead.

    To your problem: You probably don't want to pass numberImage to setImage, but the number of digits of numberImage. Inside setImage, you may be looking for a switch/case statement (assuming digitImg holds the number of digits):

    Code:
    var ImgValue;
    switch( digitImg ) {
        case 1: 
            imgValue = 'has_one_digit.png';
            break;
        case 2:
            imgValue = 'now_it_has_two_digits.png';
            break;
        default:
            imgValue = 'if_nothing_else_matched.png';
            break;
    }
    Of course, if the image name has a simple pattern like image_$DIGITS$.png, you can use var imgValue = 'image_' + digitImg + '.png';.

    By the way: Having a function called getImage that calls setImage looks rather odd. Either you are getting an image or you are setting one. I'd get rid of the getImage function and call setImage right away.
    Also, I don't see where you invoke getImage/setImage. Don't forget about that.

    One more thing: Math.min can deal with an arbitrary number of arguments, so you can simply write

    Code:
    return Math.min( x, y, z );
    Oh – are you sure you wannt to use parseFloat (i.e. allowing non-integers)? If not, use the function Number() instead.
    Last edited by Airblader; 03-03-2013 at 06:56 PM.

  • Users who have thanked Airblader for this post:

    Hell4u3 (03-03-2013)

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,480
    Thanks
    0
    Thanked 635 Times in 625 Posts
    Quote Originally Posted by Airblader View Post
    Oh are you sure you want to use parseFloat (i.e. allowing non-integers)? If not, use the function Number() instead.
    Number() also allows decimal fractions and even exponential notations. Where parseFloat is different from Number is that it also allows for numbers to be entered in hexadecimal and to have trailing non numeric data to be stripped off.


    So parseFloat can handle '0x10px' as a valid representation of 16 whereas Number will reject that as being not numeric.
    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.


  •  

    Posting Permissions

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