javascript calculate function - javascript

This JS program should return function ggt(x,z). I tried to implement it this way, everything is ok except this part I believe: document.getElementById("demo").innerHTML=ggt(x,z);
What should be added to make this function work properly? Thanks
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function calculate(){
var a=document.getElementById("in1").value;
var b=document.getElementById("in2").value;
if(isNaN(a) || isNaN(b)){
alert("Not a number");
}else{
ggt(a,b);
}
}
function ggt(x,y){
if (y==0){
return x;
}else{
var z=x%y;
document.getElementById("demo").innerHTML=ggt(x,z);
return ggt(x,z);
}
}
</script>
<div>
<input id="in1" type="text" />
<input id="in2" type="text" />
<input type="button" onclick="calculate()" value="compute" />
<p id="demo"></p>
</div>
</body>
</html>

function calculate()
{
var a = document.getElementById("in1").value;
var b = document.getElementById("in2").value;
if (isNaN(a) || isNaN(b)) {
alert("Not a number");
} else {
var values = ggt(a, b);
console.log(values);
if (values.valid) {
document.getElementById("demonumber").innerHTML = values.number;
document.getElementById("demomodulus").innerHTML = values.modulo;
}
}
}
function ggt(x, y) {
var res = {};
if (y == 0) {
res.valid = false;
} else {
res.valid = true;
res.number = x;
res.modulo = x % y;
}
return res
}
<div>
<input id="in1" type="text" />
<input id="in2" type="text" />
<input type="button" onclick="calculate()" value="compute" />
<p id="demonumber"></p>
<p id="demomodulus"></p>
</div>

Related

Using Buttons in JavaScript

How can you create a button so that whenever you click on it a question changes to its uppercase form, then when you click the button again it changes to its lowercase form. I believe I should create a function of some sort, just not sure how. Below is what I have tried so far:
function upper_lower() {
if (windows.document.f1.value=="lower") {
windows.document.value = "UPPER"
windows.document.question = windows.document.question.toUpperCase();
windows.document.queston.size="40"
} else {
windows.document.value = "lower"
windows.document.question = windows.document.question.toLowerCase()
windows.document.queston.size="30"
}
}
Question
<input type="text" name="question" value="Favorite food?" size="25">
readonly /input
<input type="button" name="f1" value="UPPER" onClick = "upper_lower">
Try this
Html:
Question <input type="text" name="question" id="question1" value="Favorite food?" size="25" readonly></input>
<input type="button" name="f1" id="button1" value="UPPER" onClick="upper_lower()"></input>
js:
var toggle = true;
function upper_lower(){
var question = document.getElementById('question1'),
button = document.getElementById('button1');
if(toggle){
question.value = question.value.toUpperCase();
button.value = 'LOWER';
toggle = false;
} else{
question.value = question.value.toLowerCase();
button.value = 'UPPER';
toggle = true;
}
}
Snippet below (indented weird for some reason)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
Question <input type="text" name="question" id="question1" value="Favorite food?" size="25" readonly></input>
<input type="button" name="f1" id="button1" value="UPPER" onClick="upper_lower()"></input>
</body>
<script>
var toggle = true;
function upper_lower(){
var question = document.getElementById('question1'),
button = document.getElementById('button1');
if(toggle){
question.value = question.value.toUpperCase();
button.value = 'LOWER';
toggle = false;
} else{
question.value = question.value.toLowerCase();
button.value = 'UPPER';
toggle = true;
}
}
</script>
</html>
Try This Updated Code...
<script type="text/javascript">
var flag = 0;
function changecase() {
if (flag == 0) {
document.form1.instring.value = document.form1.instring.value.toUpperCase();
document.form1.Convert.value = 'To Lower'
flag = 1;
}
else
{
document.form1.instring.value = document.form1.instring.value.toLowerCase();
document.form1.Convert.value = 'To Upper'
flag = 0;
}
}
</script>
<form name="form1" method="post">
<input name="instring" type="text" value="this is the text string" size="30">
<input type="button" name="Convert" value="To Upper " onclick="changecase();">
</form>

Putting all the output in a specific textbox in a while loop in JavaScript

