Witam uczę się JS i mam problem bo nie mogę dojść dlaczego program mi widzi np. że warunek (10>5) daje false. Nawet jak zamieniam wartości string na number.
To też nie do końca działa: Math.random()* (10-5+1) + 5;
proszę o pomoc w zrozumieniu co zrobiłem nie tak.
Najprościej wpisać w max 10 a w minimum np 5 i wtedy powstają błędy.
index.html link:
https://mega.nz/#!RI4FwIiB!dcmvLJ91lJW6TlGp3xccyq8qYLqDuTJxgKhK9yucofo15.js link:
https://mega.nz/#!lIxnzChS!EJerBTLylCf8TGZZbhTFk9yeMFvfMj07ZfhKUO-0r-Yindex.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>15-random_w_przedziałach</title>
<style>
body {
background-color: rgb(110, 92, 90);
text-align: center;
font-family: sans-serif;
font-size: 20px;
}
input {
width: 100px;
text-align: center;
border-radius: 5px;
font-size: 15px;
padding: 5px;
margin: 2px;
}
input:focus{
background-color: rgb(253, 205, 116);
border: 2px solid rgb(206, 134, 0);
outline: none;
}
button{
width: 150px;
margin: 2px;
padding: 4px;
border: 1px solid black;
border-radius: 5px;
outline: none;
font-size: 15px;
}
button:active{
background-color: black;
color: mistyrose;
}
#randomA,
#numbersList{
margin: 10px;
color: mistyrose;
border: 1px solid rgb(110, 102, 102);
}
</style>
</head>
<body>
<h1>Wpisz zakres losowania:</h1>
<div id="divOne"><button id="addBtn">dodaj</button></div>
<div id="divTwo"><input type="text" value="max" id="maxInput"><input type="text"value="minimum" id="minInput"></div>
<div id="numbersList">max: 0, minimum: 0</div>
<div id="randomList"><button id="random">losuj 10 liczb</button></div>
<div id="randomA">Liczby losowe:</div>
<script src="15.js"></script>
</body>
</html>
15.js:
const addBtn = document.getElementById("addBtn");
const maxInput = document.getElementById("maxInput");
const minInput = document.getElementById("minInput");
const divInputs = document.getElementById("numbersList");
const divRandom = document.getElementById("randomA");
const randomBtn = document.getElementById("random");
let max = 0;
let min = 0;
max = Number(max);
min = Number(min);
const test = () => {
console.log(`test()-- max = ${max}, min = ${min}`);
console.log(`test()-- (max>=min)= ${max>=min}`)
if (max <= min){
divInputs.textContent = `max: Zbyt NISKI!, minimum: ${min}`;
}
else
divInputs.textContent = `max: ${max}, minimum: ${min}`;
}
const set = () => {
console.log(`set()-- maxInput= ${maxInput.value}, minInput= ${minInput.value}`)
if (maxInput.value !== "max")
max = maxInput.value;
console.log(`set()-- max = ${max}`);
if (minInput.value !== "minimum")
min = minInput.value;
console.log(`set()-- min = ${min}`);
divInputs.textContent = `max: ${max}, minimum: ${min}`;
test();
}
const clean = (e) =>{
e.target.value = "";
}
const uncleanMax = (e) => {
if (e.target.value === "")
e.target.value = "max";
}
const uncleanMin = (e) => {
if (e.target.value === "")
e.target.value = "minimum";
}
const randomNumbers = () =>{
if (max>min){
let random = [];
for(let i = 0; i<10 ;i++) {
random.push(Math.floor(Math.random() * (max - min + 1) + min));
console.log(`for ${i} randomNumbers()-- ${random}`);
}
divRandom.textContent = random.join(", ");
}
else
divRandom.textContent = "max musi być większy od minimum!"
}
addBtn.addEventListener("click", set);
maxInput.addEventListener( "focus", clean);
minInput.addEventListener( "focus", clean);
maxInput.addEventListener( "blur", uncleanMax);
minInput.addEventListener( "blur", uncleanMin);
randomBtn.addEventListener("click", randomNumbers);
Edycja:
Uff udało się rozwiązać problem zmieniłem to co na dole i usunąłem wyżej linijki które zmieniały max i min na Number:
const set = () => {
console.log(`set()-- maxInput= ${maxInput.value}, minInput= ${minInput.value}`)
if (maxInput.value !== "max")
max = Number(maxInput.value);
console.log(`set()-- max = ${max}`);
if (minInput.value !== "minimum")
min = Number(minInput.value);
console.log(`set()-- min = ${min}`);
divInputs.textContent = `max: ${max}, minimum: ${min}`;
test();
}
Teraz wszystko działa :)
Najwyraźniej konwersja automatyczna ze string na Number (maxInput na max) i (minImput na min) coś psuła choć nadal nie wiem czemu może ktoś mi to wyjaśni.