JavaScript + html programik z Math.random()
Panel użytkownika
Nazwa użytkownika:
Hasło:
Nie masz jeszcze konta?
Zarejestruj się!

JavaScript + html programik z Math.random()

AutorWiadomość
Temat założony przez niniejszego użytkownika
JavaScript + html programik z Math.random()
» 2020-01-11 10:50:14
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!dcmvLJ91lJW6TlGp3xccyq8qYLqDuTJxgKhK9yucofo

15.js link:https://mega.nz​/#!lIxnzChS!EJerBTLylCf8TGZZbhTFk9yeMFvfMj07ZfhKUO-0r-Y

index.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.
P-176025
« 1 »
 Strona 1 z 1