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 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    81
    Thanks
    45
    Thanked 0 Times in 0 Posts

    feedback needed on this calc

    Alright, yesterday I made a thread on how arrays could be used in real situation I thought about it and this is what I came up with I used loop in an array to add tags dynamically on page.. anyways gimme your opinion on it : )

    https://dl.dropboxusercontent.com/u/...tor/index.html

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts

    Lightbulb

    Some modifications for error checks (try 'x' as a numeric entry)

    Condensed in parts and removed some un-necessary variables.

    Code:
    <!doctype HTML>
    <html>
    <head>
    <!-- link href="style.css" rel="stylesheet" // not provided -->
    <meta charset="utf-8"> 
    </head>
    
    <form name="addEm">
      First Number   <input type="text" id="firstNum" value="10">  <br />
      Second Number  <input type="text" id="secondNum" value="7.5"> <p />
      <input type="button" id="btn" value="Calculate">
      <input type="button" id="clearIt" value="Clear da mess">
    </form><p>
    <div id="results" style="font-family:arial;font-weight:bold"></div>
    
    <script type="text/javascript"> // src="javascript.js">
    btnCalc = document.getElementById('btn');      btnCalc.onclick=addNumbers;
    btnClear = document.getElementById('clearIt');   btnClear.onclick=clearIt;
    // count= 1;  // un-necessary variable!
    
    function clearIt(){ location.reload(); }
    function addNumbers(){
    //  count+=1;  if(count==3) { clearIt(); }  // Does not make sense to have this logic and a "clear" button also 
    //  var box = [addition, subtraction, division, multiplication, remainder];  // this won't work if called 2nd time without a reload
    
      var signs = ["When added: ", "When subtracted: ", "When divided: ", "When Multiplied: ", "Remainder: ",
                   "Squares: ", "SqrRoots: ", "Cubed: "];
      var box = [];
      firstNumber = parseFloat(document.getElementById('firstNum').value,10) || 0;
      secondNumber = parseFloat(document.getElementById('secondNum').value,10) || 0;
    	
      if((firstNumber == 0) || ( secondNumber == 0)) { alert("Invalid or '0' entry"); return; }
    
      box[0] = signs[0] + (firstNumber + secondNumber) + '<p>';
      box[1] = signs[1] + (firstNumber - secondNumber) + '<p>';
      box[2] = signs[2] + (firstNumber / secondNumber) + '<p>';
      box[3] = signs[3] + (firstNumber * secondNumber) + '<p>';
      box[4] = signs[4] + (firstNumber % secondNumber) + '<p>';
      box[5] = signs[5] + (firstNumber * firstNumber) + ' and ' + (secondNumber * secondNumber) + '<p>';
      box[6] = signs[6] + Math.sqrt(firstNumber) + ' and ' + Math.sqrt(secondNumber) + '<p>';
      box[7] = signs[7] + Math.pow(firstNumber,3) + ' and ' + Math.pow(secondNumber,3) + '<p>';
      
      var para = '';  for(i=0; i<box.length; i++){ para += box[i]; }
      document.getElementById('results').innerHTML = para;
    }
    </script>
    </html>
    And an alternative for array initialization and display...
    Code:
    <!doctype HTML>
    <html>
    <head>
    <meta charset="utf-8"> 
    </head>
    
    <form name="addEm">
      First Number   <input type="text" id="firstNum" value="10">  <br />
      Second Number  <input type="text" id="secondNum" value="7.5"> <p />
      <input type="button" id="btn" value="Calculate">
      <input type="button" id="clearIt" value="Clear da mess">
    </form>
    <p /><div id="results" style="font-family:arial;font-weight:bold"></div>
    
    <script type="text/javascript"> // src="javascript.js">
    function clearIt(){ location.reload(); }
    function ManipulateNumbers(){
      var signs = ["When added: ", "When subtracted: ", "When divided: ", "When Multiplied: ",
                   "Remainder: ", "Squares: ", "SqrRoots: ", "Cubed: "];
      var box = [];
      firstNumber = parseFloat(document.getElementById('firstNum').value,10) || 0;
      secondNumber = parseFloat(document.getElementById('secondNum').value,10) || 0;
      if((firstNumber == 0) || ( secondNumber == 0)) { alert("Invalid or '0' entry"); return; }
    
      var action;
      for (var i=0; i<signs.length; i++) {
        switch (i.toString()) {
          case '0': action = firstNumber + secondNumber; break;
          case '1': action = firstNumber - secondNumber; break;
          case '2': action = firstNumber * secondNumber; break;
          case '3': action = firstNumber / secondNumber; break;
          case '4': action = firstNumber % secondNumber; break;
          case '5': action = (firstNumber * firstNumber) + ' and ' + (secondNumber * secondNumber); break;
          case '6': action = Math.sqrt(firstNumber) + ' and ' + Math.sqrt(secondNumber); break;
          case '7': action =  Math.pow(firstNumber,3) + ' and ' + Math.pow(secondNumber,3); break;
        }
        box.push(signs[i]+action);
      }  
      document.getElementById('results').innerHTML = box.join('<p>');
    }
    
    btnCalc = document.getElementById('btn');      btnCalc.onclick=ManipulateNumbers;
    btnClear = document.getElementById('clearIt');   btnClear.onclick=clearIt;
    </script>
    </html>
    Last edited by jmrker; 02-14-2014 at 04:04 AM. Reason: Alternative examples...

  • Users who have thanked jmrker for this post:

    h123er2 (02-14-2014)

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    ... although parallel arrays always seem to be asking for trouble to me. You have to make sure they match up perfectly (see jmrker's multiplication and division results in his second example for instance) and if you change one you then have to remember to change the other.

    I know you're asking about arrays, but for something like this you would be much better suited constructing an object and iterating through that. You can use this with the html you posted on dropbox (not the most fantastic way to do it, but using that for convenience...)

    Code:
    <script> 
    function clearIt(){ location.reload(); }
    
    function ManipulateNumbers(){
     var firstNumber = Number(document.getElementById('firstNum').value) || 0;
     var secondNumber = Number(document.getElementById('secondNum').value) || 0;
    if(firstNumber===0||secondNumber===0){
    alert("Invalid or '0' entry"); return;
    }
      var calcs = {"When added: ":firstNumber + secondNumber,
    		"When subtracted: ":firstNumber - secondNumber,
     		"When Multiplied: ":firstNumber * secondNumber,				
    		"When divided: ": firstNumber / secondNumber,
                    "Remainder: ":firstNumber % secondNumber,
    		"Squares: ":(firstNumber * firstNumber) + ' and ' + (secondNumber * secondNumber), 
    		"SqrRoots: ":Math.sqrt(firstNumber) + ' and ' + Math.sqrt(secondNumber), 
    		"Cubed: ":Math.pow(firstNumber,3) + ' and ' + Math.pow(secondNumber,3)
    			   };
     
     for (i in calcs){
     para = document.createElement("p");
     para.innerHTML = i + calcs[i];
     para.style.fontFamily="arial";
     para.style.fontWeight="bold";
     document.body.appendChild(para);
     }
     
    
     }
    document.getElementsByName("button")[0].onclick=ManipulateNumbers;
    document.getElementsByName("clearIt")[0].onclick=clearIt;
    </script>

  • Users who have thanked xelawho for this post:

    h123er2 (02-14-2014)

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts

    Unhappy

    Quote Originally Posted by xelawho View Post
    ... although parallel arrays always seem to be asking for trouble to me. You have to make sure they match up perfectly (see jmrker's multiplication and division results in his second example for instance) and if you change one you then have to remember to change the other.

    ...
    Code:
    ...
    Ah yes. The dangers of copy-paste strike again!

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    Possibly you are getting confused about the usefulness of arrays because the example you posted te other day was a fairly mundane example of how to populate an array. But the real power of arrays (apart from the more advanced methods that rndme talks about here) comes from when you need to access the information stored, and the ability to do so according to the elements position within the array. Here's a simple example:

    Code:
    <!doctype HTML>
    <html>
    <head>
    
    <meta charset="utf-8"> 
    </head>
    <body>
    <form name="addEm">
    	Enter the number of the month you were born in (1-12)
    	<input type="text" id="mth">
    		
    	<input type="button" id="calc" value="Calculate">
    </form>
    <div id="res"></div>
    
    
    <script> 
    document.getElementById("calc").onclick=function(){
    var inp=document.getElementById('mth');
     var m = Number(inp.value);
    if(isNaN(m)||m<1||m>12){
    alert("Invalid entry"); 
    inp.value="";
    return;
    }
    var months =["January", "February","March", "April","May", "June","July", "August","September", "October","November", "December"];
    document.getElementById('res').innerHTML="You were born in "+months[m-1];
    }
    </script>
    </body>
    </html>
    Last edited by xelawho; 02-14-2014 at 04:06 PM.


  •  

    Posting Permissions

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