So all I want here to happen is that how can I put all the given output in the answer textbox.
UPDATE
<html>
<body>
<script type="text/javascript">
function myFunction() {
var x = parseInt(document.f1.n1.value);
var y = parseInt(document.f1.n2.value);
if(x>=y) {
document.write("Invalid");
}
while (x<y)
{
document.write(x)
x=x+1;
}
}
</script>
<form name=f1 onsubmit="return false">
First no. <input type="text" name="n1">
Second no. <input type="text" name="n2">
Answer: <input type="text" name="ans" disabled>
<input type="submit" onClick="myFunction()">
</form>
</body>
</html>
Thank you in advance
You can do something like this:
Give answer input an id:
<input id="answerTextBox" type="text" name="ans" disabled>
After while loop populate answer textbox:
while (x>y)
{
document.getElementById("answerTextBox").value += ("" + x);
x=x+1;
}
This will put x and y in your answer textbox.
UPDATE******
<html>
<body>
<script type="text/javascript">
function myFunction() {
document.getElementById("answerTextBox").value = "";
var x = parseInt(document.getElementById("n1").value);
var y = parseInt(document.getElementById("n2").value);
if(x >= y)
{
document.getElementById("answerTextBox").value = "Invalid Input";
}
while (x < y)
{
document.getElementById("answerTextBox").value += ("" + x);
x=x+1;
}
}
</script>
First no. <input type="text" name="n1" id="n1">
Second no. <input type="text" name="n2" id="n2">
Answer: <input id="answerTextBox" type="text" name="ans" readonly>
<input type="button" onClick="myFunction()">
</form>
</body>
</html>
UPDATE for exponential************************
<html>
<body>
<script type="text/javascript">
function myFunction() {
document.getElementById("answerTextBox").value = "";
var x = parseInt(document.getElementById("n1").value);
var y = x;
var answer = 1;
for(var i = 0; i < y; i++)
{
answer = answer * x;
}
document.getElementById("answerTextBox").value = answer;
}
</script>
Enter Number: <input type="text" name="n1" id="n1">
Answer: <input id="answerTextBox" type="text" name="ans" readonly>
<input type="button" value="Submit" onClick="myFunction()">
</form>
</body>
</html>
UPDATE Add Exponents*****************
<html>
<body>
<script type="text/javascript">
function myFunction() {
document.getElementById("answerTextBox").value = "";
var x = parseInt(document.getElementById("n1").value);
var y = parseInt(document.getElementById("n2").value);
var answer = 0;
for(var i = 0; i <= y; i++)
{
answer = answer + Math.pow(x, i);
}
document.getElementById("answerTextBox").value = answer;
}
</script>
Enter Base Number: <input type="text" name="n1" id="n1">
Enter Highest Exponent: <input type="text" name="n2" id="n2">
Answer: <input id="answerTextBox" type="text" name="ans" readonly>
<input type="button" value="Submit" onClick="myFunction()">
</form>
</body>
</html>
<html>
<body>
The number inserted in the textbox is the number of exponent it will generate. The sample is 3. 3X3X3 is 27. <br>
<script type="text/javascript">
function myFunction() {
var x = document.f1.n1.value;
while(x<27)
{
x=x*3;
}
document.write(x)
}
</script>
<form name="f1" onsubmit="return false">
First no. <input type="text"name="n1" value=3 disabled>
<input type="submit" onClick="myFunction()">
</form>
</body>
</html>
Update: The Exponent in any number.

how to display different function in a same textbox?

