Random number generation/shuffling issue - javascript

Okay so, I'm trying to create an application where when you click a button it Generates and Displays a concatenated sequence of unique Numbers between 1 and 76. I have it generating 1 -78 randomly with no dupes but I am unsure as to how I would make it so when it comes to displaying it, it displays 1 number and then increments +1 with every click.
So first click [28]
second click [28, 33] and so on without duplicates. here is the code I have so far
window.onload = onclick;
function onclick() {
document.getElementById("BtnCall").onmousedown = GenNumber;
}
function GenNumber() {
var num = LoadNumbers(1, 76);
num = shufflearray(num);
for (i = 0; i < 1; i++) {
ShowArray(num);
}
};
function LoadNumbers(min, max) {
var arr = [];
for (var i = min; i <= max; i++) {
arr.push(i);
}
return arr;
}
function shufflearray(input) {
var out = [];
while (input.length > 0) {
var i = Math.random() * input.length;
var a = input.splice(i, 1);
out.push(a);
}
return out;
}
function ShowArray(m) {
for (var i = 0; i < m.length; i++) {
document.getElementById("usednum").innerHTML += (m[i]+', ');
}
}
Thanks for any support/help :)
needs to behave/like this
https://gyazo.com/bebb7c58c402934050be8bc9be29e183
instead of this:
This happens with one single click

I think you're making random number concatenation one after another logic TOO complicated with your existing code like GenNumber(), LoadNumbers() and shufflearray() method. I just post an example answer that will fulfill what you want to do as per "Need to behave like this" (If I were you then I'll try this way).
By the way I've also posted an answer with your existing code also.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Generate Random Number</title>
</head>
<body>
<p id="show_random"></p>
<script type="text/javascript">
var randoms = [];
function makeid() {
var randomnumber = Math.ceil(Math.random() * 76);
randoms.push(randomnumber);
//console.log(randoms);
document.getElementById('show_random').innerHTML = randoms.join(' ');
}
</script>
<input type="button" style="font-size:9pt" value="Gen Random" onclick="makeid()">
</input>
</form>
</body>
</html>
See it with your code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Generate Random Number</title>
</head>
<body>
<p id="usednum"></p>
<script type="text/javascript">
window.onload = onclick;
function onclick() {
document.getElementById("BtnCall").onmousedown = GenNumber;
}
function GenNumber() {
var num = LoadNumbers(1, 76);
num = shufflearray(num);
var single = Math.ceil(Math.random() * num.length);
ShowArray(single); //with you existing code you're passing whole array
};
function LoadNumbers(min, max) {
var arr = [];
for (var i = min; i <= max; i++) {
arr.push(i);
}
return arr;
}
function shufflearray(input) {
var out = [];
while (input.length > 0) {
var i = Math.random() * input.length;
var a = input.splice(i, 1);
out.push(a);
}
return out;
}
function ShowArray(m) {
document.getElementById("usednum").innerHTML += (m + ', ');
}
</script>
<input type="button" style="font-size:9pt" value="Gen Random" id="BtnCall">
</input>
</form>
</body>
</html>

Related

how to initialize a member of JS array?

I just wrote this in order to take n from user and also n names , and then print them on screen after clicking on button , but i cant initialize my array ...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<script>
var n;
var i =0;
var names = [];
function mf1(){
n=parseInt(document.getElementById("n").value);
}
function mf2(){
if (i<n){
names[i]=document.getElementById("nam").value;
i++;
document.getElementById("rem").innerHTML=names[i];
}
}
</script>
inset n : <input type="text" id="n"> <button onClick="mf1()">take n</button>
insert name: <input type="text" id="nam"> <button onClick="mf2()"> take name</button>
<p id="rem"></p>
</body>
</html>
The problem is that in function mf2 you can't access names[i] because you increment i++ before.
var n;
var i = 0;
var names = [];
var input1 = document.getElementById("n");
var input2 = document.getElementById("nam");
function mf1(){
n = parseInt(input1.value);
console.log(n);
}
function mf2(){
if (i < n){
names[i] = input2.value;
console.log(names);
document.getElementById("rem").textContent = names[i];
i++;
}
}

What's wrong with this javascript code? (body script calling head function)

