How to retain the value when returned - javascript

is there a way where x and y, when returned, can retain the value that has been inputted instead of being undefined?
Just in case you need the objective of the code here it is:
Call the function inputNumber to accept 2 values (var x and y turned into int a and b) then call getAverage. Call inputNumber again to input the value for var z turned into int c then call checkInterval.
Here is my code:
var i = 0;
function inputNumber() {
if(i == 1){
var z = prompt("Input the value of c");
var c = parseInt(z);
checkInterval(a,b,c);
}else{
var x = prompt("Input the value of a");
var y = prompt("Input the value of b");
return x;
return y;
}
}
var a = parseInt(x);
var b = parseInt(y);
getAverage(a,b);
function getAverage(a,b) {
average = (a + b)/2;
div1.innerHTML = "The average of a and b is " + average;
i++;
return i;
}
inputNumber();
function checkInterval(a,b,c) {
if(a<b && a<c<<b || b<a && b<c<a){
div2.innerHTML = "c is an interval of a and b";
alert("TRUE");
}else{
div2.innerHTML = "c is not an interval of a and b";
alert("FALSE");
}
}
<body onload="inputNumber()">
<div id="div1"></div>
<div id="div2"></div>
</body>

I have updated your solution with my interpretation.
Some issues that I identified in your code.
A javascript function cannot return more that one value. In that scenario, you have to go for returning a javascript object.
Also there was some issue in your comparison logic in checkInterval function, I have implemented my own logic there.
var i = 0;
const div1 = document.getElementById('div1');
const div2 = document.getElementById('div2');
const { x, y } = inputNumber();
function inputNumber() {
if (i == 1) {
var z = prompt("Input the value of c");
var c = parseInt(z);
checkInterval(a, b, c);
} else {
var x = prompt("Input the value of a");
var y = prompt("Input the value of b");
i++;
return {
x: x,
y: y,
}
}
}
var a = parseInt(x);
var b = parseInt(y);
getAverage(a, b);
function getAverage(a, b) {
average = (a + b) / 2;
div1.innerHTML = "The average of a and b is " + average;
return i;
}
inputNumber();
function checkInterval(a, b, c) {
if ((a < c && c < b) || (b < c && c < a)) {
div2.innerHTML = "c is an interval of a and b";
alert("TRUE");
} else {
div2.innerHTML = "c is not an interval of a and b";
alert("FALSE");
}
}
<div id="div1"></div>
<div id="div2"></div>

Your variables x and y are function scoped so they are available only within the function where they are defined. So, you need to define it in the outer scope so that all functions have access to it. See the code snippet below, it should help!
Also, avoid using innerHTML use innerText or textContent instead.
var x;
function demo() {
x = prompt("Enter a number");
after();
}
function after() {
alert("Your number is " + x);
}
<body onload="demo()">
</body>

Related

If/else condition is killing my function