I have this html code with javascript. My average value displays correctly but my find minimum is not displaying anything. Its supposed to show when the user clicks on the find min button on the box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculate Your Grade</title>
<link rel="stylesheet" href="calc.css">
<script>
var $ = function (id) {
return document.getElementById(id);
}
var calculateGrade = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3=parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) ) {
alert("All three entries must be numeric");
}
else {
var average = (exam1 + exam2 + exam3) / 3;
$("average").value = average;
}
}
var min = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3=parseFloat($("exam3").value);
if ( (exam1<exam2) && (exam1<exam3)){
$("mini").value=exam1;}
else if ((exam2<exam1) && (exam2<exam3)){
$("mini").value=exam2;}
else {
$("mini").value=exam3;
}
}
window.onload = function () {
$("calculate").onclick = calculateGrade;
$("mini").onclick = min;
$("exam1").focus();
}
</script>
</head>
<body>
<section>
<h1>Calculate Average</h1>
<label for="exam1">Exam1:</label>
<input type="text" id="exam1"><br>
<label for="exam2">Exam2:</label>
<input type="text" id="exam2"><br>
<label for="exam3">Exam3:</label>
<input type="text" id="exam3"><br>
<label for="average"></label>
<input type="text" id="average"disabled ><br>
<label> </label>
<input type="button" id="calculate" value="Calc Avg">
<input type="button" id="mini" value="Find min">
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculate Your Grade</title>
<link rel="stylesheet" href="calc.css">
<script>
var $ = function (id) {
return document.getElementById(id);
}
var average = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3 = parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) || isNaN(exam3)) {
alert("All three entries must be numeric");
}
else {
var average = (exam1 + exam2 + exam3) / 3;
$("result").value = average;
}
}
var min = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3 = parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) || isNaN(exam3)) {
alert("All three entries must be numeric");
} else {
$("result").value = Math.min(exam1,exam2,exam3);
}
}
window.onload = function () {
$("average").onclick = average;
$("mini").onclick = min;
$("exam1").focus();
}
</script>
</head>
<body>
<section>
<h1>Calculate</h1>
<label for="exam1">Exam1:</label>
<input type="text" id="exam1"><br>
<label for="exam2">Exam2:</label>
<input type="text" id="exam2"><br>
<label for="exam3">Exam3:</label>
<input type="text" id="exam3"><br>
<label for="average"></label>
<input type="text" id="result" disabled ><br>
<label> </label>
<input type="button" id="average" value="Calc Avg">
<input type="button" id="mini" value="Find min">
</section>
</body>
</html>
The issue is with the min function. Instead of setting the value of textbox (probably, missing in your code example) you are setting the value of button "mini" (which is incorrect).
Update:
You need to be including one more textbox <input type="text" id="txtMin" disabled ><br>
and update your min function to set the value of it, as follows:
$("txtMin").value=exam1;
...
$("txtMin").value=exam2;
...
$("txtMin").value=exam3;

Problems with JavaScript calculator

I'm making this calculator and have no idea why nothing comes into tulos box. Here is the code, I hope someone can help me. I'm starter with these kind of things, so there might be some really big mistakes in code.
<html>
<head>
<title>Laskurit</title>
</head>
<body>
<script language="JavaScript">
<!--
function Laskin() {
var paino = document.korvaus.paino.value;
var hinta = document.korvaus.hinta.value;
var mista = document.korvaus.mista.value;
var tulos;
if (mista == "koti")
{
paino *= 20 == koti1;
if (koti1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = koti1;
}
}
else if (mista == "ulko")
{
paino *= 9,75 == ulko1;
if (ulko1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = ulko1;
}
}
document.korvaus.tulos.value = tulos;
}
-->
</script>
<p><b>Korvauslaskuri</b></p>
<form name="korvaus">
<table><tr><td>Paino: <td><input type="text" name="paino"><br>
<tr><td>Kokonaishinta(€): <td><input type="text" name"hinta"><br>
<tr><td>Mistä/mihin?<br>
<td><select name="mista">
<option value="koti">Kotimaa</option>
<option value="ulko">Ulkomaa</option>
</select>
<tr><td>
<p>Korvausmäärä(€):</p>
<td><p><input type="text" size="40" name="tulos"></p>
</table></form>
<form name="nappulalomake">
<p><input type="button" name="B1" value="Laske" onClick="Laskin()"></p>
</form>
</body>
</html>
Not exactly sure what you are trying to accomplish but there were a few syntax errors in your code. Here working code
<html>
<head>
<title>Laskurit</title>
<script language="JavaScript">
<!--
function Laskin() {
var paino = document.korvaus.paino.value;
var hinta = document.korvaus.hinta.value;
var mista = document.korvaus.mista.value;
var tulos;
if (mista == "koti")
{
var koti1 = paino *20;
if (koti1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = koti1;
}
}
else if (mista == "ulko")
{
var ulko1 = paino *9.75;
if (ulko1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = ulko1;
}
}
document.korvaus.tulos.value = tulos;
}
-->
</script>
</head>
<body>
<p><b>Korvauslaskuri</b></p>
<form name="korvaus">
<table border=0>
<tr><td>Paino: </TD><td><input type="text" name="paino"></td></tr>
<tr><td>Kokonaishinta(€):</tD><td><input type="text" name="hinta"></td></tr>
<tr><td>Mistä/mihin?</td><td><select name="mista">
<option value="koti">Kotimaa</option>
<option value="ulko">Ulkomaa</option>
</select>
</td></tr>
<tr><td>
<p>Korvausmäärä(€):</p></td>
<td><p><input type="text" size="40" name="tulos"></p></td>
</tr>
</table></form>
<form name="nappulalomake">
<p><input type="button" name="B1" value="Laske" onClick="Laskin()"></p>
</form>
</body>
</html>

