Kicking NaN out of an array - javascript

I am having trouble kicking NaN out of array "free_time_integers" below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parse testing</title>
</head>
<body>
<textarea name="" id="txt1" cols="30" rows="10">
1139
2938
3828
112
</textarea>
<script>
var free_time_hours = document.getElementById('txt1')
// free_time_hours.addEventListener("blur", free_time_console)
// Parse the free time values into times
// convert textarea into array
var breaker_array = free_time_hours.value.split(/\n/)
console.log("array freshly split")
console.log(breaker_array)
//convert array each element to a string
let free_time_integers = breaker_array.map(function(obj) {
return parseInt(obj)
})
// get the NaN out of the array
function remove_false(arr) {
arr.filter(Boolean)
}
remove_false(free_time_integers)
console.log("after map-parseInt and filter-true")
console.log(free_time_integers)
</script>
</body>
</html>
I've also tried using a for loop and if statement to check if any item === NaN but that didn't seem to work either. I read in another thread that NaN doesn't equal itself so that may be why. Is there any way to eliminate the NaN values?

You can use isNaN to check if it something a NaN and the Array.filter function to keep the elements that is not NaN. Another issue is that you have to store the results somewhere. So, your final code will look like the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parse testing</title>
</head>
<body>
<textarea name="" id="txt1" cols="30" rows="10">
1139
2938
3828
112
</textarea>
<script>
var free_time_hours = document.getElementById('txt1')
// free_time_hours.addEventListener("blur", free_time_console)
// Parse the free time values into times
// convert textarea into array
var breaker_array = free_time_hours.value.split(/\n/)
console.log("array freshly split")
console.log(breaker_array)
//convert array each element to a string
let free_time_integers = breaker_array.map(function(obj) {
return parseInt(obj)
})
// get the NaN out of the array
// my implementation here...
function remove_false(arr) {
return arr.filter(e => !isNaN(e));
}
// assign it to a variable
var filtered_arr = remove_false(free_time_integers)
console.log("after map-parseInt and filter-true")
console.log(filtered_arr)
</script>
</body>
</html>

filter returns a new array, you need to reassign it to free_time_integers
function remove_false(arr) {
return arr.filter(Boolean)
}
free_time_integers = remove_false(free_time_integers)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parse testing</title>
</head>
<body>
<textarea name="" id="txt1" cols="30" rows="10">
1139
2938
3828
112
</textarea>
<script>
var free_time_hours = document.getElementById('txt1')
// free_time_hours.addEventListener("blur", free_time_console)
// Parse the free time values into times
// convert textarea into array
var breaker_array = free_time_hours.value.split(/\n/)
console.log("array freshly split")
console.log(breaker_array)
//convert array each element to a string
let free_time_integers = breaker_array.map(function(obj) {
return parseInt(obj)
})
// get the NaN out of the array
function remove_false(arr) {
return arr.filter(Boolean)
}
free_time_integers = remove_false(free_time_integers)
console.log("after map-parseInt and filter-true")
console.log(free_time_integers)
</script>
</body>
</html>

Related

How to get all unique characters represantations out of an utf-8 string in Firefox 70?

