Dread
Posts: 2
Joined: Fri Feb 07, 2020 9:01 am
Occupation: Student

The code for the simple calculator program doesn't run when

Postby Dread » Fri Feb 07, 2020 9:08 am

I put the code in my visual studio code runner and I tried to run it in Google Chrome but it just shows up as text
I don't know how to fix this
this is the code that I put in visual studio
<!DOCTYPE html>
<!-- 2005/11/08 Science Buddies: JavaScript calculator, adds two numbers -->
<HTML>
<HEAD>
<TITLE>Simple Adder</TITLE>

<!-- saved from url=(0030)http://www.sciencebuddies.org/ -->
<!-- When this code is saved as a local file, the preceding line tells Internet Explorer to treat this file according to the security rules for the Internet zone (plus any security rules specific for the Science Buddies website). -->
<SCRIPT LANGUAGE="JavaScript">
<!-- old browsers can't handle JavaScript functions so comment them out
// This is a single-line JavaScript comment.
// Below is a multi-line JavaScript comment.
/* CalculateSum: this function has 3 arguments:
Atext, Btext and form. It converts Atext and Btext to
numbers using the built-in JavaScript "parseFloat" method.
It then uses the form argument to output the sum of the
numbers to the form's Answer field. Notice that the
function does *not* need to know the the names of the
form's input fields. Those values are passed as arguments.
It does need to know that the form has a field named
"Answer" so that it can put the result there.

Here is how to end a multi-line JavaScript comment: */

function CalculateSum(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A + B;
}

/* ClearForm: this function has 1 argument: form.
It clears the input and answer fields on the form.
It needs to know the names of the INPUT elements in order
to do this. */

function ClearForm(form)
{
form.input_A.value = "";
form.input_B.value = "";
form.Answer.value = "";
}

// end of JavaScript functions -->
</SCRIPT>
</HEAD>

<BODY>

<P><FONT SIZE="+2">Simple Adder</FONT></P>

<FORM NAME="Calculator" METHOD="post">
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=10></P>
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=10></P>
<P><INPUT TYPE="button" VALUE="Add Numbers" name="AddButton" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Clear Fields" name="ClearButton" onClick="ClearForm(this.form)"></P>
<P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=12></P>
</FORM>

</BODY>
</HTML>

AmyCowen
Site Admin
Posts: 387
Joined: Mon Aug 22, 2016 4:39 pm
Occupation: Administrator

Re: The code for the simple calculator program doesn't run when

Postby AmyCowen » Fri Feb 07, 2020 9:29 am

The code is an HTML file. You want to make sure you saved your file with a .html extension. Then open the file in Chrome.

For reference, see steps 4 and 5:
4. Use your text editor to save the file. Call it something like "HelloWorld.html" (when choosing a name for your file, always end the name with ".htm" or ".html").

5. Now open your HelloWorld.html file with your browser. In your browser, use the "File" menu, and choose the option "Open..." (for Firefox, choose "Open File..."). Using the controls in the File Open dialog box that pops up, navigate to your file and select it. In Windows, you can also open the file by right-clicking it, selecting "Open with..." and then choosing a web browser from the list of available programs. You should see "Hello, world!" on both the browser title bar and on the body of the page.


https://www.sciencebuddies.org/science- ... background

Amy
Science Buddies


Return to “Grades 6-8: Math and Computer Science”