Hi I'm kinda new on JS so I tried to do this, I made this to test the random function and I want to show only random numbers below 0.8, but sometimes it shows above 0.8 also more than one time in a row, how do I fix it ?
This is my first post ever here, so sorry if I did something wrong.
Thanks. :)
function rn() {
var a = Math.random()
return a
}
function writerandon() {
var x = 0
while (x < 100) {
if (rn() < 0.8) {
document.write(rn() + "<br>")
}
if (rn() > 0.8) {
x = 100
}
x++
}
}
//
document.getElementById("11").innerHTML = writerandon()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>exp</title>
</head>
<body id="bd">
<h1 id="11"></h1>
</body>
<script src="exp.js"></script>
</html>
Your code makes two random number calls, each of which may have a different value. The fix is to use else to ensure only one branch fires:
let n = Math.random();
if (n < 0.8) {
document.write(n + "<br>")
}
else {
x = 100
}
Just because you've wrapped Math.random() in a function doesn't mean it fires only once. Each and every call to rn() will return a new value. The local variable a is initialized anew with each function call. It does not persist between calls.
In your original code around 16% of the time (80% x 20%) you'd fluke out and trigger both branches.
Assign the return value to a variable in order to hold the same value over different conditions.
function rn() {
var a = Math.random()
return a
}
function writerandon() {
var x = 0
while (x < 100) {
const randomNumber = rn();
if (randomNumber < 0.8) {
document.write(randomNumber + "<br>")
}
if (randomNumber > 0.8) {
x = 100
}
x++
}
}
//
document.getElementById("11").innerHTML = writerandon()
The problem is that you're calling rn() multiple, and it returns different numbers each time. The result you test in if is not the same one that you display with document.write(), or the one that you test in the second if.
You need to save the number to a variable so you can test and display the same number.
Also, use else when you want to do something when the previous test failed.
function rn() {
var a = Math.random()
return a
}
function writerandon() {
var x = 0
while (x < 100) {
var num = rn();
if (num < 0.8) {
document.getElementById("bd").innerHTML += (num + "<br>")
} else {
break;
}
x++
}
}
//
document.getElementById("11").innerHTML = writerandon()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>exp</title>
</head>
<body id="bd">
<h1 id="11"></h1>
</body>
<script src="exp.js"></script>
</html>
Related
I have been pouring over answers on stack overflow for my problem. All of them have resulted in infinite loops which have caused my code to crash several times. Let me start by saying I am a beginner. I'd also like to iterate that for my current project I have to use Javascript/JQuery as requested.
I am creating a math quiz game that generates random equations. Along with the random equations I would like to generate random answers. I have the random equations and answers generated, but for some reason I can't get my quiz app to generate unique random answers without crashing. I have tried populating the array first, then sorting the array, and splicing out duplicates and reiterating through the array. I have also tried to check for duplicates before the random number is populated in the array. None seem to work. I know there are similar questions to mine, and they work when NOT incorporated in my code. I think I'm going about it the wrong way, in which case I'd love for a second pair of eyes. Thanks!
let a, b, op, correctAnswer, ansb;
const novice = () => {
const num = () => ~~(Math.random() * 10) + 1
a = num()
b = num()
op = ["*", "+", "/", "-"][Math.floor(Math.random() * 4)];
$("#question").text(`${a} ${op} ${b}`).show()
correctAnswer = (() => {
switch (op) {
case "*": return a * b
case "+": return a + b
case "/": return a / b
case "-": return a - b
}
})()
if (!Number.isInteger(correctAnswer)) {
novice()
// equations.pop()
}
let randomAnswers = [correctAnswer]
for (let x = 0; randomAnswers.length < 4; x++) {
// ! i need to sort the array after its already pushed in there??
let rand = Math.floor(Math.random() * correctAnswer + 20)
// randomAnswers.push(rand)
// console.log(randomAnswers.indexOf(x), randomAnswers.lastIndexOf(x))
// if (randomAnswers.indexOf(rand) !== randomAnswers.indexOf(x)) {
randomAnswers.push(rand)
// }
}
let randAnsw = randomAnswers.sort(() => Math.random() - 0.5)
$("#a0").text(randAnsw[0]).attr("value", `${randAnsw[0]}`)
$("#a1").text(randAnsw[1]).attr("value", `${randAnsw[1]}`)
$("#a2").text(randAnsw[2]).attr("value", `${randAnsw[2]}`)
$("#a3").text(randAnsw[3]).attr("value", `${randAnsw[3]}`)
}
// const nextNov = () => {
// novice()
// selectNovAnswer()
// }
// const selectNovAnswer = () => {
// $('#answer-buttons .btn').each(function () {
// $(this).unbind("click").on("click", function () {
// if ($(this).attr("value") == correctAnswer) {
// NextNov()
// } else {
// // startOver()
// // $(".answ").attr("disabled", 'disabled')
// $("#question").append(`<span class="text-danger"> = ${correctAnswer}</span>`)
// }
// })
// })
// }
$("#start").on("click", function () {
novice()
// selectNovAnswer()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fast Math Example</title>
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.min.css">
</head>
<body>
<button id="start" type="button">Start</button>
<h1 id="question"></h1>
<div id="answer-buttons">
<button id="a0" class="btn" type="button"></button>
<button id="a1" class="btn" type="button"></button>
<button id="a2" class="btn" type="button"></button>
<button id="a3" class="btn" type="button"></button>
</div>
<script src="jquery-3.6.0.min.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Try generating randoms in b/w ranges of number so that you always get unique numbers
const randomBtwRange = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
//[num - 10, num, num + 10, num + 20 ]
const generate3Randoms = (num) => {
return [
randomBtwRange(num - 10, num - 1),
randomBtwRange(num + 1, num + 10),
randomBtwRange(num + 11, num + 20)
]
}
const answer = 12
console.log(
[answer, ...generate3Randoms(answer)]
.sort(_ => Math.random() - 0.5)
)
I am making a simple code that you will have to put in the password and I would like to know how to make a code that will randomly distribute text. I have tried to use the push and pop methods.
let sumbit;
let input;
let element;
function setup() {
createCanvas(400,400);
sumbit = createButton('Submit');
sumbit.mousePressed(button);
input = createInput();
input.position(20, 60);
element = createElement('h2', 'What is the password : ');
element.position(5, 10);
textSize(32);
}
function button() {
const password = input.value();
if(password == "2010") {
element.html('Your Correct! ' + ' The password was ' + password);
} else {
element.html('Your incorrect the password was : 2010');
}
input.value('');
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sketch</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="libraries/p5.min.js"></script>
<script src="libraries/p5.sound.min.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
I would like the code to make the letters look something like this. I would appreciate some advice, Thank you in advance.
You can use:
text() to render each character
random() to pick a random position and angle (within a range)
use other text related functions to adjust the look of the characters such as textFont() to set a serif font and textSize()
Here's a basic example with comments:
let stringOfCharacters = 'The quick brown fox jumped over the lazy dog.';
let numLetters = 1000;
function setup() {
createCanvas(400, 400);
background(255);
fill(0);
// set serif font
textFont('Times New Roman');
for(let i = 0 ; i < numLetters; i++){
// pick the next character from the string above, looping from the start when the i counter is greater or equal to the number of characters in the string
let character = stringOfCharacters.charAt(i % stringOfCharacters.length);
// 50-50 change of pick a case
character = random(0.0, 1.0) > 0.5 ? character.toUpperCase() : character.toLowerCase();
// pick a random position
let randomX = random(0, width);
let randomY = random(0, height);
// pick a random size
let size = random(12, 24);
// pick a random angle (rember, by default, angles in p5 are in radians (though can be changed with angleMode(DEGREES)))
let randomAngle = random(0, TWO_PI);
// isolate the coordinate system to apply the rotation
push();
rotate(randomAngle);
textSize(size);
text(character, randomX, randomY);
pop();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
Instead of the 50-50 random condition you could go for a dice roll, starting off with a rectangular grid and slightly offsetting positions (which would reduce the likelihood of intersections), or any other random method.
There a few more options in p5 you could explore for randomness such as Perlin noise() or randomGaussian() distribution
I've got this function that does a random number between 100 and 1 in JS and it adds it to the Score keeper, but the score keeper wont work. I even added parseInt for it to convert it from a string to an actually numbers int but it gives me NaN. But when I remove parseInt it gives me stacked numbers. Example: 50 + 100 will become 50100 not 150. Is there something wrong with the code? Here is the HTML and JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="pets.css">
</head>
<body>
<div>
<h1>Score Keeper</h1>
<button onclick="randGen()">Random Numbers</button>
<p id="paragraph"></p>
</div>
<h2 id="score"></h2>
<script src="pets.js"></script>
</body>
</html>
const scoreKeeper = document.getElementById('score');
scoreKeeper = 0;
function randGen() {
const p = document.getElementById('paragraph');
const generatedNumber = Math.floor(Math.random() * 100) + 1;
let currentNumber = parseInt(scoreKeeper.innerText) ?? 0
if (generatedNumber > 0) {
p.innerHTML = `Your number is: ${generatedNumber}`
currentNumber += generatedNumber;
scoreKeeper.innerText = currentNumber;
return scoreKeeper;
}
}
Its a simple javaScript mistake. You are overwriting const. The aspect of const is that the value can NOT be overwritten. change it to let.
Also, you get an element document.getElementById("score") but then automatically overwrite it as 0. Also also, doing parseInt(scoreKeeper.innerText) ?? 0 checks if you can parseInt the innerText rather then if the innerText exist. You should check if it exist first and then parseInt it.
let scoreKeeper = document.getElementById("score");
function randGen() {
let p = document.getElementById("paragraph");
const generatedNumber = Math.floor(Math.random() * 100) + 1;
let currentNumber = scoreKeeper.innerText
? parseInt(scoreKeeper.innerText)
: 0;
if (generatedNumber > 0) {
p.innerHTML = `Your number is: ${generatedNumber}`;
currentNumber += generatedNumber;
scoreKeeper.innerText = currentNumber;
}
}
Also, the return in this case in not needed. You do not return a value to any other function or place. You are modifying your h2 and p inner text directly from the function.
EDIT
You can make the code more readable and using less global variables by making an if check to check if the value is what you do not want and just do an empty return, and move the let scoreKeeper inside the function. Declare all other variables, besides the generatedNumber, after the check and return to only create variables and use up memory if the conditions are met.
function randGen() {
const generatedNumber = Math.floor(Math.random() * 100) + 1;
if (generatedNumber <= 0) return;
let scoreKeeper = document.getElementById("score");
let p = document.getElementById("paragraph");
let currentNumber = scoreKeeper.innerText
? parseInt(scoreKeeper.innerText)
: 0;
p.innerHTML = `Your number is: ${generatedNumber}`;
currentNumber += generatedNumber;
scoreKeeper.innerText = currentNumber;
}
I know this may seem like a simple question but I'm stumped. I'm supposed to create a times table using increments of 12. While I can use any method, I'm attempting to use a for loop. The formula works just fine, it multiplies 'number' by 12, but I need to put, for instance, 12 * 1 = 12, rather than 12 * = 12 which is what I have now. Is there anything that I can do to improve upon this?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script>
var number = 0;
i = 0
for (number; number <=12; number++) {
document.write("12 * " + number * 12 + "</br>");
i++;
}
</script>
</body>
</html>
I think this may be what you're trying to accomplish, which involves ensuring you output the value of your iterating variable (number in this case).
var number = 0;
for (number; number <=12; number++) {
document.write("12 * " + number + " = " + number * 12 + "</br>");
}
I need to write a program that finds the middle of an array and returns the value stored there unless the array is even then it should return the average of the two middle most numbers. Here is the code i have so far. i'm stuck on how i would find the middle two numbers in an even array and return the average. I'm a super beginner in java script so all help is appreciated. Thanks!
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Add Ends</title>
<script language="javascript" type="text/javascript">
/*
Write a function named getMiddle that returns the value of the middle element in an array. If the array has an even number of elements, then this function must return the average of the two middle elements.
*/
var testNumbers = [0, 1 ,2, 3, 4, 5, 6, 7, 8, 9]
function isEven()
{
var mid = (testNumbers[0] + (testNumbers.length)) / 2;
}
function getMiddle(list)
{
var mid = (testNumbers[0] + (testNumbers.length)) / 2;
if (mid % 2 == 0)
{
var evenMid = isEven();
document.getElementById("outputDiv1").innerHTML = evenMid;
}
else
{
document.getElementById("outputDiv1").innerHTML = mid;
}
}
</script>
</head>
<body>
<button type="button" onclick="binarySearch()">Find the Middle</button>
<br>
<div id="outputDiv1"></div>
</body>
</html>
This should get you somewhere (from this SO answer):
if (nums.length %2 == 0) {
// even-length array (two middle elements)
var avg = (nums[(nums.length/2) - 1] + nums[nums.length/2]) /2;
}
Try the following:
/*
Write a function named getMiddle that returns the value of the middle element in an array. If the array has an even number of elements, then this function must return the average of the two middle elements.
*/
var testNumbers = [0, 1 ,2, 3, 4, 5, 6, 7, 8, 9]
function output(){
var mid = getMiddle(JSON.parse(document.getElementById("lst").value));
outputDiv1.innerHTML = mid;
}
function getMiddle(list)
{
if(list.length % 2 == 1){
return list[(list.length-1)/2];
}else{
return (list[(list.length/2)]+list[(list.length/2 -1)])/2
}
}
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Add Ends</title>
</head>
<body>
<input id="lst">
<button type="button" onclick="output()">Find the Middle</button>
<br>
<div id="outputDiv1"></div>
</body>
</html>
var idx = (testNumbers.length-1) / 2;
document.getElementById('outputDiv1').textContent =
( testNumbers[Math.floor(idx)] + testNumbers[Math.ceil(idx)] )/2;