I am new to javascript and I was trying to make a simple calculator for 2 values from input fields, plus an operator from a select drop down.
Plus, a button that runs a function that writes the result of the operation.
I have been building this, however, I am stuck in the stage of the con dition:
I want to:
- if slect +, do a sum
- if select - do subtraction
- if select * do multiplication
- if select / do a division
Here is my function
function multiply()
{
var x = document.getElementById('x_value').value;
var y = document.getElementById('y_value').value;
var signal = get_operator();
var u = parseInt(x,10) + parseInt(y,10);
var v = x - y;
var w = x * y;
var z = x / y;
/*
if(signal == plus)
{
document.getElementById('result').innerHTML = u;
}
else if(signal == minus)
{
document.getElementById('result').innerHTML = v;
}
else if(signal == times)
{
document.getElementById('result').innerHTML = w;
}
else
{
document.getElementById('result').innerHTML = z;
}
*/
}
Note that I have commented the logical test on purpose.
The get_operator function is working well
function get_operator(operator)
{
var operator = document.getElementById("operation").value;
return operator;
}
and the print result button itself is working.
If I put for example
function multiply()
{
var x = document.getElementById('x_value').value;
var y = document.getElementById('y_value').value;
var signal = get_operator();
var u = parseInt(x,10) + parseInt(y,10);
var v = x - y;
var w = x * y;
var z = x / y;
document.getElementById('result').innerHTML = u /*[or any other of my values]*/;
}
so, the issue is clearly with the if/else condition test. Because, when I use it, the button stops working.
Could you please be so kind as to give me some hint?
Thank you in advance
You need to parse the strings into numbers for all operations, not only additions:
x = parseInt(x, 10);
y = parseInt(y, 10);
You need to compare your operator to a string value:
if (signal == 'plus') { ... }
else if (signal == 'minus') { ... }
else ...
The fixed code then looks like:
function get_operator(operator) {
var operator = document.getElementById("operation").value;
return operator;
}
function multiply() {
var x = document.getElementById('x_value').value;
var y = document.getElementById('y_value').value;
var signal = get_operator();
x = parseInt(x, 10);
y = parseInt(y, 10);
var u = x + y;
var v = x - y;
var w = x * y;
var z = x / y;
var z = x / y;
if (signal == 'plus') {
document.getElementById('result').innerHTML = u;
} else if (signal == 'minus') {
document.getElementById('result').innerHTML = v;
} else if (signal == 'times') {
document.getElementById('result').innerHTML = w;
} else {
document.getElementById('result').innerHTML = z;
}
}
document.getElementById("compute").addEventListener("click", function(event) {
multiply();
});
<input type="text" id="x_value">
<input type="text" id="y_value">
<select id="operation">
<option value="plus">+</option>
<option value="minus">-</option>
<option value="times">*</option>
<option value="divide">/</option>
</select>
<button id="compute">Compute</button>
<div id="result"></div>
A much cleaner way to implement the same functionality is given by:
const operations = {
"plus": (a, b) => a + b,
"minus": (a, b) => a - b,
"times": (a, b) => a * b,
"divide": (a, b) => a / b,
}
const compute = document.getElementById("compute");
const operator = document.getElementById("operator");
const first = document.getElementById("first-operand");
const second = document.getElementById("second-operand");
const result = document.getElementById("result");
compute.addEventListener("click", () => {
const operation = operations[operator.value];
result.textContent = operation(first.valueAsNumber, second.valueAsNumber);
});
<input type="number" id="first-operand">
<input type="number" id="second-operand">
<select id="operator">
<option value="plus">+</option>
<option value="minus">-</option>
<option value="times">*</option>
<option value="divide">/</option>
</select>
<button id="compute">Compute</button>
<div id="result"></div>

How to add two big numbers in javascript?