The result of the following code is only πŸ§œπŸ½β€β™‚οΈ πŸΎπŸΏπŸ›€πŸ›ŒπŸ»πŸΌπŸ§‘πŸ€πŸ‘­πŸ‘©πŸ‘«πŸ‘¨πŸ‘¬, where I want to find all the unique graphic represationations shown in the Firefox output that I copied to the var a originally. (Basically the code should show the original a string as output.)
How to do that?
<html>
<head>
<meta charset="UTF-8" />
<script>
var a = 'πŸ§œπŸ½β€β™‚οΈ πŸ§œπŸΎβ€β™‚οΈ πŸ§œπŸΏβ€β™‚οΈ πŸ§œπŸ›€πŸΏ πŸ›ŒπŸ» πŸ›ŒπŸΌ πŸ›ŒπŸ½ πŸ›ŒπŸΎ πŸ›ŒπŸΏ πŸ§‘πŸ»β€πŸ€β€πŸ§‘πŸ» πŸ§‘πŸ»β€πŸ€β€πŸ§‘πŸΌ πŸ§‘πŸ»β€πŸ€β€πŸ§‘πŸ½ πŸ§‘πŸ»β€πŸ€β€πŸ§‘πŸΎ πŸ§‘πŸ»β€πŸ€β€πŸ§‘πŸΏ πŸ§‘πŸΌβ€πŸ€β€πŸ§‘πŸ» πŸ§‘πŸΌβ€πŸ€β€πŸ§‘πŸΌ πŸ§‘πŸΌβ€πŸ€β€πŸ§‘πŸ½ πŸ§‘πŸΌβ€πŸ€β€πŸ§‘πŸΎ πŸ§‘πŸΌβ€πŸ€β€πŸ§‘πŸΏ πŸ§‘πŸ½β€πŸ€β€πŸ§‘πŸ» πŸ§‘πŸ½β€πŸ€β€πŸ§‘πŸΌ πŸ§‘πŸ½β€πŸ€β€πŸ§‘πŸ½ πŸ§‘πŸ½β€πŸ€β€πŸ§‘πŸΎ πŸ§‘πŸ½β€πŸ€β€πŸ§‘πŸΏ πŸ§‘πŸΎβ€πŸ€β€πŸ§‘πŸ» πŸ§‘πŸΎβ€πŸ€β€πŸ§‘πŸΌ πŸ§‘πŸΎβ€πŸ€β€πŸ§‘πŸ½ πŸ§‘πŸΎβ€πŸ€β€πŸ§‘πŸΎ πŸ§‘πŸΎβ€πŸ€β€πŸ§‘πŸΏ πŸ§‘πŸΏβ€πŸ€β€πŸ§‘πŸ» πŸ§‘πŸΏβ€πŸ€β€πŸ§‘πŸΌ πŸ§‘πŸΏβ€πŸ€β€πŸ§‘πŸ½ πŸ§‘πŸΏβ€πŸ€β€πŸ§‘πŸΎ πŸ§‘πŸΏβ€πŸ€β€πŸ§‘πŸΏ πŸ‘­πŸ» πŸ‘©πŸ»β€πŸ€β€πŸ‘©πŸΌ πŸ‘©πŸ»β€πŸ€β€πŸ‘©πŸ½ πŸ‘©πŸ»β€πŸ€β€πŸ‘©πŸΎ πŸ‘©πŸ»β€πŸ€β€πŸ‘©πŸΏ πŸ‘©πŸΌβ€πŸ€β€πŸ‘©πŸ» πŸ‘­πŸΌ πŸ‘©πŸΌβ€πŸ€β€πŸ‘©πŸ½ πŸ‘©πŸΌβ€πŸ€β€πŸ‘©πŸΎ πŸ‘©πŸΌβ€πŸ€β€πŸ‘©πŸΏ πŸ‘©πŸ½β€πŸ€β€πŸ‘©πŸ» πŸ‘©πŸ½β€πŸ€β€πŸ‘©πŸΌ πŸ‘­πŸ½ πŸ‘©πŸ½β€πŸ€β€πŸ‘©πŸΎ πŸ‘©πŸ½β€πŸ€β€πŸ‘©πŸΏ πŸ‘©πŸΎβ€πŸ€β€πŸ‘©πŸ» πŸ‘©πŸΎβ€πŸ€β€πŸ‘©πŸΌ πŸ‘©πŸΎβ€πŸ€β€πŸ‘©πŸ½ πŸ‘­πŸΎ πŸ‘©πŸΎβ€πŸ€β€πŸ‘©πŸΏ πŸ‘©πŸΏβ€πŸ€β€πŸ‘©πŸ» πŸ‘©πŸΏβ€πŸ€β€πŸ‘©πŸΌ πŸ‘©πŸΏβ€πŸ€β€πŸ‘©πŸ½ πŸ‘©πŸΏβ€πŸ€β€πŸ‘©πŸΎ πŸ‘­πŸΏ πŸ‘«πŸ» πŸ‘©πŸ»β€πŸ€β€πŸ‘¨πŸΌ πŸ‘©πŸ»β€πŸ€β€πŸ‘¨πŸ½ πŸ‘©πŸ»β€πŸ€β€πŸ‘¨πŸΎ πŸ‘©πŸ»β€πŸ€β€πŸ‘¨πŸΏ πŸ‘©πŸΌβ€πŸ€β€πŸ‘¨πŸ» πŸ‘«πŸΌ πŸ‘©πŸΌβ€πŸ€β€πŸ‘¨πŸ½ πŸ‘©πŸΌβ€πŸ€β€πŸ‘¨πŸΎ πŸ‘©πŸΌβ€πŸ€β€πŸ‘¨πŸΏ πŸ‘©πŸ½β€πŸ€β€πŸ‘¨πŸ» πŸ‘©πŸ½β€πŸ€β€πŸ‘¨πŸΌ πŸ‘«πŸ½ πŸ‘©πŸ½β€πŸ€β€πŸ‘¨πŸΎ πŸ‘©πŸ½β€πŸ€β€πŸ‘¨πŸΏ πŸ‘©πŸΎβ€πŸ€β€πŸ‘¨πŸ» πŸ‘©πŸΎβ€πŸ€β€πŸ‘¨πŸΌ πŸ‘©πŸΎβ€πŸ€β€πŸ‘¨πŸ½ πŸ‘«πŸΎ πŸ‘©πŸΎβ€πŸ€β€πŸ‘¨πŸΏ πŸ‘©πŸΏβ€πŸ€β€πŸ‘¨πŸ» πŸ‘©πŸΏβ€πŸ€β€πŸ‘¨πŸΌ πŸ‘©πŸΏβ€πŸ€β€πŸ‘¨πŸ½ πŸ‘©πŸΏβ€πŸ€β€πŸ‘¨πŸΎ πŸ‘«πŸΏ πŸ‘¬πŸ» πŸ‘¨πŸ»β€πŸ€β€πŸ‘¨πŸΌ πŸ‘¨πŸ»β€πŸ€β€πŸ‘¨πŸ½ πŸ‘¨πŸ»β€πŸ€β€πŸ‘¨πŸΎ πŸ‘¨πŸ»β€πŸ€β€πŸ‘¨πŸΏ πŸ‘¨πŸΌβ€πŸ€β€πŸ‘¨πŸ» πŸ‘¬πŸΌ πŸ‘¨πŸΌβ€πŸ€β€πŸ‘¨πŸ½ πŸ‘¨πŸΌβ€πŸ€β€πŸ‘¨πŸΎ πŸ‘¨πŸΌβ€πŸ€β€πŸ‘¨πŸΏ πŸ‘¨πŸ½β€πŸ€β€πŸ‘¨πŸ» πŸ‘¨πŸ½β€πŸ€β€πŸ‘¨πŸΌ πŸ‘¬πŸ½ πŸ‘¨πŸ½β€πŸ€β€πŸ‘¨πŸΎ πŸ‘¨πŸ½β€πŸ€β€πŸ‘¨πŸΏ πŸ‘¨πŸΎβ€πŸ€β€πŸ‘¨πŸ» πŸ‘¨πŸΎβ€πŸ€β€πŸ‘¨πŸΌ πŸ‘¨πŸΎβ€πŸ€β€πŸ‘¨πŸ½ πŸ‘¬πŸΎ πŸ‘¨πŸΎβ€πŸ€β€πŸ‘¨πŸΏ πŸ‘¨πŸΏβ€πŸ€β€πŸ‘¨πŸ» πŸ‘¨πŸΏβ€πŸ€β€πŸ‘¨πŸΌ πŸ‘¨πŸΏβ€πŸ€β€πŸ‘¨πŸ½ πŸ‘¨πŸΏβ€πŸ€β€πŸ‘¨πŸΎ πŸ‘¬πŸΏ 🏻 🏼 🏽 🏾 🏿 ';
var b = [...new Set([...a])];
var c = b.join('');
function init() { document.getElementById('result').innerHTML = c; }
</script>
</head><body onload="init()">
<span id="result"></span>
</body>
</html>