Getting the value of a textbox then parsing it

I am creating a simple calculator in javascript but how come each time I added numbers it only adds the the first half of the 2nd number? for example
first input: 55
second input: 55
then it will give me an answer of 60.
it only adds the lower half of the 2nd input.
here's my code
var fnum;
var secondNum;
var operation;
function msg(val){
document.getElementById("fnumtext").value += val;
fnum = val;
}
function showOperation(oper){
document.getElementById("fnumtext").value ="";
document.getElementById("operation").value = oper;
operation = oper;
}
function equal(){
secondNum = document.getElementById("fnumtext").value;
alert(secondNum+operation);
if(document.getElementById("operation").value == "+"){
var x = parseInt(fnum)+parseInt(secondNum);
alert(x);
}else if(document.getElementById("operation").value == "-"){
var x = parseInt(fnum)-parseInt(secondNum);
alert(x);
}else if(document.getElementById("operation").value == "*"){
var x = parseInt(fnum)*parseInt(secondNum);
alert(x);
}else if(document.getElementById("operation").value == "/"){
var x = parseInt(fnum)/parseInt(secondNum);
alert(x);
}else{
alert("choose some Operation");
}
}
my HTML
body>
<input id = "fnumtext"type="text" name="firstnum" /><br />
<input id = "operation" type="text" name="secondnum" /><br />
<input type="button" value="1" onclick="msg('1')" />
<input type="button" value="2" onclick="msg('2')" />
<input type="button" value="3" onclick="msg('3')" /></br>
<input type="button" value="4" onclick="msg('4')" />
<input type="button" value="5" onclick="msg('5')" />
<input type="button" value="6" onclick="msg('6')" /><br/>
<input type="button" value="7" onclick="msg('7')" />
<input type="button" value="8" onclick="msg('8')" />
<input type="button" value="9" onclick="msg('9')" /></br>
<input type="button" value="0" onclick="msg('0')" /></br>
<input type="button" value="+" onclick="showOperation('+')" />
<input type="button" value="*" onclick="showOperation('*')" />
<input type="button" value="/" onclick="showOperation('/')" />
<input type="button" value="-" onclick="showOperation('-')" />
<input type="button" value="DO ZEH OPERATION!" onclick="equal()" />
</body>
In msg, you set the value of fnum rather than appending it. Try changing that to +=.
function msg(val){
document.getElementById("fnumtext").value += val;
fnum += val; // changed this line
}
First you need to keep track whether this is a first operand you're entering now or the second one.
Second, you must add current digit's value to the already accumulated values, not override them.
var fnum;
var secondNum;
var operation;
var firstOperand = true;
function msg(val) {
document.getElementById("fnumtext").value += val;
if (firstOperand) {
fnum = document.getElementById("fnumtext").value;
}
}
function showOperation(oper)
{
firstOperand = false;
document.getElementById("fnumtext").value = "";
document.getElementById("operation").value = oper;
operation = oper;
}
function equal() {
secondNum = document.getElementById("fnumtext").value;
alert(secondNum+operation);
if (document.getElementById("operation").value == "+") {
var x = parseInt(fnum) + parseInt(secondNum);
alert(x);
} else if (document.getElementById("operation").value == "-") {
var x = parseInt(fnum) - parseInt(secondNum);
alert(x);
} else if (document.getElementById("operation").value == "*") {
var x = parseInt(fnum) * parseInt(secondNum);
alert(x);
} else if (document.getElementById("operation").value == "/") {
var x = parseInt(fnum) / parseInt(secondNum);
alert(x);
} else {
alert("choose some Operation");
}
firstOperand = true;
document.getElementById("fnumtext").value = "";
}

Categories