[nfbcs] More help with javascript calculater

Fri Nov 25 16:03:20 UTC 2016

Nicole is correct.  the onclick attribute should only have the name of
one function in it, and only the function name.  No parenthesis.
onclick="function_calculate"

Then, in that empty function_calculate function, you should call
function_add, function_subtract, ETC. based on the value of the
dropdown.

Once you've got that working, I would suggest you refactor things a
bit.  If you look at your function_add and function_subtract
functions, you'll notice that they're mostly the same, except for one
small part.  That's often a good indication that you should refactor.
Basically, these functions should only do the operations they're named
for.

For example, for cleaner code, I would recommend making your
function_add look like this:

function function_add(first_number, second_number) {
  return first_number + second_number;
}

In short, you should move all the logic to extract the first and
second numbers from the form fields, and assigning the result, to
function_calculate, so it's all in one place, and not repeated in
multiple places.

This is known as the dry principle.  Dry stands for do not repeat
yourself.  Of course, it's nearly impossible to write a completely dry
program, and sometimes taking it to extreme can make your code harder
to work with, but it's definitely something to strive towards, within
reason.

Aaron

On 11/24/16, Nicole Torcolini via nfbcs <nfbcs at nfbnet.org> wrote:
> The problem is that your button does not know which function to perform. You
> need to have a separate function for your button that checks which option is
> selected and then calls the associated function.
>
> -----Original Message-----
> From: nfbcs [mailto:nfbcs-bounces at nfbnet.org] On Behalf Of Taylor Arndt via
> nfbcs
> Sent: Thursday, November 24, 2016 6:30 PM
> To: NFB in Computer Science Mailing List
> Cc: Taylor Arndt
> Subject: [nfbcs] More help with javascript calculater
>
> Hi,
> So i got some of my calculater
>
> --
>  Taylor
>
>  to work, but it seems like subtraction is the only thing it wants to do
> now, and i want to implament all 4 functions Here is the code:
> <!DOCTYPE html
>  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
>         <head>
>                 <title>Accessible calculator</title>
>
>                 <script>
>  function function_calculate(){
>  }
> function function_add()
>  {
>   var first_number=parseFloat(document.getElementById('Text1').value);
>                                 var
> second_number=parseFloat(document.getElementById('Text2').value);
>            var myResult=(first_number+second_number);
> document.getElementById('txtresult').innerHTML = myResult; }
>
> function function_subtract()
>  {
>   var first_number=parseFloat(document.getElementById('Text1').value);
>                                 var
> second_number=parseFloat(document.getElementById('Text2').value);
>            var myResult=(first_number-second_number);
> document.getElementById('txtresult').innerHTML = myResult; }
>
>                 </script>
>        </head>
>
>        <body>
>                 <p>
> <br/>
>                         <label for"first number">Enter the first
> number: </label>
>                         <input type="text" title="Enter first number:"
> label="first number" name="first number" id="Text1" /><br/>
>                         <label for"operation">Choose operation: </label>
> <select>
>        <option>Add</option>	
>                 <option>Subtract</option> <option>Multiply</option>
> <option>Divide</option> </select>
>
> <br/>  <label for"2nd number">Enter the second number: </label>
>                         <input type="text" title="2nd number"
> id="Text2"/><br/>
>         <button type="button" title="calculate" name="calculate"
> onclick=" function_calculate();  function_add(); function_subtract();
> function_multiply(); function_divide(); "/>Calculate</button>
>                 </p>
>                 <p  style="font-size: xx-large; font-weight:
> bolder;">result: <span id="txtresult"></span></p> </body> </html>
>
> Thanks for all the help, and i apreciat it
>
> _______________________________________________
> nfbcs mailing list
> nfbcs at nfbnet.org
> http://nfbnet.org/mailman/listinfo/nfbcs_nfbnet.org
> To unsubscribe, change your list options or get your account info for
> nfbcs:
> http://nfbnet.org/mailman/options/nfbcs_nfbnet.org/ntorcolini%40wavecable.com
>
>
> _______________________________________________
> nfbcs mailing list
> nfbcs at nfbnet.org
> http://nfbnet.org/mailman/listinfo/nfbcs_nfbnet.org
> To unsubscribe, change your list options or get your account info for
> nfbcs:
> http://nfbnet.org/mailman/options/nfbcs_nfbnet.org/cannona%40fireantproductions.com
>