I have two text boxes. Each will take input up to thousand digits.
Now i want to add these two numbers. My question is what data type should i use to store the result?
I have tried this:
<script>
var x = 'Thousand digit of number'
var y = 'Thousand digit of number'
var z = x + y
</script>
but i am getting result in exponential form. How to store the result and display it?
Yet another solution, because it's faster and cleaner.
function add(A, B) {
const AL = A.length
const BL = B.length
const ML = Math.max(AL, BL)
let carry = 0, sum = ''
for (let i = 1; i <= ML; i++) {
let a = +A.charAt(AL - i)
let b = +B.charAt(BL - i)
let t = carry + a + b
carry = t/10 |0
t %= 10
sum = (i === ML && carry)
? carry*10 + t + sum
: t + sum
}
return sum
}
> add(
'9999999999999999999999999999999999999999999999999999999999999999999999999999',
'999999999999999999999999999999999999999'
)
> "10000000000000000000000000000000000000999999999999999999999999999999999999998"
Use BigInt as described here: https://stackoverflow.com/a/56370672/641913
const z = BigInt(x) + BigInt(y);
console.log(z.toString());
Here is another solution not so different from others you can find in the internet (consider that it doesn't work with negative numbers!):
function sums(arg1, arg2) {
var sum = "";
var r = 0;
var a1, a2, i;
// Pick the shortest string as first parameter and the longest as second parameter in my algorithm
if (arg1.length < arg2.length) {
a1 = arg1;
a2 = arg2;
}
else {
a1 = arg2;
a2 = arg1;
}
a1 = a1.split("").reverse();
a2 = a2.split("").reverse();
// Sum a1 and a2 digits
for (i = 0; i < a2.length; i++) {
var t = ((i < a1.length) ? parseInt(a1[i]) : 0) + parseInt(a2[i]) + r;
sum += t % 10;
r = t < 10 ? 0 : Math.floor(t / 10);
}
// Append the last remain
if (r > 0)
sum += r;
sum = sum.split("").reverse();
// Trim the leading "0"
while (sum[0] == "0")
sum.shift();
return sum.length > 0 ? sum.join("") : "0";
}
// Test
function testEquals(expected, actual) {
if (expected == actual)
console.log("OK: " + expected);
else
console.error("ERROR: " + expected + " != " + actual);
}
testEquals("100", sums("99", "1"));
testEquals("100", sums("00099", "0001"));
testEquals("10000000000", sums("9999999999", "1"));
testEquals("10000010101", sums("9999999999", "10102"));
testEquals("0", sums("0", "0"));
testEquals("1", sums("0", "1"));
testEquals("9", sums("8", "1"));
testEquals("9", sums("1", "8"));
testEquals("10000000000000000000000000000000000000000", sums("9999999999999999999999999999999999999999", "1"));
Input the numbers as string and add each characters each other as array something like this:
function add() {
document.getElementById("demo").innerHTML = "";
var x = document.getElementById("txt1").value;
var y = document.getElementById("txt2").value;
var len;
var lenx = x.length;
var leny = y.length;
var x1,y1,rem,div=0;
if(lenx>leny) len = lenx; else len = leny;
for(var i=0;i<len;i++){
if(i>=lenx) x1 = 0;
else x1 = parseInt(x[lenx-i-1]);
if(i>=leny) y1 = 0;
else y1 = parseInt(y[leny-i-1]);
rem = (x1+y1+div)%10;
div = Math.floor((x1 + y1+div)/10);
document.getElementById("demo").innerHTML = rem + document.getElementById("demo").innerHTML;
}
if(div>0){
document.getElementById("demo").innerHTML = div + document.getElementById("demo").innerHTML;
}
}
Here the code: https://jsfiddle.net/mtsL1k2x/5/
Note: this is only for natural numbers. You can modify depending on your inputs
Either use a big number library like https://mathjs.org/docs/datatypes/bignumbers.html , or you can use something lighter weight (but easy to understand) like http://www.discoversdk.com/knowledge-base/arbitrary-length-integer-addition-in-javascript
Well, if you want to do this without using BigInt or any third-party Library, then I don't think you need to convert to an array, you can use the charAt() function to add the individual characters at each point in the string. You would have to use the for loop starting from its maximum value and reducing till its lowest. The code snippet is below;
function add(a, b) {
let sum='';
let z,x;
let r=0;
if (a.length>=b.length){
z=a;
x=b;
}
else{
z=b;
x=a;
};
let p=x.length;
for (let i=z.length;i>0;i--){
let t=((p>0)?parseInt(x.charAt(p-1)):0)+parseInt(z.charAt(i-1))+r;
sum=(t%10)+sum;
r=t<10?0:Math.floor(t/10);
p=p-1;
};
if (r>0){sum=r+sum};
return sum;
};
function add(a, b) {
a = a.split("").reverse();
b = b.split("").reverse();
let maxLen=Math.max(a.length, b.length);
let sum = [];
let remainder = 0;
for (let i = 0; i < maxLen; i++) {
let x = parseInt(a[i]) ? parseInt(a[i]) : 0;
let y = parseInt(b[i]) ? parseInt(b[i]) : 0;
let digit = (x + y + remainder) % 10;
remainder = Math.floor((x + y + remainder) / 10);
sum.unshift(digit);
}
if (remainder) {sum.unshift(remainder)}
return sum.join("");
}
function add(x, y) {
//this function adds two extremely large numbers, negative and/or positive
var temp, borrow=false, bothNeg=false, oneNeg=false, neg=false;
if (x < 0 && y < 0) { bothNeg = true; x = -x; y = -y; }
else if (x < 0 || y < 0) {
oneNeg = true;
if (Math.abs(x) == Math.abs(y)) { x = 0; y = 0; }
else if (x < 0 && Math.abs(x) > Math.abs(y)) { neg = true; x = -x; y = -y; }
else if (x < 0 && Math.abs(x) < Math.abs(y)) { temp = y; y = x; x = temp; }
else if (y < 0 && Math.abs(x) < Math.abs(y)) { neg = true; temp = y; y = -x; x = -temp; }
}
x = parseInt(x*1000000000/10).toString();
y = parseInt(y*1000000000/10).toString();
var lenx=x.length, leny=y.length, len=(lenx>leny)?lenx:leny, sum="", div=0, x1, y1, rem;
for (var i = 0; i < len; i++) {
x1 = (i >= lenx) ? 0 : parseInt(x[lenx-i-1]);
y1 = (i >= leny) ? 0 : parseInt(y[leny-i-1]);
y1 = (isNaN(y1)) ? 0 : y1;
if (oneNeg) y1 = -y1;
if (borrow) x1 = x1 - 1;
if (y < 0 && x1 > 0 && Math.abs(x1) >= Math.abs(y1)) { borrow=false; div=0; }
if (y < 0 && y1 <= 0 && (x1 < 0 || Math.abs(x1) < Math.abs(y1))) { borrow=true; rem=(x1+y1+div+10)%10; div=10; }
else { rem=(x1+y1+div)%10; div=Math.floor((x1+y1+div)/10); }
sum = Math.abs(rem).toString() + sum;
}
if (div > 0) sum = div.toString() + sum;
sum = parseFloat(sum*10/1000000000);
if (bothNeg || neg) sum = -sum;
return sum;
}
<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>
https://jsfiddle.net/Sanjeevgaut/mtsL1k2x/

for loop works fine with console.log but not innerHTML?

hello i'm very new to javascript so forgive me if the answer seems obvious...
this is my code which is executed at the click of a button in the body
function q() {
var A = document.getElementById("time_one").value;
var B = document.getElementById("time_two").value;
var C = document.getElementById("post_number").value;
var D = (B - A) / C;
for ( var x = A; x < B; x = x + D ) {
document.getElementById("q_box").innerHTML = x + "<br />";
}
}
i'm pretty sure the error is in the for loop... the output is supposed to be a list of numbers between A and B. and changing the innerHTML = to innerHTML += hasn't worked either?
function q() {
var A = +document.getElementById("time_one").value;
var B = +document.getElementById("time_two").value;
var C = +document.getElementById("post_number").value;
var D = (B - A) / C;
for ( var x = A; x < B; x = x + D ) {
document.getElementById("q_box").innerHTML += x + "<br />";
}
}
You should convert the values in int and you should use +=
With innerHTML code inside the for loop you are always setting the value with the last time iterated value. Hence, you need to update your code to
for ( var x = A; x < B; x = x + D ) {
document.getElementById("q_box").innerHTML += x + "<br />";
}
OR
var y = "";
for ( var x = A; x < B; x = x + D ) {
y += x + "<br />";
}
document.getElementById("q_box").innerHTML = y;
I will recommend you to go for 2nd option, as it is better to set the updated value at once and not to extract the value and update for each iteration.

Perfect Randomizer

I am trying to make an array, shuffle it, then go through it in order. However, when I shuffle it (START) more than once, it messes up! Also When you get to the last number in the randomized array, it messes up also! please help and thank you!
JS
var minnum = 1;
var maxnum = 104;
function start() {
var nums = [];
while(minnum < maxnum+1){
nums.push(minnum++);
}
function shuffle(o) {
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}
var randomnum = shuffle(nums);
document.getElementById('txt').innerHTML = randomnum;
localStorage["nums"] = JSON.stringify(randomnum);
localStorage.setItem("current", 0);
}
function Link() {
if (localStorage.getItem("current") === null || localStorage.getItem("nums") === null) {
start();
}
var current = localStorage.getItem("current");
var nums = JSON.parse(localStorage["nums"]);
document.getElementById('txt').innerHTML = nums;
document.getElementById('txt1').innerHTML = nums[current];
current++;
if(current > 103) {
location.reload();
start();
current = 0;
}
localStorage.setItem("current", current);
}
HTML
<body>
<input type="button" onclick="start()" value="Start" />
<span id="txt"></span>
<input type="button" onclick="Link()" value="Next" />
<span id="txt1"></span>
</body>
The error seems to be that minnum AND maxnum are declared outside of the start() function and never initialized to 1 and 104 anymore, hence whenever you hit start the second time the first while will not push anything to nums array because minnum is 103 (from the previous cycle) and maxnum 104.
Fiddle:
http://jsfiddle.net/1pd18eun/1/
Code (just moved minnum and maxnum inside):
function start()
{
var minnum = 1;
var maxnum = 104;
var nums = [];
while(minnum < maxnum+1){
nums.push(minnum++);
}
var randomnum = shuffle(nums);
document.getElementById('txt').innerHTML = randomnum;
localStorage["nums"] = JSON.stringify(randomnum);
localStorage.setItem("current", 0);
}
function shuffle(o) {
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}
function Link()
{
if (localStorage.getItem("current") === null || localStorage.getItem("nums") === null) {
start();
}
var current = localStorage.getItem("current");
var nums = JSON.parse(localStorage["nums"]);
document.getElementById('txt').innerHTML = nums;
document.getElementById('txt1').innerHTML = nums[current];
current++;
if(current > 103)
{
location.reload();
start();
current = 0;
}
localStorage.setItem("current", current);
}
Besides, for the sake of readers and good people, start to indent your code, it was very hard to properly understand what you were doing.

Javascript problems with a function not working (it converts fractions into decimals)

Let's say I have a string (like a fraction);
var num = "1/2";
Why does this work:
var y = num.split(' ');
if (y.length > 1) {
var z = y[1].split('/');
var a = (+y[0] + (z[0] / z[1]));
num = a;
} else {
z = y[0].split('/');
if (z.length > 1) {
a = (z[0] / z[1]);
num = a;
}
}
alert(num); //The alert box shows my variable now as a decimal.
And this doesn't:
function parseFractions(x) {
var y = x.split(' ');
if (y.length > 1) {
var z = y[1].split('/');
var a = (+y[0] + (z[0] / z[1]));
x = a;
} else {
z = y[0].split('/');
if (z.length > 1) {
a = (z[0] / z[1]);
x = a;
}
}
}
parseFractions(num); //Here I call my function.
alert(num);
//The alert box does not even show up. The fraction isn't converted into a decimal.
It's basically the same thing, the only difference is that in the 2nd one I tried to make that into a function so I don't have to repeat those lines of code every time I try to convert fractions into decimals.
So what am I doing wrong? Is what I am trying to accomplish possible with a function? Any light into this issue is appreciated!
the value of num is not updated, it is not passed by reference.
function parseFractions(x) {
var y = x.split(' ');
if (y.length > 1) {
var z = y[1].split('/');
var a = (+y[0] + (z[0] / z[1]));
x = a;
} else {
z = y[0].split('/');
if (z.length > 1) {
a = (z[0] / z[1]);
x = a;
}
}
return x;
}
num = parseFractions(num); //set num with the value return from the method
alert(num);
You need to return your value
Add a return to the end of your function
return x;
Adn then call the function with
alert(parseFractions(num)); //Here I call my function.

Categories