Why does the following not produce any result? I get a blank page. I kept modifying/simplifying the code to see where the problem is and it seems to be with the line
"var count = NbnamePattern(names)"
Things seem to work when the body script calls a function defined in the head but with no arguments passed.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment 2 Q4</title>
<meta charset="utf-8" />
<script>
function NbnamePattern(var names) {
var count = 0;
for (var i in names) {
if (names[i].search(/ie$/) != -1 || names[i].search(/y$/) != -1)
count++;
}
return count;
}
</script>
</head>
<body>
<p></p>
<script type="text/javaScript">
var names = new Array("freddie", "bob", "mieke", "yahoo2", "georgey"); var count = NbnamePattern(names); document.getElementsByTagName("p")[0].innerHTML = "The number of names having these two patterns (/ie$/) and (/y$) in the array is:" + count;
</script>
</body>
</html>
function NbnamePattern(var names){
var count = 0;
for(var i in names)
if(names[i].search(/ie$/) != -1 || names[i].search(/y$/) != -1)
count++;
return count;
}
should be
function NbnamePattern(names){
var count = 0;
for(var i in names)
if(names[i].search(/ie$/) != -1 || names[i].search(/y$/) != -1)
count++;
return count;
}
The functions in javascript dont take types, it should just be name
you need to remove the var from NbnamePattern(var names) function
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment 2 Q4</title>
<meta charset="utf-8" />
<script>
function NbnamePattern(names) {
var count = 0;
for (var i in names) {
if (names[i].search(/ie$/) != -1 || names[i].search(/y$/) != -1)
count++;
}
return count;
}
</script>
</head>
<body>
<p></p>
<script type="text/javaScript">
var names = new Array("freddie", "bob", "mieke", "yahoo2", "georgey"); var count = NbnamePattern(names); document.getElementsByTagName("p")[0].innerHTML = "The number of names having these two patterns (/ie$/) and (/y$) in the array is:" + count;
</script>
</body>
</html>

How to compare the current variable with current type?

In my code I try to comapare the current element from the array tmp with the types string and number. With this compare I want to print in the console the result different, i.e. if is a string to print it on the same line(the whole word), the next word to be on the second line and so on. But if is a number every digit to print in the new line.
Output number
Input string
Output string
HTML
<!Doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>Exercises in JS</title>
<script src="exercises.js"></script>
<body>
<label for="myText">Input array:</label>
<input type="text" id="myText">
Submit
<br/>
<br/>
<label for="myText2">Input for delete:</label>
<input type="text" id="myText2">
Submit
</body>
</head>
</html>
Javascript
window.onload = function(){
inputBox =document.getElementById("myText");
btn = document.getElementById('sub');
inputBox2 = document.getElementById("myText2");
btn2 = document.getElementById('sub2');
btn.addEventListener("click",function(event){
event.preventDefault();
saveArr(inputBox.value);
});
btn2.addEventListener("click",function(event){
event.preventDefault();
removeItemAndprintNewArray(inputBox.value, inputBox2.value);
});
function saveArr(arr) {
var rv = [];
for (var i = 0; i < arr.length; ++i)
rv[i] = arr[i];
return rv;
}
function removeItemAndprintNewArray(rv, number) {
var tmp = [],
st = "";
for(var index in rv){
if(rv[index] !== number){
tmp.push(rv[index]);
}
}
for (var i = 0; i < tmp.length; i++){
if (typeof(tmp[i]) == "String"){
st += tmp[i];
console.log(st);
}
else if (typeof(tmp[i]) === "Number"){
st += tmp[i];
console.log(st[i]);
}
}
}
}
Javascript automatically makes type conversations, and if conversation fails it returns NaN value instead of throw exception. Let's use it)
Small example
var arr = [12, "asd", 4];
arr.forEach(function(item) {
console.log(item - 0);
});
So you can check on NaN, don't forget that you should use special function isNaN()
var arr = [12, "asd", 4];
arr.forEach(function(item) {
if(isNaN(item - 0)) {
//do what you want with string
console.log("string");
};
else {
//do what you want with Number
console.log("number");
}
});

How to find prime numbers in entered number range [duplicate]

