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

    Multiplication Table help

    I'm creating an html site with js that allows a user to input a start range and a stop range set of values. The user will also enter a multiple. I then will tell the user what multiples are present within the range they provided. I'm 90% there but I'm stuck and I can't figure out what I've done incorrect. Everything works fine provided my multiple and ranges are divisible by 10----as soon as a number is input that isn't a divisible of 10, then it breaks. I have two separate files..an html file and a js file. All the code is listed below. Any constructive help is greatly appreciated.

    HTML code:
    [HTML]
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Assignment 2 : Multiples</title>
    <link rel="stylesheet" href="css/form.css">
    </head>
    <body>
    <form action="" method="post" id="theForm">
    <fieldset><legend>Detecting Multiples in a Specified Descending Range</legend>
    <p>Enter numbers for the range and multiple.</p>
    <div><label for="start">Starting Integer for Range</label><input type="number" name="start" id="start"></div>
    <div><label for="stop">Ending (lower) Integer of Range</label><input type="text" name="stop" id="stop"></div>
    <div><label for="multiple">Multiple to Detect in Range</label><input type="text" name="multiple" id="multiple"></div>
    <div><input type="submit" value="Display Multiples" id="submit"></div>
    </fieldset>
    <ul id="list"></ul>
    </form>
    <script src="js/multiples.js"></script>
    </body>
    </html>[/HTML]

    JS Code:
    Code:
    // multiples.js
    
    // Function called when the form is submitted.
    function findMultiples() {
        'use strict';
    
    	// read form data into variables
    	var start = document.getElementById('start').value;
    	var stop = document.getElementById('stop').value;
    	var multiple = document.getElementById('multiple').value;
    	
    	// next, convert the form inputs to numbers
    	start = parseInt(start);
    	stop = parseInt(stop);
    	multiple = parseInt(multiple);		
    			
    	// generate an HTML string of five LI tags
    	// using the form inputs to configure the for loop
    	var liTags = '';
    	
    	for( var i = stop; i <= start; i += multiple)  {
    		if (!(i%multiple)){
    			var multiple2 = i / multiple;
    			liTags += '<li>' + i + " is " + multiple + " x " + multiple2 + '</li>';
    			}
    	}
    	
    	// for output, get a reference to the UL element with id = 'list'
    	var unList = document.getElementById('list');
    	
    	// write the HTML string to this UL element
        unList.innerHTML = liTags;
    
        return false;   // prevent form submission:
        
    } // End of findMultiples() function.
    
    // Initial setup:
    function init() {
        'use strict';
        document.getElementById('theForm').onsubmit = findMultiples;
    } // End of init() function.
    window.onload = init;

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Lightbulb

    Number of errors ... Check the error console.

    1. Difficult to count UP to a lower number than the start value.
    See the for...loop change
    2. Should not give id setting a reserved JS word. Bad: id="submit"
    3. If you leave off the () in the function call, it works immediately,
    not when you click the button for the action to occur.
    Therefore, the init calls the function immediately, but you don't call it again.

    See this working version. Compare line by line to see modifications.
    Merged the JS external file into HTML for testing purposes only. OK to put it back as external file.

    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Assignment 2 : Multiples</title>
    <link rel="stylesheet" href="css/form.css">
    </head>
    <body>
    <form action="" method="post" id="theForm" onsubmit="return findMultiples()">
    <fieldset><legend>Detecting Multiples in a Specified Descending Range</legend>
    <p>Enter numbers for the range and multiple.</p>
    <div><label for="start">Starting Integer for Range</label><input type="number" name="start" id="start" value="0"></div>
    <div><label for="stop">Ending (lower) Integer of Range</label><input type="text" name="stop" id="stop" value="100"></div>
    <div><label for="multiple">Multiple to Detect in Range</label><input type="text" name="multiple" id="multiple" value="5"></div>
    <div><input type="submit" value="Display Multiples"></div>
    </fieldset>
    <ul id="list"></ul>
    </form>
    
    <script type="text/javascript"> <!-- src="js/multiples.js" -->
    // multiples.js
    
    // Function called when the form is submitted.
    function findMultiples() {
        'use strict';
    
    	// read form data into variables
    	var start = document.getElementById('start').value;
    	var stop = document.getElementById('stop').value;
    	var multiple = document.getElementById('multiple').value;
    	
    	// next, convert the form inputs to numbers
    	start = parseInt(start);
    	stop = parseInt(stop);
    	multiple = parseInt(multiple);		
    			
    	// generate an HTML string of five LI tags
    	// using the form inputs to configure the for loop
    	var liTags = '';
    	
    	for( var i = start; i <= stop; i += multiple)  {
    //	for( var i = stop; i <= start; i += multiple)  {  // difficult to count UP from a larger number to a smaller number
    		if (!(i%multiple)){
    			var multiple2 = i / multiple;
    			liTags += '<li>' + i + " is " + multiple + " x " + multiple2 + '</li>';
    			}
    	}
    	
    	// for output, get a reference to the UL element with id = 'list'
    	var unList = document.getElementById('list');
    	
    	// write the HTML string to this UL element
        unList.innerHTML = liTags;
    
        return false;   // prevent form submission:
        
    } // End of findMultiples() function.
    
    </script>
    </body>
    </html>


  •  

    Posting Permissions

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