Javascript Localstorage: Comparing input value with value stored in array in localstorage

My purpose is to check if value entered by user in the input field is already available in an array stored in the localstorage. If yes, print the array if not add the new value in the storage. I am getting my array back on button click but the code isn't working correctly. The output is:
["hh", "try", "vogue", "vogue", "try2", "try2", "try2", "try2"]
Above are the entered values which are getting added repetitively. I know it's a stupid issue but have least experience with handling arrays in localstorage. Any help would be appreciated. (I tried the solutions provided in similar questions on stackoverflow but no luck)
<html class=" reevoomark_ATY">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Special Offers</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="crossorigin="anonymous"></script>
</head>
<body>
<input id="coupon"> <button style="width:50px;padding:10px;background:grey;height:30px;border:1px solid grey" id="button">Apply</button>
<input id="stored">
<script>
var coupons = ['hh'];
var storedNames;
localStorage.setItem("coupons", JSON.stringify(coupons));
$('#button').on('click', function(){
storedNames = JSON.parse(localStorage.getItem("coupons"));
var enteredValue = $('#coupon').val();
for(i=0; i <storedNames.length; i++) {
if(enteredValue === storedNames[i]) {
console.log("value Exist!!");
console.log(storedNames[]);
}
else {
console.log("in else");
coupons.push(enteredValue);
localStorage.setItem("coupons", JSON.stringify(coupons));
storedNames = JSON.parse(localStorage.getItem("coupons"));
}
}
});
</script>
</body>
</html>
You would like to push the names if it doesn't exist in the stored names. Refer attached code.
<html class=" reevoomark_ATY">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Special Offers</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="crossorigin="anonymous"></script>
</head>
<body>
<input id="coupon"> <button style="width:50px;padding:10px;background:grey;height:30px;border:1px solid grey" id="button">Apply</button>
<input id="stored">
<script>
var coupons = ['hh'];
localStorage.setItem("coupons", JSON.stringify(coupons));
$('#button').on('click', function(){
var storedNames = JSON.parse(localStorage.getItem("coupons"));
var enteredValue = $('#coupon').val();
if (storedNames.includes(enteredValue)) {
console.log("value Exist!!");
console.log(storedNames);
} else {
console.log("in else");
storedNames.push(enteredValue);
localStorage.setItem("coupons", JSON.stringify(storedNames));
}
});
</script>
</body>
</html>

