NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Button disabled - aktivace po zapsání do input

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Radek Morris Sedláček
Člen
Avatar
Radek Morris Sedláček:15.2.2020 20:47

Prosím dokáži nějak sloučit tyto dvě funkce v jednu tak, aby to fungovalo pro každý button zvlášť?

let cislo1 = parseInt(document.getElementById('c1').value);
let cislo2 = parseInt(document.getElementById('c2').value);
let spust = document.getElementById('spust');
let hadej = document.getElementById('hadej');

function aktivace_spust(cislo1) {

    let btn1 = spust;

    if (cislo1.value != '') {
        btn1.disabled = false;
    } else {
        btn1.disabled = true;
    }
}

function aktivace_hadej(cislo2) {

    let btn2 = hadej;

    if (cislo2.value != '') {
        btn2.disabled = false;
    } else {
        btn2.disabled = true;
    }
}

Html kód zde

<!DOCTYPE html>
<html lang="cs_CZ" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <form class="form_hadej" name="form_hadej" action="index.html" method="post">
            <legend><strong><em>Hádej číslo</em></strong></legend>
            <div class="nastav">
                <label for="c1">Vlož rozsah</label>
                <input type="number" onkeyup="aktivace_spust(this);" id="c1" class="cislo" name="cislo1" value="">
                <button type="button" id="spust" name="spust" disabled>Spusť</button>
            </div>
            <br>
            <div class="hraj">
                <label for="c1">Hádej</label>
                <input type="number" id="c2" class="cislo" onkeyup="aktivace_hadej(this)"; name="cislo2" value="">
                <button type="button" id="hadej" name="hadej" disabled>Hádej</button>
            </div>
        </form>
        <script type="text/javascript"src="main.js"></script>
    </body>
</html>

Zkusil jsem: Vyzkoušel jsem toto, ale marně.

let cislo = document.getElementsByClassName('cislo').values;

function aktivace(cislo) {

    let btn = document.getElementsByTagName('button');

    if (cislo.values != '') {
        btn.disabled = false;
    } else {
        btn.disabled = true;
    }
}

Chci docílit: Je to v rámci do školy a opakování toho samého kódu mi přijde ujeté. V tutoriálu jsem se dočetl, že kód by se neměl opakovat, už pro přehlednost. To samé jsem zaslechl v tutoriálu na youtube.
Potřebuji, aby se button tlačítko, které je deaktivované, aktivovalo ve chvíli, kdy se do input typu number zapíše nebo nakliká číslo. Každý button musí pracovat samostatně nezávisle na druhém.
Jenže ať se snažím sebe víc, nedaří se mi to sjednotit do jednoho kódu.
navíc nevím zda je kód správně napsaný ve verzi ES6.

Odpovědět
15.2.2020 20:47
Při dotazování se povzneste nad pocit, že můžete působit dojmem nejhloupějšího člověka v místnosti. [Jack Welch]
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:15.2.2020 21:48

Řešení může vypadat třeba následovně.

function aktivuj(element, buttonid) {
  let val = parseFloat(element.value);
  let btn = buttonid !== undefined ? document.getElementById(buttonid) : element.nextElementSibling;
  btn.disabled = isNaN(val) ? true : false;
}

Mysli na to, že input typu number má i tlačítka a nejde reagovat jen na onkeyup, ale musíš i na onchange.

<input type="number" onkeyup="aktivuj(this);" onchange="aktivuj(this);" value="" />

Celé v akci si to můžeš vyzkoušet tady včetně druhého volitelného parametru funkce https://jsfiddle.net/91am6s2w/

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
15.2.2020 21:48
Neaktivní uživatelský účet
Avatar
Radek Morris Sedláček
Člen
Avatar
Radek Morris Sedláček:15.2.2020 22:12

Pane, mnohokrát děkuji za velkou pomoc. Ale popravdě nevím, co jsi to vlastně udělal.
Jinak jsem musel udělat úpravu a deklarovat aktivuj
Nastavil jsem

const aktivuj = (element, buttonid) => {
…
}

A funguje.
Ještě jednou díky.

Nahoru Odpovědět
15.2.2020 22:12
Při dotazování se povzneste nad pocit, že můžete působit dojmem nejhloupějšího člověka v místnosti. [Jack Welch]
Avatar
Milan Suchomel
Člen
Avatar
Milan Suchomel:15.2.2020 23:28

Ahoj,
na začátek upozorňuji, že javascript jsem nikdy nedělal :D ale co takhle

<input type="number" onkeyup="activate(this, 'spust');" id="c1" class="cislo" name="cislo1" value="">
<button type="button" id="spust" name="spust" disabled>Spusť</button>

<input type="number" id="c2" class="cislo" onkeyup="activate(this, 'hadej')"; name="cislo2" value="">
<button type="button" id="hadej" name="hadej" disabled>Hádej</button>

a pak

function activate(number, btnId) {
    let btn = document.getElementsById(btnId);
    btn.disabled = number.values == ''
}
 
Nahoru Odpovědět
15.2.2020 23:28
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na Radek Morris Sedláček
Neaktivní uživatel:16.2.2020 6:58

Nemáš zač a nehledej v tom žádné záhady. Po řádcích se v té metodě děje:

  1. Vezme se hodnota elementu odkazovného v prvním parametru a nakládá se s ní jako s číselnou
  2. Pokud jsi ve volání metody definoval buttonid, bere se za tlačítko element s tímto ID. Jinak se za něj považuje sousedící prvek.
  3. Tlačítku bude nastaveno disabled, když hodnota z inputu není číslo (is-Not-a-Number vrátí true).
Nahoru Odpovědět
16.2.2020 6:58
Neaktivní uživatelský účet
Avatar
Radek Morris Sedláček
Člen
Avatar
Radek Morris Sedláček:16.2.2020 12:49

Jestě jednou díky.

Nahoru Odpovědět
16.2.2020 12:49
Při dotazování se povzneste nad pocit, že můžete působit dojmem nejhloupějšího člověka v místnosti. [Jack Welch]
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.