JavaScript program widzi (10>=5) jako false

pytanie zadane 11 stycznia 2020 w JavaScript przez Raivik Nowicjusz (150 p.)

Witam uczę się JS i mam problem bo nie mogę dojść dlaczego program mi widzi 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ć po otwarciu index.html w max 10 a w minimum np 5 i wtedy powstają błędy.

plik index.html, plik 15.js

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);

1 odpowiedź

odpowiedź 11 stycznia 2020 przez DawidK Nałogowiec (37,910 p.)
wybrane 11 stycznia 2020 przez Raivik

Najlepsza

W kodzie jest:

let max = 0;
let min = 0;

i później:

if (max <= min)

inputy to:

const maxInput = document.getElementById("maxInput");
const minInput = document.getElementById("minInput");

Edycja:

Nie zauważyłem 'w międzyczasie' funkcji set() - przypisuje ona wartości z inputów, ale to nie są liczby tylko stringi, które są póżniej porównywane.

komentarz 11 stycznia 2020 przez Raivik Nowicjusz (150 p.)
edycja 11 stycznia 2020 przez Raivik

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.

Edycja:

chyba rozumiem popełniłem błąd bo maxInput.value i minImput.value dają stringi potem tak jak piszesz porównywał stringi bo po co je konwertować automatycznie skoro obie zmienne są stringami. nadal nie rozumiem porównywania stringów liczbowych co on porównywał długość, wartości w ASCII czy coś innego?

komentarz 11 stycznia 2020 przez DawidK Nałogowiec (37,910 p.)

Ten kod działał w ten sposób:

- tworzyłeś zmienną typu number

- konwertowałeś ją na number

- wartości pochodzące z inputów są zawsze stringami nawet jeżeli to 1,2,3,4 itd i wartość tego typu przypisałeś do zmiennej

- na końcu porównywane były stringi

let max = 0;
let min = 0;

console.log(`Type min: ${typeof(min)} Type max: ${typeof(max)}`)

max = Number(max)
min = Number(min)

console.log(`Type min: ${typeof(min)} Type max: ${typeof(max)}`)

max = '10' // wartość otrzymana z inputa (string)
min = '5' // wartość otrzymana z inputa (string)

console.log(`Type min: ${typeof(min)} Type max: ${typeof(max)}`)

console.log(max>min ? true : false)