We Keep Coding

How do I fix this code? It's use 3 seperate functions one to add to the array, one to sort and one to display. Javascript

I'm doing a question that asks: Read 10 numbers and print the biggest number from the list of reading numbers. Make use of Array and Functions.
One Function to read the integer numbers and another function to print the biggest number from the list.
I'm having trouble with getting the biggest number and returning it back to the code so that I can display it. I've messed around with it allot so it might not make as much sense right now (I'm sorry).
I've been stuck on it forever any help would be much appreciated :).
var numbers = [];
var BiggestNumber = 0;
BigestNumber = BiggestSort(numbers);
numbers = ReadNumbers();
Display(BiggestNumber)
function ReadNumbers() {
var ArgNumbers = [];
var ArgInput;
var ctr;
for (ctr = 0; ctr < 3; ctr++) {
ArgInput = parseFloat(prompt("Please enter a number: "));
ArgNumbers.push(ArgInput);
}
return ArgNumbers;
}
function BiggestSort(ArgNumber) {
var ArgNumber = [];
var ArgBiggest = 0;
var ctr;
for (ctr = 0; ctr < 3; ctr++)
if (ArgNumber[ctr] > ArgBiggest) {
ArgBiggest = ArgNumber[ctr];
}
return ArgBiggest;
}
function Display(ArgNumber) {
alert("The biggest number was: " + ArgNumber);
}

I've added a snippet at the end that demonstrates how I might do such a thing from scratch, but let's look at your code first:
From the top:
There's no need to declare numbers and BiggestNumber with initial values and then immediately reassign them. Declare them at assignment time:
// var numbers = [];
// var BiggestNumber = 0;
const BigestNumber = BiggestSort(numbers);
const numbers = ReadNumbers();
There's a typo in BigestNumber (missing second 'g'):
// const BigestNumber = BiggestSort(numbers);
const BiggestNumber = BiggestSort(numbers);
const numbers = ReadNumbers();
You're calling BiggestSort(numbers) before numbers has a meaningful value. Call ReadNumbers() first to initialize numbers, then pass it to BiggestSort:
// const BiggestNumber = BiggestSort(numbers);
// const numbers = ReadNumbers();
const numbers = ReadNumbers();
const BiggestNumber = BiggestSort(numbers);
Again, no need to declare ArgInput and ctr separately. It doesn't really hurt anything, but it's unnecessary:
function ReadNumbers() {
const ArgNumbers = [];
// var ArgInput;
// var ctr;
for (let ctr = 0; ctr < 3; ctr++) {
const ArgInput = parseFloat(prompt("Please enter a number: "));
ArgNumbers.push(ArgInput);
}
return ArgNumbers;
}
You're receiving an ArgNumber parameter, and then declaring another variable with the same name. Use the argument passed in.
Because the ArgNumber parameter is an array, you can use its length property in the loop condition instead of hard-coding 3.
You're missing curly braces around your loop body.
function BiggestSort(ArgNumber) {
// var ArgNumber = [];
let ArgBiggest = 0;
// var ctr;
// for (ctr = 0; ctr < 3; ctr++)
for (let ctr = 0; ctr < ArgNumber.length; ctr++) { // added curly brace
if (ArgNumber[ctr] > ArgBiggest) {
ArgBiggest = ArgNumber[ctr];
}
} // added closing brace
return ArgBiggest;
}
With the changes described above, it works:
const numbers = ReadNumbers();
const BiggestNumber = BiggestSort(numbers);
Display(BiggestNumber);
function ReadNumbers() {
const ArgNumbers = [];
for (let ctr = 0; ctr < 3; ctr++) {
const ArgInput = parseFloat(prompt("Please enter a number: "));
ArgNumbers.push(ArgInput);
}
return ArgNumbers;
}
function BiggestSort(ArgNumber) {
let ArgBiggest = 0;
for (let ctr = 0; ctr < ArgNumber.length; ctr++) {
if (ArgNumber[ctr] > ArgBiggest) {
ArgBiggest = ArgNumber[ctr];
}
}
return ArgBiggest;
}
function Display(ArgNumber) {
alert("The biggest number was: " + ArgNumber);
}
Consider this approach:
// A function to prompt for a series of numbers:
// The 'count' parameter is how many numbers to prompt for.
// The 'previous' parameter is an array of the numbers already entered, initally empty.
function readNumbers (count, previous = []) {
// if count is zero, we're done. return the already entered numbers.
if (count === 0) {
return previous;
}
// prompt for the next number
const number = parseFloat(prompt('Enter a number: '));
// push the new number onto the end of the list
previous.push(number);
// call readNumbers again, subtracting one from 'count'
// and return whatever it returns.
return readNumbers(count - 1, previous);
}
// invoke readNumbers to prompt the user.
const numbers = readNumbers(3);
// use Math.max to find the largest number
const largest = Math.max(...numbers);
// show the result
alert(`The biggest number was ${largest}`);

Correct typos like BigestNumber and BiggestNumber.
do ReadNumbers before BiggestSort method call.
remove\avoid reassigning to parameters\args you pass into method scopes, i.e. ArgNumber in the BiggestSort method.
var numbers = [];
numbers = ReadNumbers(3);
BiggestNumber = BiggestSort(numbers);
Display(BiggestNumber)
function ReadNumbers(numberToRead) {
var ArgNumbers = [];
var ArgInput;
for (var ctr = 0; ctr < numberToRead; ctr++) {
ArgInput = parseFloat(prompt("Please enter a number: "));
ArgNumbers.push(ArgInput);
}
return ArgNumbers;
}
function BiggestSort(ArgNumber) {
var ArgBiggest = 0;
for (var ctr = 0, max = ArgNumber.length; ctr < max; ctr++)
if (ArgNumber[ctr] > ArgBiggest) {
ArgBiggest = ArgNumber[ctr];
}
return ArgBiggest;
}
function Display(ArgNumber) {
alert("The biggest number was: " + ArgNumber);
}
I also passed in the number of loops (numberToRead) and ensure the loop in BiggestSort uses the length of the passed array (ArgNumber).

How to get numbers 1-20 into an array, then separate even and odd numbers and print them on the web browser

Im new to Javascript and i cant figure out how to make this work. I have to use an array. I can only get it to show one of the numbers in the browser.
it prints:
Even Number = 20
I need it to print:
Odd Number = 1
Even Number = 2
Odd Number = 3
Even Number = 4
Odd Number = 5
Even Number = 6
Odd Number = 7
Even Number = 8
Odd Number = 9
Even Number = 10
Odd Number = 11
Even Number = 12
Odd Number = 13
Even Number = 14
Odd Number = 15
Even Number = 16
Odd Number = 17
Even Number = 18
Odd Number = 19
Even Number = 20
Here is what I have. Any help would be appreciated.
<script>
var numbers = [];
for (var i=1; i<=20; i++){
numbers.push(i);
if (i % 2 === 0){
document.getElementById("demo").innerHTML ="Even Number = "+i;
}
else {
document.getElementById("demo").innerHTML ="Odd Number = "+i;
}
}
</script>

That is because when you are doing document.getElementById("demo").innerHTML it is overwriting the previous content. Instead during each iteration create a div element and then append that as child of div#demo
var numbers = [];
for (var i = 1; i <= 20; i++) {
numbers.push(i);
let createElem = document.createElement('div');
let creatTxtNode;
if (i % 2 === 0) {
createTxtNode = document.createTextNode("Even Number = " + i);
} else {
createTxtNode = document.createTextNode("Odd Number = " + i);
}
createElem.appendChild(createTxtNode)
document.getElementById("demo").appendChild(createElem);
}
<div id='demo'></div>

Since you are assigning (=) the new value to the element, in each iteration the previous values are removed. You can either use += to concatenate the new value with the previous value OR try with insertAdjacentHTML():
var numbers = [];
var targetEl = document.getElementById("demo")
for (var i=1; i<=20; i++){
numbers.push(i);
if (i % 2 === 0){
targetEl.insertAdjacentHTML('beforeend', "Even Number = "+i + "<br>");
}
else {
targetEl.insertAdjacentHTML('beforeend', "Odd Number = "+i+ "<br>");
}
}
<div id="demo"><div>

You're on the right path with your solution. Just replace innerHTML = ... with innerHTML += ....
That will do the trick for you since with each iteration innerHTML operation is replacing your existing content, you actually need to append it.

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
var copyNumbers = [];
var targetEl = document.getElementById("getNumbers")
numbers.forEach(function(i) {
copyNumbers.push(i);
switch (i % 2) {
case 0:
getNumbers.innerHTML += ("Even Number = <b><i>" + i + "</i></b><br />");
break;
default:
getNumbers.innerHTML += ("Odd Number = <b><i>" + i + "</i></b><br />");
}
});
<div id='getNumbers'></div>
Note:- you need to replace innerHTML = ... with innerHTML += .... each iteration instead of replacing your existing content, you need to append it.

<html>
<body>
<div id="demo"></div>
</body>
<script>
function evenOdd() {
//Create an array of even odd numbers result
evenOddArray = [...Array(20).keys()].map(x => {
if((x+1)%2==0){
return "Even Number = " + (x+1)
}
return "Odd Number = " + (x+1)
})
//loop through each result
evenOddArray.forEach(x => {
var t = document.createTextNode(x);// Create a text node
var br = document.createElement("br") // Create a new line node
document.getElementById("demo").appendChild(t) //append to demo
document.getElementById("demo").appendChild(br)
})
}
evenOdd()
</script>
</html>
https://jsfiddle.net/zpcu5mb8/

There are two key things.
First, as the others have noted, your use of innerHTML simply replaces the content each time which is why you're only getting the last output from the loop.
Second: "I have to use an array."
While you're pushing numbers to your array in your example ultimately it's pointless - you add numbers to it but don't use the array in any way. If it's a requirement for your work, you might get marked down for that.
So here's an example that fixes both issues:
1) It creates an array of numbers
2) It loops over that array of numbers and produces the output
// First we create out numbers array...
const numbers = [];
// ...and fill it with numbers
for (let i = 1; i <= 20; i++) {
numbers.push(i);
}
// We create an output array to store our strings
// You could concatenate the strings in the loop with `+=`
// but building an array and joining it up later is a little cleaner
const output = [];
// Now: loop over the numbers array
for (let i = 0; i < numbers.length; i++) {
// Grab the number. We want to check whether that
// is even/odd instead of the index
const number = numbers[i];
// Our condition: we push a different string to the array
// depending on whether its even/odd. I've used template literals
// as they're cleaner solution to using string concatenation
if (number % 2 === 0) {
output.push(`Even number = ${number}`);
} else {
output.push(`Odd number = ${number}`);
}
}
// Finally we grab our element
const demo = document.querySelector('#demo');
// And we add the joined up array to it
demo.insertAdjacentHTML('beforeend', output.join('<br/>'));
<div id="demo"></div>
Further reading
insertAdjacentHTML
Template literals

