• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

JavaScript program widzi (10>=5) jako false

0 głosów
104 wizyt
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ź

0 głosów
odpowiedź 11 stycznia 2020 przez DawidK Nałogowiec (37,590 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,590 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)

 

Podobne pytania

0 głosów
1 odpowiedź 3,137 wizyt
0 głosów
7 odpowiedzi 1,243 wizyt
+1 głos
2 odpowiedzi 89 wizyt
pytanie zadane 14 października w JavaScript przez Admak Początkujący (320 p.)
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

85,715 zapytań

134,509 odpowiedzi

298,541 komentarzy

56,631 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...