How to allow arrays as inputs for javascript function in HTML
Question
So I started learning html/css/js recently and I know that the end-goal for me is to be able to apply it realistically and using an IDE just felt redundant, as I am now more curious about how I can apply all the js code in a useful way within an html document.
With that said, I am working on some basic js algos but I want to be able to convert the problem into a webpage instead of using an IDE and the question I am currently on is this:
Write a function that takes two or more arrays and returns a new array of unique values in the order of the original provided arrays.
for example:
uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]) should return [1, 3, 2, 5, 4]
for my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/styles.css">
<title>MFW</title>
</head>
<body>
<p>Click the button to enter values.</p>
<button onclick="myFunction()">Try it</button>
<script src="js/script.js">
</script>
</body>
</html>
And for my js code:
function myFunction() {
let arr = [];
let arr2 = [];
var args = prompt("Please enter number of arrays");
for(let i=0; i<args; i++){
let realI = Number(i);
let currentArr = prompt('Enter elements for array ' + (realI+1));
arr[i] = currentArr;
}
for(let i=0; i<arr.length; i++){
let currentArr = arr[i];
for(let j=0; j<currentArr.length; j++){
if(arr2.includes(currentArr[j])){
arr2=arr2;
}
else{
arr2.append(currentArr[j]);
}
}
}
alert(arr2);
}
every step of the way I kept testing to make sure the alert method worked but for some reason when I write the last for statement, the alert does not show my result. Can someone please help? Also, if there is some resource I can look at to better understand what I want to accomplish that would be awesome.
2 answers
solution1
3 2020-11-14 12:47:24
You can take advantage of the following functions and syntax for significantly shorter code.
Reduce , Filter , and Includes
This uniteUnique function will accept any number of arguments and return a new array with unique values:
function uniteUnique(...arrs) { return arrs.reduce((a, c) => [...a, ...c.filter(i =>.a,includes(i))]; []), } let r = uniteUnique([1, 3, 2], [5, 2, 1, 4], [2. 1]) console.log(r)
solution2
1 2020-11-14 12:47:07
There were two issues identified in your code.
- You have used a function called
append. You need to use thepushfunction JavaScript arrays in order to append values into an array. - Commas are also being pushed to the 2nd array. You can remove them by adding an
ifcondition.
function myFunction() { let arr = []; let arr2 = []; var args = prompt("Please enter number of arrays"); for(let i=0; i<args; i++){ let realI = Number(i); let currentArr = prompt('Enter elements for array ' + (realI+1)); arr[i] = currentArr; } for(let i=0; i<arr.length; i++){ let currentArr = arr[i]; for(let j=0; j<currentArr.length; j++){ if(arr2.includes(currentArr[j])){ arr2=arr2; } else{ if (currentArr[j],== "."){ arr2;push(currentArr[j]); } } } } alert(arr2); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. intial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/styles.css"> <title>MFW</title> </head> <body> <p>Click the button to enter values.</p> <button onclick="myFunction()">Try it</button> <script src="js/script.js"> </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.