How do I use a for-loop to add values to a JS variable? [duplicate]

This question already has answers here:
How to add two strings as if they were numbers? [duplicate]
(20 answers)
Closed 4 years ago.
I have made a piece of code that generates a random code of 12 characters. I am using Math.random and for-loops to do this. On the page you can write in an input how many codes you want.
What I want to do is save the generated codes in an array, however I can't do this because the for-loop and Math.random creates the code number by number and places them after each other. How can I add the whole 12 digit code to my array (so I can use it later)?
I've tried array.push with no luck. What works is outputting the numbers to DOM object in HTML, like this:
for (i = 0; i < 12; i++) {
var mathRandom = Math.floor(Math.random() * 9);
var result = document.querySelector("#result");
result.innerHTML += mathRandom;
}
But that doesn't put the 12 digit code into a variable. I've also tried this:
var codeNumber = "";
codeNumber += mathRandom;
But that ends up in the variable value having only 1 digit.
<input type="number" id="numberOfCodes">
<button onclick="codeGen()">Generate</button>
<div id="result"></div>
<script>
var numberOfCodes = document.querySelector("#numberOfCodes");
var arr = [];
function codeGen() {
x = numberOfCodes.value;
for (a = 0; a < x; a++) {
generate();
console.log("Generated code");
}
}
function generate() {
for (i = 0; i < 12; i++) {
var mathRandom = Math.floor(Math.random() * 9);
var result = document.querySelector("#result");
result.innerHTML += mathRandom;
}
}
</script>
</div>
</body>
</html>
I expect the codes created (after some changes) to be added to the array, so that I can later use the codes on the page. Each individual 12-digit code needs to have its own place in the array.