Selecting multiple arrays through a random generator

I'm creating multiple random generators. Once the first random generator selects a particular name the second will overide the first random generator and display the second random gernerators selection.
Here is what I have so far:
<!doctype html>
<html>
<head>
<script>
function postmessage() {
var firstnames = ["John", "Jacob", ];
var firstname = firstnames[Math.floor(Math.random() * firstnames.length)];
function pickAnother(John) {
if (John != firstnames) {
run(sndnames);
}
}
pickAnother (firstnames);
var sndnames = ["Eric", "Conroy", ];
var sndname = sndnames[Math.floor(Math.random() * sndnames.length)];
</script>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<input type="button" value="Get Recruit" onclick="postmessage();" />
<div id="recruit"></div>
</body>
</html>
I managed to get an alart message from another code, but I would like to display the sndnames like the firstnames.

How to pass a variable in match function in javascript?

Firstly this may sound like a duplicate question but I was unable to resolve my problem using the previous asked questions:
This is my HTML page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script>
function test() {
var totalids='XYZ##';
var variable_name=document.getElementById('p1').value.replace(/^\s+|\s+$/g,'');
var result = totalids.match(/variable_name/i);
if (result){
alert('Matched');
} else {
alert("Not Matched");
}
}
</script>
</head>
<body>
<input type="button" value="click on me" onclick="test()">
<input type="text" value="xyz" id="p1">
</body>
</html>
This program is not matching my String.I want to match my string using case-insensitive match.I know the problem lies in this line:
var result = totalids.match(/variable_name/i);
I am unable to pass variable in match function.I can do this;
var re = new RegExp(str1, "g");
But I don't know how to do cases-insensitive search using above line.
Here is how:
var re = new RegExp(str1, "gi");

Getting value of textarea returns undefined

I have an html form and a js script that gets the value of a textarea. However, when I'm getting the value of the textarea with javascript it return "undefined".
I have the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery/jquery-1.9.1.min.js"></script>
<script src="contentForm.js"></script>
</head>
<body>
<form method="post" >
<textarea name ="editor" id="editBox" rows="5" cols="2">type</textarea>
<p><input type="submit" id="submit" value="Submit"></p>
</form>
</body>
</html>
JS
function add() {
$("#submit").click(function() {
document.write("hello motto");
var message = "start js";
console.log(message);
var contents = $("#editBox");
var a = contents.val();
if(a === undefined) {
console.log("contents undefined");
}
console.log(contents);
var item = {"id":"12", "content": contents};
var obj = JSON.stringify(item);
var obj2 = JSON.parse(obj);
console.log("you have arrived");
document.write(obj2.id);
});
}
$(document).ready(function () {
add();
});
I tried the following to get the value of the textarea:
var content = $("#editBox").val();
and
var contents = $("textarea#editBox").val();
The val of the textarea is always undefined, with each of the methods I tried.
Is there another method for retrieving the value of a textarea?
Running document.write on a closed document will open a new document and destroy the DOM of the existing one.
This destroys the textarea, so when you try to retrieve it to get the value, it does not exist.
Remove the line document.write("hello motto");.
Use DOM manipulation to edit the existing document, instead of writing a new one.

Categories

Resources