This question already has answers here:
How to find prime numbers between 0 - 100?
(40 answers)
Closed 9 years ago.
I'm just trying to find prime numbers of an entered range of numbers. I have no clue how to calculate finding primes. I need to add them to an array and output the array after. I put a placeholder for the calculation... I just can't seem to figure out how find the primes.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>LeapYears</title>
<script type="text/javascript">
/* <![CDATA[ */
function calcPrimeNumber(){
var beginNum = document.numbers.firstNum.value;
var endNum = document.numbers.secondNum.value;
var primeNumbs = new Array();
var ctr = 0;
while (beginNum <= endNum){ //throwaway
if ((beginNum % beginNum == 0) && (beginNum % 1 == 0)){
primeNumbs[ctr] = beginNum;
++ctr;
}
++beginNum;
}
if (primeNumbs == 0){
window.alert("There were no leap years within the range.");
}
else {
outputPrimeNums(primeNumbs);
}
}
function outputPrimeNums(primes){
document.write("<h2>Prime Numbers</h2>");
for (i=0;i<primes.length;i++){
document.write(primes[i] + "<br/>");
}
}
/* ]]> */
</script>
</head>
<body>
<form name="numbers">
Beginning Number: <input type="text" name="firstNum" /> End Number: <input type="text" name="secondNum" />
<input type="button" value="Find Prime Numbers" onclick="calcPrimeNumber()" />
</form>
</body>
</html>
try this full page of prime no example
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>LeapYears</title>
<script type="text/javascript">
/* <![CDATA[ */
function calcPrimeNumber(){
var beginNum = parseInt(document.numbers.firstNum.value);
var endNum = parseInt(document.numbers.secondNum.value);
var primeNumbs = new Array();
var ctr = beginNum;
while(ctr<=endNum)
{
if(isPrime(ctr)==true)
{
primeNumbs[primeNumbs.length] = ctr;
}
ctr = ctr+1;
}
if (primeNumbs.length == 0){
document.getElementById('output_content').innerHTML = "There were no prime no within the range.";
}
else {
outputPrimeNums(primeNumbs);
}
}
function isPrime(num)
{
var flag = true;
for(var i=2; i<=Math.ceil(num/2); i++)
{
if((num%i)==0)
{
flag = false;
break;
}
}
return flag;
}
function outputPrimeNums(primes){
var html = "<h2>Prime Numbers</h2>";
for (i=0;i<primes.length;i++){
html += primes[i] + "<br/>";
}
document.getElementById('output_content').innerHTML = html;
}
/* ]]> */
</script>
</head>
<body>
<form name="numbers">
Beginning Number: <input type="text" name="firstNum" /> End Number: <input type="text" name="secondNum" />
<input type="button" value="Find Prime Numbers" onclick="calcPrimeNumber()" />
</form>
<div id="output_content">
</div>
</body>
</html>
You should use some algorithm to check whether a given no is prime no or not inside while loop .
http://en.wikipedia.org/wiki/Prime_number
http://en.wikibooks.org/wiki/Efficient_Prime_Number_Generating_Algorithms
You need two loops here - the first to run between beginNum and endNum and the second to run from 1 to beginNum for each value of beginNum in the outer loop.
Try replacing the main section of your code with the following. (For clarity, I'm going to introduce a new variable - numberBeingTested.)
var ctr = 0;
var numberBeingTested = beginNum;
while (numberBeingTested <= endNum){ //throwaway
var testDivisor = 2;
var isPrime = true;
while (testDivisor < numberBeingTested ){ //throwaway
if (numberBeingTested % testDivisor == 0) {
isPrime = false;
}
++testDivisor;
}
if (isPrime){
primeNumbs[ctr] = numberBeingTested;
++ctr;
}
++numberBeingTested;
}
Note that there are many possible improvements here - for a start, this code as it stands will tell you that 1 is prime, and there are significant possible performance improvements (such as testing possible divisors up to the square root of the number being tested rather than the number itself) - but for your purposes it will probably suffice.
What I try was to edit Sieve of Atkin algorithm from linked question:
function getPrimes(min, max) {
var sieve = [], i, j, primes = [];
for (i = 2; i <= max; ++i) {
if (!sieve[i]) {
// i has not been marked -- it is prime
if (i >= min) {
primes.push(i);
}
for (j = i << 1; j <= max; j += i) {
sieve[j] = true;
}
}
}
return primes;
}
console.log(getPrimes(10, 100));
This will give you array with prime numbers from min to max. It still has to go through all number from 2, so maybe there will be more effective way how to achieve this.

Prototype issue - How do I check for links on an input field and check for the length of that input field?

I sort of started coding for this. It's almost working.
My goals:
1) Check for the length or url's entered in a field (the total length) and reduce each link's length by 20 if the length is greater than 20
2) Determine the characters left in an input field
The javascript in profile.js (prototype):
function checkurl_total_length(text) {
var text = "";
var matches = [];
var total_length = 0;
var urlRegex = /(http|https):\/\/[A-Za-z0-9\.-]{3,}\.[A-Za-z]{3}/;
text.scan(urlRegex, function(match){ matches.push(match[0])});
for (var index = 0; index < matches.length; ++index) {
item = matches[index];
reduce_length = matches.length*20;
if(item.length>20) {
total_length = total_length + item.length - reduce_length;
}
else {
total_length = total_length + item.length;
}
}
return total_length;
}
function count_characters(field){
var limitNum=140;
var link_length = 0;
if(checkurl_total_length(field.value)!=0) {
link_length =link_length+ checkurl_total_length(field.value);
}
else {
link_length = 0;
}
limitNum = limitNum+link_length;
if( link_length !=0 ){
$("links").update("with links");
}
left = limitNum-field.value.length;
$("count").update(left);
}
THE HTML
<!DOCTYPE HTML>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>JUST A TEST FILE</title>
<script src="prototype.js" type="text/javascript"></script>
<script src="profile.js" type="text/javascript"></script>
</head><body>
<h1>
CHARACTERS COUNT
</h1>
<div class="container_24">
<h2 id="title2">
TESTING
</h2>
<div class="grid_24">
<div id="count"></div>
<br /s>
<div id="links"></div>
<form >
<textarea wrap="hard" onpaste="count_characters(this);" onkeyup="count_characters(this);" onkeydown="count_characters(this);" id="updates" onfocus="count_characters(this);" name="test"/> </textarea>
<input type="submit" value=" " name="commit" disabled=""/>
</form>
</div>
</div>
<!-- end .container_24 -->
</body></html>
Counting characters left is working but checking for url and the length of the url isn't. Any hints on why this isn't working?
not sure, but should this be
checkurl_total_length(field.value!=0) // ) != 0

Categories