This should work:
var result = [], stringResult;
for (i = 0; i < 12; i++) {
var mathRandom = Math.floor(Math.random() * 9);
result.push(mathRandom);
}
stringResult = result.join(''); // concatenates all the elements
console.log(stringResult);
The problem with your code is that + sign attempts to determine types of the operands and to choose the right operation, concatenation or addition. When adding stuff to innerHtml it treats the number as string. That is why it worked.

You'll want to refactor things so generating a single code is encapsulated in a single function (generate() here), then use that function's output, like this. (I hope the comments are enlightening enough.)
var numberOfCodes = document.querySelector("#numberOfCodes");
var resultDiv = document.querySelector("#result");
function codeGen() {
var nToGenerate = parseInt(numberOfCodes.value);
for (var a = 0; a < nToGenerate; a++) {
var code = generate(); // generate a code
// you could put the code in an array here!
// for the time being, let's just put it in a new <div>
var el = document.createElement("div");
el.innerHTML = code;
resultDiv.appendChild(el);
}
}
function generate() {
var code = ""; // define a local variable to hold the code
for (i = 0; i < 12; i++) { // loop 12 times...
code += Math.floor(Math.random() * 9); // append the digit...
}
return code; // and return the value of the local variable
}
<input type="number" id="numberOfCodes" value=8>
<button onclick="codeGen()">Generate</button>
<div id="result"></div>

