/    Sign up×
Community /Pin to ProfileBookmark

another newby

Hi all,
I am trying to create yet another calculator, however I have put together what I have on my own, and have hit a wall. No doubt its silly but I am stumped with a headache. I have “or at least I thought I have created the flow of logic.”
I will not move on until I get the first one to work. ?
Can you give me a push.

[CODE]
<script type=”text/javascript”>

//declare variables
var x;
var y;

//retrieve variables from input boxes input1 and input2 and send to functions.
x = document.getElementById(“input1”).value;
y = document.getElementById(“input2″).value;

//add both input1 and input2 together and send to result.
//display result.
functionAdd()
{
result = x + y;
return result;
}

</script>
</head>

<body>
<label>Number 1 </label>
<input type=”text” name=”x” id=”input1″ />
<label>Number 2 </label>
<input type=”text” name=”y” id=”input2″ />
<form id=”form1″ name=”form1″ method=”post” action=””>

<label>
<input type=”button” name=”+” id=”+” value=”+” onclick=”functionAdd()” />
&nbsp;&nbsp;&nbsp;&nbsp;

<input type=”button” name=”-” id=”-” value=”-” />
&nbsp;&nbsp;&nbsp;&nbsp;

<input type=”button” name=”/” id=”/” value=”/” />
&nbsp;&nbsp;&nbsp;&nbsp;

<input type=”button” name=”*” id=”*” value=”*” />
</label>

<p>
<label>Result</label>
<input type=”text” name=”result” id=”result” />
</p>
</form>
[/CODE]

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@thoandeJan 29.2008 — Hi all,

I am trying to create yet another calculator, however I have put together what I have on my own, and have hit a wall. No doubt its silly but I am stumped with a headache. I have "or at least I thought I have created the flow of logic."

I will not move on until I get the first one to work. ?

Can you give me a push.
[CODE]
<script type="text/javascript">

//declare variables
var x;
var y;

//retrieve variables from input boxes input1 and input2 and send to functions.
x = document.getElementById("input1").value;
y = document.getElementById("input2").value;


//add both input1 and input2 together and send to result.
//display result.
functionAdd()
{
result = x + y;
return result;
}

</script>
</head>

<body>
<label>Number 1 </label>
<input type="text" name="x" id="input1" />
<label>Number 2 </label>
<input type="text" name="y" id="input2" />
<form id="form1" name="form1" method="post" action="">

<label>
<input type="button" name="+" id="+" value="+" onclick="functionAdd()" />
&nbsp;&nbsp;&nbsp;&nbsp;

<input type="button" name="-" id="-" value="-" />
&nbsp;&nbsp;&nbsp;&nbsp;

<input type="button" name="/" id="/" value="/" />
&nbsp;&nbsp;&nbsp;&nbsp;

<input type="button" name="*" id="*" value="*" />
</label>

<p>
<label>Result</label>
<input type="text" name="result" id="result" />
</p>
</form>
[/CODE]
[/QUOTE]


Try:

Give the input field name and id attribute some other values

like name="left" id="left and name="right" id="right"

*/+is bad naming.

[CODE]
functionAdd()
{
// Flow! You have to get the values when the function is executed.
var x = document.getElementById("input1").value;
var y = document.getElementById("input2").value;

// Populate the addition in the result text field.
document.getElementById('result').value = (x + y);
}
[/CODE]


I would have rather done it something like this:

[CODE]
// Not tested and debugged :)
function calculate(op)
{
// Decleare the variables.
var left = document.getElementById('left').value;
var right = document.getElementById('right').value;
var result;

// You should test the input for numbers first.
// Not done in this example.

// Do the calculations.
if (op == 'add') {
result = left + right;
} else if (op == 'substract') {
result = left - right;
} else if (op == 'multiply') {
result = left * right;
} else if (op == 'divide') {
result = left / right;
}

document.getElementById('result').value = result;
}

<input type="button" value="+" onmouseup="javascript:calculate('add')"/>
<input type="button" value="-" onmouseup="javascript:calculate('substract')"/>
<input type="button" value="*" onmouseup="javascript:calculate('multiply')"/>
<input type="button" value="/" onmouseup="javascript:calculate('divide')"/>
[/CODE]


Best regards

tan
Copy linkTweet thisAlerts:
@magentaplacentaJan 29.2008 — The big problem is your [b]functionAdd()[/b], function needs to be a standalone word.

[CODE]<script type="text/javascript">
function [b]add()[/b] {
var x = document.getElementById("input1").value;
var y = document.getElementById("input2").value;
var result = document.getElementById("result");

result.value = Number(x) + Number(y);
}
</script>
</head>

<body>

<form id="form1" name="form1" method="post" action="">

<label>Number 1 </label>
<input type="text" name="x" id="input1" />

<label>Number 2 </label>
<input type="text" name="y" id="input2" />

<input type="button" name="+" id="+" value="+" onclick="[b]add()[/b]" />

<p>
<label>Result</label>
<input type="text" name="result" id="result" />
</p>

</form>[/CODE]
Copy linkTweet thisAlerts:
@adrianBauthorJan 29.2008 — Hi tan,

Thank you for your help, I do have a question on the naming. sorry It was bad, but do you mean to change the name of the label where the input is, or the label where to buttons are, or both?

Thanks again.
Copy linkTweet thisAlerts:
@magentaplacentaJan 29.2008 — Your function syntax is not correct. You're declaring/calling functionAdd() when it should be function Add() (note, two separate words).

See the bolded [b]add()[/b] in comment #3 above. This is the function name, which you call down below with the onclick.
Copy linkTweet thisAlerts:
@adrianBauthorJan 29.2008 — magentaplacenta,

Wow, thanks! I guess I wasn't that far off or was I. ?

Thanks again.

Cheers

adrian
Copy linkTweet thisAlerts:
@thoandeJan 30.2008 — Hi tan,

Thank you for your help, I do have a question on the naming. sorry It was bad, but do you mean to change the name of the label where the input is, or the label where to buttons are, or both?

Thanks again.[/QUOTE]


Magenta is right about seperating the function keyword from the name/signature.

I was talking about the name of the name and id attribute in the HTML.

regards,

tan
×

Success!

Help @adrianB spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...