Textarea Calculations

Textarea Calculations - javascript

I'm trying to have three textareas. The first two are addends and the last is the sum. What's supposed to happen is if your math equation is correct, a paragraph will say true.
Else, it'll say false. However, the paragraph doesn't say anything when I try.
Here's my code:
<textarea id="x"></textarea>
<textarea id="y"></textarea>
<textarea id="z"></textarea>
<script>
var x = document.getElementById('x').innerHTML;
var y = document.getElementById('y').innerHTML;
var z = x + y;
var p = document.getElementById('p');
</script>
<button oclick="if (z = document.getElementById('z').innerHTML) {p.innerHTML = true} else {p.innerHTML = false}">Calculate</button>
<br>
<p id="p"></p>

First attaching the click event to your button from the JS code using addEventListener will be better (avoid the inline-events), then put your code inside, you have to use .value insted of innerHTML to get the value of a textarea.
Note also that you should use double equals == when you want to compare two elements, and because we need to perform a math operations we should cast our values to numbers using Number() method.
Should be something like :
document.getElementById("calculate").addEventListener("click", function() {
var x = Number( document.getElementById('x').value );
var y = Number( document.getElementById('y').value );
var z = x + y;
var p = document.getElementById('p');
if (z == document.getElementById('z').value) {
p.innerText = "true";
} else {
p.innerText = "false";
}
});
<textarea id="x"></textarea>
<textarea id="y"></textarea>
<textarea id="z"></textarea>
<button id="calculate">Calculate</button>
<br>
<p id="p"></p>

first of all, I suggest you to use input here instead of
Second thing is, I would suggest you to use function when you use 'onclick'
Here's the result:
<html>
<body>
<input type='number' placeholder='x: (input number please)' id="x" />
<input type='number' placeholder='y: (input number please)' id="y" />
<input type='number' placeholder='z: (input number please)' id="z" />
<br />
<button onclick="CheckByFormula()">Calculate</button>
<br />
<p>Check result: z=x+y ?</p>
<p id="p"></p>
<script type='text/javascript'>
function CheckByFormula(){
var x = parseInt(document.getElementById('x').value);
var y = parseInt(document.getElementById('y').value);
var z = x + y;
//alert('having these params:\n x='+x+' y='+y+' z='+z);
var p = document.getElementById('p');
z1 = parseInt(document.getElementById('z').value);
alert('z1='+z1+' z='+z);
if(z1 == z){
document.getElementById('p').innerHTML = 'true'
}
else {
document.getElementById('p').innerHTML = 'false';
}
}
</script>
</body>
</html>
https://jsfiddle.net/14pm7ypz/2/

Related

Javascript displaying but not calulating [duplicate]

I am adding two numbers, but I don't get a correct value.
For example, doing 1 + 2 returns 12 and not 3
What am I doing wrong in this code?
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = y + z;
document.getElementById("demo").innerHTML = x;
}
<p>
Click the button to calculate x.
<button onclick="myFunction()">Try it</button>
</p>
<p>
Enter first number:
<input type="text" id="txt1" name="text1" value="1">
Enter second number:
<input type="text" id="txt2" name="text2" value="2">
</p>
<p id="demo"></p>

They are actually strings, not numbers. The easiest way to produce a number from a string is to prepend it with +:
var x = +y + +z;

I just use Number():
var i=2;
var j=3;
var k = Number(i) + Number(j); // 5

You need to use javaScript's parseInt() method to turn the strings back into numbers. Right now they are strings so adding two strings concatenates them, which is why you're getting "12".

Use parseInt(...) but make sure you specify a radix value; otherwise you will run into several bugs (if the string begins with "0", the radix is octal/8 etc.).
var x = parseInt(stringValueX, 10);
var y = parseInt(stringValueY, 10);
alert(x + y);
Hope this helps!