As this answer shows, this should work for you:
function makeRandCode() {
var code = "";
var ints = "1234567890";
for (var i = 0; i < 12; i++) {
code += ints.charAt(Math.floor(Math.random() * ints.length));
}
return code;
}
console.log(makeRandCode());

The problem is that you are adding numbers and what you really want is to concatenate them, the solution is to transform those numbers into String, then save them in the variable where you want to store them. An example:
2 + 2 = 4 and '2'+'2'='22'
Just use .toString() before save it in to the variable.

Problems averaging

I have the following function in javascript to calculate the average:
function calculaMediaFinal () {
var soma = 0;
for(var i = 1; i>5; i++) {
soma += parseInt(document.getElementById('resultado' + i).value, 10);
}
var media = soma / 5;
var inputCuboMedia = document.getElementById('ConcretizaObj');
inputCuboMedia.value = parseInt(media, 10);
}
function ContarObjetivos() {
let contador = 0;
if(document.getElementById('resultado' + i).value) {
contador++;
}
}
But I have a problem, it's that I put in that at most there are 5 which is not true, because the user is who chooses how many results he wants. That is, the 5 can not be filled if the user only wants 4. How do I average without the number 5 but with the number of results that the user wants?

You can do it like this.
create input element and let user pass each number into it separated by space
create button that will trigger the code that calculates the average
create element that will store the result
To perform the actual computation
get value of input field, split it at space ' ', remove white spaces around each separate number using trim
sum the array created in the previous step using reduce
divide the sum by the amount of provided numbers
const input = document.querySelector('input');
const btn = document.querySelector('button');
const res = document.querySelector('p > span');
function getAverage() {
const values = input.value.split(' ').map(v => v.trim());
const sum = values.reduce((acc, v) => acc + Number(v), 0);
res.textContent = (sum / values.length);
}
// 1 2 3 4 5 6 7 8 9 10
btn.addEventListener('click', getAverage);
<input type='text' />
<button>get average</button>
<p>result: <span></span></p>
Where you pass numbers into input field one by one separated by space (try passing 1 2 3 4 5 6 7 8 9 10) and then click button to perform the computation which then will be shown in span element.

Your loop wasn't executed:
In a for, the second parameter is the condition for which the iteration is going to be executed (true = execute). Changing > to <= made it work.
I also merged your two functions so that a not filled input doesn't count.
Here is a working snippet where I used all your code:
// Merged both function:
function calculaMediaFinal() {
let soma = 0;
let contador = 0;
for (var i = 1; i <= 5; i++) { // Changed > to <= here
if (document.getElementById('resultado' + i).value) {
soma += parseInt(document.getElementById('resultado' + i).value, 10);
contador++;
}
}
var media = soma / contador;
var inputCuboMedia = document.getElementById('ConcretizaObj');
inputCuboMedia.value = parseInt(media, 10);
}
<input id="resultado1"><br>
<input id="resultado2"><br>
<input id="resultado3"><br>
<input id="resultado4"><br>
<input id="resultado5"><br>
<button onclick="calculaMediaFinal();">calcula</button>
<br> Media:
<input id="ConcretizaObj">
⋅
⋅
⋅
If you don't need to specify the "base" in the parseInt function, I also suggest you to use the unary + operator:
// Merged both function:
function calculaMediaFinal() {
let soma = 0;
let contador = 0;
for (var i = 1; i <= 5; i++) { // Changed > to <= here
if (document.getElementById('resultado' + i).value) {
soma += +document.getElementById('resultado' + i).value;
contador++;
}
}
var media = soma / contador;
document.getElementById('ConcretizaObj').value = media;
}
<input id="resultado1"><br>
<input id="resultado2"><br>
<input id="resultado3"><br>
<input id="resultado4"><br>
<input id="resultado5"><br>
<button onclick="calculaMediaFinal();">calcula</button>
<br> Media:
<input id="ConcretizaObj">
Hope it helps.

