I created a program which I display the array from input numbers by clicking the button "Add"(which have function "Push"). Then I created another button "What is minimum?" to find the minimum numbers among those and display it by function " Findmin"
But when I console it in Google it had the error Minimum is not defined
How can I access the array created in the function "Push" and use in function " Findmin" ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Find Minimum Number</title>
</head>
<body>
<div>
<h3><b>Find Minimum Number</b></h3>
</div>
Number add to Array:<input type="text" id="num" name="inputNumber">
<button onclick="Push()">Add</button>
<br>Array Number is: <span id="result"></span>
<br><button onclick="Findmin()">What is minimum?</button>
<span id="Min"></span>
<script>
const array = [];
const Min = document.querySelector("#Min");
function Push()
{
let x = document.querySelector("#result");
array.push(document.querySelector("#num").value);
x.textContent = `[`+array+`]`;
}
function Findmin(array)
{
let minimum = array[0];
for (let i =0; i<array.length; i++)
{
if(minimum > array[i]) minimum = array[i];
}
return minimum
Min.textContent = minimum;
}
</script>
</body>
</html>
Edit : I changed the arg passed in Findmin() to "array" . Now I have the error Cannot read property '0' of undefined at this code let minimum = array[0]; I still think the problem it is I don't know how to access in the array created in the first function not the const array = []
Edit2 After all I think I have found my solution . My code work very well even if I input 2 same numbers to the array. For example : I input 34,34,567,9 then the result will return 9. I will post my changed code here. If anyone have any idea on how to make my code easier to read then you're very welcome!
function Findmin()
{
let minimum = document.querySelector("#num").value[0];
for (let i =0; i<document.querySelector("#num").value.length; i++)
{
if(minimum >= document.querySelector("#num").value[i])
minimum = document.querySelector("#num").value[i];
}
Min.textContent = minimum;
I think this will be a easier approch
const array = [];
const Min = document.querySelector("#Min");
function Push() {
let x = document.querySelector("#result");
array.push(document.querySelector("#num").value);
x.textContent = `[` + array + `]`;
}
function Findmin() {
Min.textContent = Math.min(...array.map(Number));
}
<div>
<h3><b>Find Minimum Number</b></h3>
</div>
Number add to Array:
<input type="text" id="num" name="inputNumber" />
<button onclick="Push()">Add</button>
<br /> Array Number is: 
<span id="result"></span>
<br />
<button onclick="Findmin()">What is minimum?</button>
<span id="Min"></span>
You return minimum before setting Min's textContent to minimum. Returning exits the function - further code is not executed.
Instead, set the textContent before returning:
const array = [];
const Min = document.querySelector("#Min");
function Push() {
let x = document.querySelector("#result");
array.push(document.querySelector("#num").value);
x.textContent = `[` + array + `]`;
}
function Findmin(arr) {
let minimum = array[0];
for (let i = 0; i < array.length; i++) {
if (minimum > array[i]) minimum = array[i];
}
Min.textContent = minimum;
return minimum
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Find Minimum Number</title>
</head>
<body>
<div>
<h3><b>Find Minimum Number</b></h3>
</div>
Number add to Array:<input type="text" id="num" name="inputNumber">
<button onclick="Push()">Add</button>
<br>Array Number is: <span id="result"></span>
<br><button onclick="Findmin()">What is minimum?</button>
<span id="Min"></span>
</body>
</html>
you did it very will actually
but your problem is that you return minimum before Min.textContent = minimum
another good way is to use sort the select first index 0
const array = [];
const Min = document.querySelector("#Min");
function Push()
{
let x = document.querySelector("#result");
array.push(document.querySelector("#num").value);
x.textContent = `[`+array+`]`;
}
function Findmin(arr)
{
let minimum = (array.sort((a, b) => a - b))[0];
Min.textContent = minimum;
return minimum
}
<div>
<h3><b>Find Minimum Number</b></h3>
</div>
Number add to Array:<input type="text" id="num" name="inputNumber">
<button onclick="Push()">Add</button>
<br>Array Number is: <span id="result"></span>
<br><button onclick="Findmin()">What is minimum?</button>
<span id="Min"></span>
function Findmin(arr)
{
Min.textContent = Math.min(...arr);
}
For more information =>
https://medium.com/#vladbezden/how-to-get-min-or-max-of-an-array-in-javascript-1c264ec6e1aa
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'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 am doing the following JS exercise in which I need to parse all the numbers in the given paragraph and then sum all those numbers.
function get_sum() {
let s = document.getElementById('pc').textContent;
let matches = s.match(/(\d+)/);
let sum = 0;
for(let i = 0; i < matches.length; ++i) {
sum += matches[i];
}
console.log(sum);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PC</title>
</head>
<body>
<p id="pc"> The cost of the processor is 9000.
The cost of the motherboard is 15000. The memory card is 6000.
The price of the monitor is 7000. The hard disk price is 4000.
Other item's cost is 6000. </p>
<button type="button" onclick='get_sum()'>Get Sum</button>
</body>
</html>
The output should be an evaluation of the expression of 9000+15000+6000+7000+4000+6000 i.e. 47000
Here:
function get_sum() {
let s = document.getElementById('pc').textContent;
let matches = s.match(/(\d+)/g);
let sum = 0;
for(let i = 0; i < matches.length; ++i) {
sum += Number(matches[i]);
}
console.log(sum);
}
added g for global,
added Number() because you get strings...
const pc = document.querySelector("#pc");
const totalBtn = document.querySelector("#btn-total");
totalBtn.addEventListener("click", e => {
const prices = pc.innerText.match(/\d+/g);
const total = prices.reduce(
(total, price) => (+price) + total, 0
);
console.log(total);
});
<p id="pc"> The cost of the processor is 9000. The cost of the motherboard is 15000. The memory card is 6000. The price of the monitor is 7000. The hard disk price is 4000. Other item's cost is 6000. </p>
<button id="btn-total">Calculate Total</button>
Just a small change in the regular expression.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PC</title>
</head>
<body>
<p id="pc"> The cost of the processor is 9000.
The cost of the motherboard is 15000. The memory card is 6000.
The price of the monitor is 7000. The hard disk price is 4000.
Other item's cost is 6000. </p>
<button type="button" onclick='get_sum()'>Get Sum</button>
</body>
</html>
<script>
function get_sum() {
let s = document.getElementById('pc').textContent;
let matches = s.match(/\d+/g);
let sum = 0;
for(let i = 0; i < matches.length; ++i) {
sum += parseInt(matches[i]);
}
console.log(sum);
}
</script>
Im trying to learn js. Im starting playing with array by generating 6 combination numbers. This is working but i dont know how to output another combinations when I click the button. Any comment is appreciated. THanks
function getRandomNumber() {
var x = document.getElementById("num1").value;
var y = document.getElementById("num2").value;
var arr = [];
while(arr.length < 8){
var myrandomnumber = Math.floor(Math.random(x) * y + 1);
if(arr.indexOf(myrandomnumber) === -1) arr.push(myrandomnumber);
}
if (x==""){
alert("Please enter a number");
}
else if (y==""){
alert("Please enter a number");
}
else{
document.getElementById("ok").innerHTML = arr;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RANDOM NUMBER JS</title>
<meta name="" content="">
<link rel="stylesheet" href="css/css/bootstrap.css">
<link rel="stylesheet" href="css/cssextra/csse1.css">
<script src="customscript.js"></script>
</head>
<body class="bg-light">
<br>
<p id="demo">Random Number</p>
<br><br>
<input type="number" id="num1" name="one"/ >
<input type="number" id="num2" name="two"/ >
<button onclick="getRandomNumber();">Generate random number</button >
<p id="ok"></p><br>
<p id="okok"></p>
</body>
</html>
Accumulate results
A easy yet crude solution would be appending the current text with <br> for line breaks:
const p = document.getElementById("ok");
p.innerHTML = p.innerHTML + (p.innerHTML === "" ? "" : "<br>") + arr.join(", ");
But this approach will notoriously perform badly as the text grows larger.
If you change the p elements into:
<div id="ok" class="text-container">
And replace the script's document.getElementById("ok").innerHTML = arr; into:
const p = document.createElement("p");
p.textContent = arr.join(", ");
document.getElementById("ok").appendChild(p);
And add css:
.text-container {
margin-top: 1em;
}
.text-container > p {
margin: 0;
}
Then you should have something working.
Also there are some things to address:
Math.random()
The function Math.random() does not take arguments, so your variable x does not have any effect.
If the intention is to x and y as a minimum and maximum value, try this from Math.random() - JavaScript | MDN:
function getRandomInt(min, max) {
var min = Math.ceil(min);
var max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
The min is inclusive and the max is exclusive. If x = 0 and y = 10, and you want the range to be [0-10], you can do getRandomInt(x, y + 1).
Make sure min is not greater than max.
Prevent infinite loop
Your loop will get stuck if the amount of possible unique integers is smaller than the number of array elements required for it to end.
More user input semantics
Variables x and y are tested before writing out the numbers, but after they have already been used to generate the numbers. In other words, the number creation process should be moved into the else block.
innerHTML expects a string and you are setting the array.
use document.getElementById("ok").innerHTML = arr.join(' ');
this will concatenate each element in the array with a space as glue
I'm trying to create a working time clock that allows me to input the number of hours I study everyday and get the total. Am I using parseInt wrong?
<html>
<head>
<title>Time clock</title>
<meta charset="utf-8">
</head>
<body>
<h1 id="header">Time clock</h1>
<p id="greeting"></p>
<input type="text" id="inp"/>
<button onclick="sumit()">Click</button>
<p id="hours"></p>
<script>
greeting.innerHTML = 'How many hours have you studied?'
function sumit(){
let text = parseInt(document.getElementById("inp").value);
let hours = (document.getElementById("hours"));
let total = 0
for (i = 0; i < 10; i++){
total += parseInt(text[i]);
hours.innerHTML = `You have studied a total of ${text + total} hours.`
}
console.log(total)
console.log(text)
}
</script>
</body>
</html>
The text variable is already defined and assigned the value of parseInt. So your total += parseInt(text[i]) is trying to index a number type (e.g. total += 123[0]) which isn't possible. Instead, you can just do total += text, or you can remove the parseInt call when you declare text and then do total += parseInt(text).
With minimal changes, this should work:
function sumit() {
let text = parseInt(document.getElementById("inp").value) || 0;
let hours = document.getElementById("hours");
let total = 0;
total += text;
hours.innerHTML = `You have studied a total of ${total} hours.`;
}
Explanation
parseInt can return NaN, so we use the || operator to let it default to 0
You don't need to loop over anything to sum the number
Even if you were looping over anything, you don't use reference indexes on numbers like you tried to do with text[i]
You don't need to add total to text multiple times