The following may be useful in general terms.
First, HTML form fields are limited to text. That applies especially to text boxes, even if you have taken pains to ensure that the value looks like a number.
Second, JavaScript, for better or worse, has overloaded the + operator with two meanings: it adds numbers, and it concatenates strings. It has a preference for concatenation, so even an expression like 3+'4' will be treated as concatenation.
Third, JavaScript will attempt to change types dynamically if it can, and if it needs to. For example '2'*'3' will change both types to numbers, since you can’t multiply strings. If one of them is incompatible, you will get NaN, Not a Number.
Your problem occurs because the data coming from the form is regarded as a string, and the + will therefore concatenate rather than add.
When reading supposedly numeric data from a form, you should always push it through parseInt() or parseFloat(), depending on whether you want an integer or a decimal.
Note that neither function truly converts a string to a number. Instead, it will parse the string from left to right until it gets to an invalid numeric character or to the end and convert what has been accepted. In the case of parseFloat, that includes one decimal point, but not two.
Anything after the valid number is simply ignored. They both fail if the string doesn’t even start off as a number. Then you will get NaN.
A good general purpose technique for numbers from forms is something like this:
var data=parseInt(form.elements['data'].value); // or parseFloat
If you’re prepared to coalesce an invalid string to 0, you can use:
var data=parseInt(form.elements['data'].value) || 0;

Just add a simple type casting method as the input is taken in text. Use the following:
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = y + z;

This won't sum up the number; instead it will concatenate it:
var x = y + z;
You need to do:
var x = (y)+(z);
You must use parseInt in order to specify the operation on numbers. Example:
var x = parseInt(y) + parseInt(z); [final soulution, as everything us]

Simple
var result = parseInt("1") + parseInt("2");
console.log(result ); // Outputs 3