If I understand your question correct, you want something like this. Create a new numeric input field that stores the amount that the user wants. Put the value of the input field in a variable and use it in your code? Also it probably needs to be '<=' in the for loop to be executed. For example
HTML add next line in your code:
<input type="number" id="userAmount" />
Javascript:
function calculaMediaFinal () {
var soma = 0;
var amount = parseInt(document.getElementById("userAmount").value);
for(var i = 1; i<=amount; i++) {
soma += parseInt(document.getElementById('resultado' + i).value, 10);
}
var media = soma / amount;
var inputCuboMedia = document.getElementById('ConcretizaObj');
inputCuboMedia.value = parseInt(media, 10);
}
function ContarObjetivos(){
let contador = 0;
if(document.getElementById('resultado' + i).value) {
contador++;
}
}

How do I remove "undefined" from the beginning of JavaScript array items?

I'm trying to generate an array of random digits, but I'm getting "undefined" at the beginning of each row. I've been searching online for a couple of hours, but haven't been able to figure it out.
The expected output should be 5 rows of 2 random digits like this:
87
57
81
80
02
but the actual output looks like this:
undefined87
undefined57
undefined81
undefined80
undefined02
This is a modified excerpt that produces the result shown above:
function NumberSet() {
// generate all the digits
this.generate = function() {
random_digits = [];
// create 5 rows of 2 random digits
for(i=0; i<5; i++) {
for(z=0; z<2; z++) {
// use .toString() in order to concatenate digits to
// the array without adding them together
random_digit = Math.floor(Math.random()*10).toString();
random_digits[i] +=random_digit;
}
}
return random_digits;
}
}
randomnumbers1 = new NumberSet();
mynums = randomnumbers1.generate();
jQuery.each(mynums, function(i, l) {
// display output in a div#nums
$('#nums').append(l + '<br>');
});
The final version won't be using this method to display the digits. I'm just trying to troubleshoot where the "undefined" is coming from.

Initialize your variables
random_digits[i] = "";
for(z=0; z<2; z++) {
random_digit = Math.floor(Math.random()*10).toString();
random_digits[i] +=random_digit;
}
Declare the variables properly with var.
var random_digit, random_digits = [];

Declare random_digit in the first for loop and assign an empty string.
Go through the inner for loop appending your random numbers, and then push() to the array back in the outer for loop.
function NumberSet() {
// generate all the digits -a meme should be attached here-
this.generate = function() {
random_digits = [];
// create 5 rows of 2 random digits
for(i=0; i<5; i++) {
var random_digit = ""; //Declare it out here
for(z=0; z<2; z++) {
// use .toString() in order to concatenate digits to
// the array without adding them together
random_digit += Math.floor(Math.random()*10).toString(); //Append it here
}
random_digits.push(random_digit); //Push it back here
}
return random_digits;
}
}
Fiddle-dee-dee
OR Forget the inner loop and use recursion
function NumberSet() {
// generate all the digits
this.generate = function () {
random_digits = [];
// create 5 rows of 2 random digits
// Use i for how many numbers you want returned!
var random_digit = function (i) {
var getRand = function() {
return (Math.floor(Math.random() * 10).toString());
}
return (i > 0) ? getRand()+random_digit(i-1) : "";
};
for (i = 0; i < 5; i++) {
random_digits.push(random_digit(2)); //In this case, you want 2 numbers
}
return random_digits;
}
}
Fiddle-do-do
And the final version because I'm bored
function NumberSet(elNum, numLen) {
this.random_digits = []; //Random digits array
this.elNum = elNum; //Number of elements to add to the array
this.numLen = numLen; //Length of each element in the array
// generate all the digits
this.generate = function () {
// create 5 rows of 2 random digits
var random_digit = function (i) {
var getRand = function () {
return (Math.floor(Math.random() * 10).toString());
}
return (i > 0) ? getRand() + random_digit(i - 1) : "";
};
for (i = 0; i < this.elNum; i++) {
this.random_digits.push(random_digit(this.numLen));
}
return this.random_digits;
}
}
randomnumbers1 = new NumberSet(5, 2).generate();
jQuery.each(randomnumbers1, function (i, l) {
// display output in a div#nums
$('#nums').append(l + '<br>');
});
Fiddle on the roof

Replace
random_digits[i] +=random_digit;
With
random_digits[i] = (random_digits[i] == undefined ? '' : random_digits[i]) + random_digit;
Demo: Fiddle

Your function can be simplified to:
function NumberSet() {
this.generate = function() {
var random_digits = new Array();
for (i = 0; i < 5; i++) {
randnum = Math.floor(Math.random() * 99);
random_digits[i] = (randnum < 10 ? '0' : 0) + randnum;
}
return random_digits;
}
}
Live Demo