This code sums both the variables! Put it into your function
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = (y +z);
document.getElementById("demo").innerHTML = x;`

<head>
<script type="text/javascript">
function addition()
{
var a = parseInt(form.input1.value);
var b = parseInt(form.input2.value);
var c = a+b
document.write(c);
}
</script>
</head>
<body>
<form name="form" method="GET">
<input type="text" name="input1" value=20><br>
<input type="text" name="input2" value=10><br>
<input type="button" value="ADD" onclick="addition()">
</form>
</body>
</html>

Or you could simply initialize
var x = 0; ( you should use let x = 0;)
This way it will add not concatenate.

If Nothing works then only try this. This maybe isn't Right way of doing it but it worked for me when all the above failed.
var1 - (- var2)

You are missing the type conversion during the addition step...
var x = y + z; should be var x = parseInt(y) + parseInt(z);
<!DOCTYPE html>
<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction()
{
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = parseInt(y) + parseInt(z);
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

<input type="text" name="num1" id="num1" onkeyup="sum()">
<input type="text" name="num2" id="num2" onkeyup="sum()">
<input type="text" name="num2" id="result">
<script>
function sum()
{
var number1 = document.getElementById('num1').value;
var number2 = document.getElementById('num2').value;
if (number1 == '') {
number1 = 0
var num3 = parseInt(number1) + parseInt(number2);
document.getElementById('result').value = num3;
}
else if(number2 == '')
{
number2 = 0;
var num3 = parseInt(number1) + parseInt(number2);
document.getElementById('result').value = num3;
}
else
{
var num3 = parseInt(number1) + parseInt(number2);
document.getElementById('result').value = num3;
}
}
</script>

It's very simple:
<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = +y + +z;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

Try this:
<!DOCTYPE html>
<html>
<body>
<p>Add Section</p>
<label>First Number:</label>
<input id="txt1" type="text"/><br />
<label>Second Number:</label>
<input id="txt2" type="text"/><br />
<input type="button" name="Add" value="Add" onclick="addTwoNumber()"/>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Date();
}
function addTwoNumber(){
var a = document.getElementById("txt1").value;
var b = document.getElementById("txt2").value;
var x = Number(a) + Number(b);
document.getElementById("demo").innerHTML = "Add Value: " + x;
}
</script>
</body>
</html>

If we have two input fields then get the values from input fields, and then add them using JavaScript.
$('input[name="yourname"]').keyup(function(event) {
/* Act on the event */
var value1 = $(this).val();
var value2 = $('input[name="secondName"]').val();
var roundofa = +value2+ +value1;
$('input[name="total"]').val(addition);
});

This can also be achieved with a more native HTML solution by using the output element.
<form oninput="result.value=parseInt(a.valueAsNumber)+parseInt(b.valueAsNumber)">
<input type="number" id="a" name="a" value="10" /> +
<input type="number" id="b" name="b" value="50" /> =
<output name="result" for="a b">60</output>
</form>
https://jsfiddle.net/gxu1rtqL/
The output element can serve as a container element for a calculation or output of a user's action. You can also change the HTML type from number to range and keep the same code and functionality with a different UI element, as shown below.
<form oninput="result.value=parseInt(a.valueAsNumber)+parseInt(b.valueAsNumber)">
<input type="range" id="a" name="a" value="10" /> +
<input type="number" id="b" name="b" value="50" /> =
<output name="result" for="a b">60</output>
</form>
https://jsfiddle.net/gxu1rtqL/2/

You can do a precheck with regular expression wheather they are numbers as like
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
if((x.search(/[^0-9]/g) != -1)&&(y.search(/[^0-9]/g) != -1))
var x = Number(y)+ Number(z);
else
alert("invalid values....");
document.getElementById("demo").innerHTML = x;
}

Use parseFloat it will convert string to number including decimal values.
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = parseFloat(y) + parseFloat(z);
document.getElementById("demo").innerHTML = x;
}
<p>
Click the button to calculate x.
<button onclick="myFunction()">Try it</button>
</p>
<p>
Enter first number:
<input type="text" id="txt1" name="text1" value="1">
Enter second number:
<input type="text" id="txt2" name="text2" value="2">
</p>
<p id="demo"></p>

You can also write :
var z = x - -y ;
And you get correct answer.
<body>
<input type="text" id="number1" name="">
<input type="text" id="number2" name="">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, y ;
x = document.getElementById('number1').value;
y = document.getElementById('number2').value;
var z = x - -y ;
document.getElementById('demo').innerHTML = z;
}
</script>
</body>

Here goes your code by parsing the variables in the function.
<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">
<br>Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction() {
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = y + z;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Answer

An alternative solution, just sharing :) :
var result=eval(num1)+eval(num2);

Perhaps you could use this function to add numbers:
function calculate(a, b) {
return a + b
}
console.log(calculate(5, 6))

how to convert number to hexa string in js

I want to make a RGB to HEX converter using JS. to do this i did the below code:
function convertToHex(){
var r=document.getElementById("R").value;
var g=document.getElementById("G").value;
var b=document.getElementById("B").value;
if(r>255 || g>255 || b>255){
document.getElementById("error").innerHTML='R ,G, B value can not be greater than 255';
}
else{
var rHex=r.toString(16);
var gHex=g.toString(16);
var bHex=b.toString(16);
var toHex=rHex+gHex+bHex;
document.getElementById("hexContainer").innerHTML=toHex;
}
}
but it is not working. Could you please help me. it is showing the numbers only not converted values.

When you grab the value from HTML, you need to convert the string to number,
you can do
var r = Number(document.getElementById("R").value);
I tested the rest of the code, and they work fine.

You can try out this way. It works perfect.
<body>
<input id="R" type="number">
<br>
<input id="G" type="number">
<br>
<input id="B" type="number">
<br>
<input id="btn" type="button" onclick="rgb2hex()" value="calculate">
<div id= "hexContainer"></div>
<div id="error"></div>
<script>
function rgb2hex() {
var r = document.getElementById("R").value
var g = document.getElementById("G").value
var b =document.getElementById("B").value
if (r> 255 || g> 255 || b> 255){
document.getElementById( "error" ).innerHTML= 'R ,G, B value can not be greater than 255' ;
document.getElementById( "hexContainer").innerHTML=""
}
else {
document.getElementById( "hexContainer").innerHTML= ("#"+dec2Hex(Math.round(r)) +""+ dec2Hex(Math.round(g)) +""+dec2Hex(Math.round(b)));
document.getElementById( "error").innerHTML=""
}
}
function dec2Hex(decimal) {
return ("0"+(Number(decimal).toString(16))).slice(-2).toUpperCase()
}
</script>
</body>

function convertToHex(){
var r=document.getElementById("R").value;
var g=document.getElementById("G").value;
var b=document.getElementById("B").value;
if(+r>255 || +g>255 || +b>255){
document.getElementById("error").innerHTML='R ,G, B value can not be greater than 255';
}
else{
var rHex=(+r).toString(16);
var gHex=(+g).toString(16);
var bHex=(+b).toString(16);
var toHex=rHex+gHex+bHex;
document.getElementById("hexContainer").innerHTML=toHex;
}
}

Add two numbers and display result in textbox with Javascript [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 months ago.
Improve this question
I was just trying to write a simple javascript program that will demonstrate to take user input from text field, and clicking the button will display the summation result of those number in another text field. But unfortunately the below code is not working. Clicking the button does not show anything in the result text field.
<body>
<div>
<div>
<h1>Add two number using text box as input using javascript</h1>
</div>
Enter First Number : <br>
<input type="text" id="Text1" name="TextBox1">
<br>
Enter Second Number : <br>
<input type="text" id="Text2" name="TextBox2">
<br>
Result : <br>
<input type="text" id="txtresult" name="TextBox3">
<br>
<input type="button" name="clickbtn" value="Display Result" onclick="add_number()">
<script type="text/javascript">
function add_number(){
var first_number = parseInt(document.getElementsById("Text1").value);
var second_number = parseInt(document.getElementsById("Text2").value);
var result = first_number + second_number;
document.getElementById("txtresult").innerHTML = result;
}
</script>

Here a working fiddle: http://jsfiddle.net/sjh36otu/
function add_number() {
var first_number = parseInt(document.getElementById("Text1").value);
var second_number = parseInt(document.getElementById("Text2").value);
var result = first_number + second_number;
document.getElementById("txtresult").value = result;
}

When you assign your variables "first_number" and "second_number", you need to change "document.getElementsById" to the singular "document.getElementById".

var first_number = parseInt(document.getElementById("Text1").value);
var second_number = parseInt(document.getElementById("Text2").value);
// This is because your method .getElementById has the letter 's': .getElement**s**ById

<script>
function sum()
{
var value1= parseInt(document.getElementById("txtfirst").value);
var value2=parseInt(document.getElementById("txtsecond").value);
var sum=value1+value2;
document.getElementById("result").value=sum;
}
</script>

You made a simple mistake. Don't worry....
Simply use getElementById instead getElementsById
true
var first_number = parseInt(document.getElementById("Text1").value);
False
var first_number = parseInt(document.getElementsById("Text1").value);
Thanks ...

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.minus = function() {
var a = Number($scope.a || 0);
var b = Number($scope.b || 0);
$scope.sum1 = a-b;
// $scope.sum = $scope.sum1+1;
alert($scope.sum1);
}
$scope.add = function() {
var c = Number($scope.c || 0);
var d = Number($scope.d || 0);
$scope.sum2 = c+d;
alert($scope.sum2);
}
});
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Using Double Negation</h3>
<p>First Number:
<input type="text" ng-model="a" />
</p>
<p>Second Number:
<input type="text" ng-model="b" />
</p>
<button id="minus" ng-click="minus()">Minus</button>
<!-- <p>Sum: {{ a - b }}</p> -->
<p>Sum: {{ sum1 }}</p>
<p>First Number:
<input type="number" ng-model="c" />
</p>
<p>Second Number:
<input type="number" ng-model="d" />
</p>
<button id="minus" ng-click="add()">Add</button>
<p>Sum: {{ sum2 }}</p>
</div>

<script>
function myFunction() {
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = y + z;
document.getElementById("result").innerHTML = x;
}
</script>
<p>
<label>Enter First Number : </label><br>
<input type="number" id="txt1" name="text1"><br/>
<label>Enter Second Number : </label><br>
<input type="number" id="txt2" name="text2">
</p>
<p>
<button onclick="myFunction()">Calculate</button>
</p>
<br/>
<p id="result"></p>

It should be document.getElementById("txtresult").value= result;
You are setting the value of the textbox to the result. The id="txtresult" is not an HTML element.

<script>
var text1 = document.getElementById("Text1").value;
var text2 = document.getElementById("Text2").value;
var answer = parseInt(text1) + parseInt(text2);
function add_number(){
document.getElementById("txtresult").value = answer;
}
</script>

its Not document.getElementsById function its document.getElementById try it

Instead of writing
.innerHTML = result;
use
.value = result;

<html lang = "en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator DEMO</title>
</head>
<body>
<div>
<p>
<label>Enter Number 1: </label><br>
<input type="number" id="txt1" name="text1"><br/>
<label>Enter Number 2: </label><br>
<input type="number" id="txt2" name="text2">
</p>
<p>
<button onclick="resultsum()">+</button>
<button onclick="resultsub()">-</button>
<button onclick="resultmul()">*</button>
</p>
<p>
<button onclick="resultdiv()">/</button>
<button onclick="resultmod()">%</button>
<button onclick="resultper()">percentage</button>
</p>
<script>
function resultsum()
{
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var sm = y + z;
document.getElementById("resultsum").innerHTML = sm;
if(document.getElementById("resultsum").innerHTML%2!=0)
{
alert('"calculated Result is odd"');
}
else
{
alert('"calculated Result is not "ODD"');
}
}
function resultsub()
{
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var sb = y - z;
document.getElementById("resultsub").innerHTML = sb;
{
if(document.getElementById("resultsub").innerHTML%2!=0)
{
alert('"calculated Result is odd"');
}
else
{
alert('"calculated Result is not "ODD"');
}
}
}
function resultmul()
{
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var ml = y * z;
document.getElementById("resultmul").innerHTML = ml;
if(document.getElementById("resultmul").innerHTML%2!=0)
{
alert('"calculated Result is odd"');
}
else
{
alert('"calculated Result is not "ODD"');
}
}
function resultdiv()
{
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var dv = y / z;
document.getElementById("resultdiv").innerHTML = dv;
if(document.getElementById("resultdiv").innerHTML%2!=0)
{
alert('"calculated Result is odd"');
}
else
{
alert('"calculated Result is not "ODD"');
}
}
function resultmod()
{
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var md = y + z;
document.getElementById("resultmod").innerHTML = md;
if(document.getElementById("resultmod").innerHTML%2!=0)
{
alert('"calculated Result is odd"');
}
else
{
alert('"calculated Result is not "ODD"');
}
}
function resultper()
{
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var per = (y + z )/2;
document.getElementById("resultper").innerHTML = per;
if(document.getElementById("resultper").innerHTML%2!=0)
{
alert('"calculated Result is odd"');
}
else
{
alert('"calculated Result is not "ODD"');
}
}
</script>
<input type="text" name="Answers" id="ans" >
<br/>
<p id="resultsum"></p>
<p id="resultsub"></p>
<p id="resultmul"></p>
<p id="resultdiv"></p>
<p id="resultmod"></p>
<p id="resultper"></p>
</div>
</body>
</html>

You can simply convert the given number using Number primitive type in JavaScript as shown below.
var c = Number(first) + Number(second);

What part of this simple Javascript calculator is wrong?

I've recently wrote this simple javascript calculator but it will not work, got any ideas?
function calculateMe() {
var x = document.getElementById("x");
var y = document.getElementById("y");
var e = x + y;
document.getElementById("a").innerHTML = e;
}
<center><input id="x"></input> +
<input id="y"></input><br><br>
<button onclick="calculateMe()">Submit</button><br><br>
<input id="a"></input>

You need to first get the value from the inputs, then set the value like:
function calculateMe() {
var x = +document.getElementById("x").value;
var y = +document.getElementById("y").value;
var e = x + y;
document.getElementById("a").value = e;
}
<input id="x"></input>+
<input id="y"></input>
<br>
<br>
<button onclick="calculateMe()">Submit</button>
<br>
<br>
<input id="a"></input>
The + in the document.getElementById code turns the strings you get into numbers.

<html>
<head>
<script>
function calculateMe() {
var x = parseInt(document.getElementById("x").value);
if(isNaN(x)){
x = 0;
document.getElementById("x").value=x;
alert("The value in the first text box is not a valid number.");
}
var y = parseInt(document.getElementById("y").value);
if(isNaN(y)){
y = 0;
document.getElementById("y").value=y;
alert("The value in the second text box is not a valid number.");
}
var e = x + y;
document.getElementById("a").value = e;
}
</script>
<title>Webpage</title>
</head>
<body>
<center>
<input id="x" type="text"> +
<input id="y" type="text"><br><br>
<button onclick="calculateMe()">Submit</button><br><br>
<input id="a" type="text" readonly>
</center>
</body>
</html>

put in multiply or divide in input field to perform either multiply or divide on the other 2 input fields

Hey guys im trying to create a function that takes 3 arguments. The first argument is supposed to be "MULTIPLY" or "DIVIDE" in an input field, then followed by two numbers which are also in separate input fields, that should be either multipled or divided according based on the first argument. I cant figure out exactly how i'm supposed to write this down in code.
this is my code so far;
<!DOCTYPE html>
<html>
<head>
<script src="ovning3-3.js"></script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1></h1>
<p>
</p>
<input id="first" type="text">
<input id="second" type="text">
<input id="third" type="text">
<input type="button" value="Multiply" onclick="multiply()">
<input type="button" value="Divide" onclick="divide()">
<input type="button" value="Multiply and Divide" onclick="multiplyAndDivide()">
</body>
</html>
and the java script;
function multiply() {
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
var result = (x * y) * z
alert(result)
}
function divide() {
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
var result = (x / y) / z
alert(result)
}
function multiplyAndDivide() {
multiply();
divide();
}
Any help out there?

You can use only one function
function multiplyOrDivide(todo){
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
if(todo==0){
alert(Number(x*y*z));
}
else{
if(y!=0 || z!=0){
alert(Number(x/y)/z);
}
}
}
In onclick you can pass options as multiplyOrDivide(1)

See if this is what you want
<!DOCTYPE html>
<html>
<head>
<script>
function calculate() {
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var d = document.getElementById("decision").value;
if (d=="*")
result = x*y;
else if(d=="/")
result = x/y;
alert(result)}
</script>
<title></title>
</head>
<body>
<h1></h1>
<select id="decision">
<option value="*">Multiply</option>
<option value="/">Divide</option>
</select><br>
<input id="first" type="text">
<input id="second" type="text"><br>
<input type="button" value="Calculate" onclick="calculate()">
</body>
</html>
Let me know if you need any further explaination

You can use select menu to choice which operation you want to perform. To use js functionality, you can take a look this:
function calculate() {
var selected_operation = document.getElementById("operation");
var operation = selected_operation.options[selected_operation.selectedIndex].value;
if (operation == 'multiply')
multiply(operation);
else if (operation == 'divide')
divide();
else if (operation == 'mulitiply_division')
multiplyAndDivide();
}
function multiply() {
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
var result = (x * y) * z
alert(result);
}
function divide() {
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
var result = (x / y) / z
alert(result);
}
function multiplyAndDivide() {
multiply();
divide();
}
To see the whole scenario, please visit DEMO

function mul()
{
var a = document.getElementById("v1").value;
var b = document.getElementById("v2").value;
document.getElementById("ans").innerHTML = "Multiplication is: " + a * b;
}
function div()
{
var a = document.getElementById("v1").value;
var b = document.getElementById("v2").value;
document.getElementById("ans").innerHTML = "Division is: " + a / b;
}
<!DOCTYPE html>
<html>
<head>
</head>
<style>
body{
padding-left: 80px;
}
</style>
<body>
<p id="ans"></p>
<input type="text" placeholder="Value 1" id="v1"><br><br>
<input type="text" placeholder="Value 2" id="v2"><br><br>
<input type="button" onclick="mul()" id="mul" value="Multiplication">
<input type="button" id="div" onclick="div()" value="Division">
</body>
</html>
Explanation:
document.getElementById(id).value: The value property sets or returns the value of the value attribute of a text field.
document.getElementById("result").innerHTM : The innerHTML property sets or returns the HTML content (inner HTML) of an element.

We Keep Coding

JavaScript is the programming language of the Web.

Textarea Calculations - javascript

Related

Javascript displaying but not calulating [duplicate]

how to convert number to hexa string in js

Add two numbers and display result in textbox with Javascript [closed]

What part of this simple Javascript calculator is wrong?

put in multiply or divide in input field to perform either multiply or divide on the other 2 input fields

Categories

Resources