Diskuze: Random Number - hádej číslo

Radek Morris Sedláček

Člen

Radek Morris Sedláček:13.2.2020 20:13

Mám úkol naprogramovat Javascript webovou aplikaci „hádej číslo“ se spoustou úkolů dá se říci, že jsem s tím i pohnul a funguje to na 75%. Problém mám, že neumím aplikovat náhodné číslo, které se generuje v rozsahu od 1 do (zadané uživatelem). Bohužel nepatřím mezi programátory.
Bohužel Random mi funguje, jen ve volané funkci tipuj. Jenže to mi generuje číslo vždy nové při každém hádání. Takže to nedělá co má.
Může mi někdo poradit jak to udělat aby to fungovalo. Pokud random deklaruji mimo funkci tak ji neumím nadeklarovat do funkce.

Kód opravdu píše ne programátor, respektive ten co se to učí a věřím, že je to matlanice. Nechám si rád poradit. Prosím i o vysvětlení proč mi to nejde.

Zkusil jsem: Nekudy mi v konzoli vyskočí hláška

ukol_2.js:65 Uncaught TypeError: Cannot set property 'innerHTML' of null
    at tipuj (ukol_2.js:65)
    at HTMLInputElement.onclick (ukol_2.html:62)
tipuj @ ukol_2.js:65
onclick @ ukol_2.html:62

Jedná se o tyto řádky

document.getElementById("konec_hry").innerHTML = "Gratuluji! Uhodli jste hledané číslo. Pokusů k uhádnutí  " + pokusy;

a v html pak

<input type="button" id="btSubmit2" onClick="tipuj(this);" value="Tipuj" disabled><br>

ale to není pravidlem to se stává jen třeba po pátém hádání.

// ***************************************************************************
// ***************** Funkce aktivace pro "Můj třetí program" *****************
// ***************************************************************************

function aktivace1(c1) {

    let bt = document.getElementById("btSubmit");   // do proměné načítám button s id btSubmit

    if (c1.value != "") {                           // pokud input s id c1 není prázdný
        bt.disabled = false;                        // vypnu disabled buttonu
    } else {                                        // v opačném případě
        bt.disabled = true;                         // zapnu deaktivaci buttonu
    }
};

function aktivace2(c2) {

    let bt2 = document.getElementById("btSubmit2"); // do proměné načítám button s id btSubmit2

    if (c2.value != "") {                           // pokud input s id c1 není prázdný
        bt2.disabled = false;                        // vypnu disabled buttonu
    } else {                                        // v opačném případě
        bt2.disabled = true;                         // zapnu deaktivaci buttonu
    }
};

// ***************************************************************************
// ****************** Funkce spust pro "Můj třetí program" *******************
// ***************************************************************************
function nacti() {
    let c1 = document.forms["form_hadej"]["cislo1"].value;          // do proměné c1 načtu zadané číslo z rozsahu z formuláře
    let n1 = parseInt(c1);                                          // přetipuji na celé číslo
    return n1;
};

function spust() {
    let n1 = nacti();
    document.getElementById("hraj").style.visibility = "visible";   // zobrazíme skrytý formulářový div hraj

    if (n1 != "") {        document.getElementById("rozsah").innerHTML = "Rozsah hádaného čísla je od 1 do " + n1;
    }
};

pokusy = 0;

function tipuj() {
    let n1 = nacti();
    let c2 = document.forms["form_hadej"]["cislo2"].value;
    let rndcislo = Math.floor(Math.random() * n1) + 1;
    let hledcislo = parseInt(c2);
    let mensi = hledcislo > rndcislo && hledcislo <= n1;
    let vetsi = hledcislo < rndcislo && hledcislo <= n1;
    let uhodnuto = hledcislo == rndcislo;
    pokusy++
    document.getElementById("pocet_pokusu").innerHTML = "Pokusy: " + pokusy + ";   Hledané číslo je " + rndcislo;

    if (mensi) {
        document.getElementById("napoveda").innerHTML = "Hledané číslo je menší";
        alert("Hledané číslo je menší");
    } else if (vetsi) {
        document.getElementById("napoveda").innerHTML = "Hledané číslo je větší";
        alert("Hledané číslo je větší");
    } else if (uhodnuto) {
        document.getElementById("konec_hry").innerHTML = "Gratuluji! Uhodli jste hledané číslo. Pokusů k uhádnutí  " + pokusy;
        alert("Gratuluji! Uhodli jste hledané číslo. Pokusů k uhádnutí  " + pokusy);
    } else {
        document.getElementById("napoveda").innerHTML = "nepodváděj číslo je větší než uvedený rozsah";
        alert("nepodváděj číslo je větší než uvedený rozsah");
    }
};

<h2>Můj třetí program</h2>

<form name="form_hadej">
    <fieldset class="row">
        <legend><em><strong>Hádání čísel</strong></em></legend>
        <div>
            <label for="c1"><strong>Zadej hodnotu rozsahu, ze kterého budete hádat číslo</strong></label><br>
            <input type="number" id="c1" name="cislo1" placeholder="1" onkeyup="aktivace1(this)" title="Pro správnou funkčnost vyplňte číslo klavesnicí">
            <input type="button" id="btSubmit" onClick="spust(this)" value="Spustit" disabled>
        </div>
        <div>
            <p id="rozsah"></p>
        </div>
        <div id="hraj">
            <label for="c2"><strong>Misli si číslo v zadaném rozsahu, zkus ho uhodnout</strong></label><br>
            <input type="number" id="c2" name="cislo2" placeholder="1" onkeyup="aktivace2(this)" title="Pro správnou funkčnost vyplňte číslo klavesnicí">
            <input type="button" id="btSubmit2" onClick="tipuj(this);" value="Tipuj" disabled><br>
            <div>
                <p id="napoveda"></p>
                <p id="pocet_pokusu"></p>
            </div>
        </div>
    </fieldset>
</form>

Chci docílit: Kompletní zadání je na přiloženém obrázku.

Odpovědět

13.2.2020 20:13

Při dotazování se povzneste nad pocit, že můžete působit dojmem nejhloupějšího člověka v místnosti. [Jack Welch]

Radek Morris Sedláček

Člen

Radek Morris Sedláček:13.2.2020 23:59

Zapoměl jsem ještě dodat

#hraj  {
    visibility: hidden;
}

Nahoru Odpovědět

13.2.2020 23:59

Při dotazování se povzneste nad pocit, že můžete působit dojmem nejhloupějšího člověka v místnosti. [Jack Welch]

Peter Mlich

Člen

Peter Mlich:14.2.2020 9:05

Co jsi nasel google? Nasel sis priklady? google = js random example

function rnd(n) { return Math.floor(Math.random() * n); }
...
a = rnd(5);

var $, $$;
$ = document.querySelector.bind(document);
$$ = document.querySelectorAll.bind(document);
...
//document.getElementById("napoveda").innerHTML
$("#napoveda").innerHTML // musi se pak pridat krizek, protoze id pro queryselektor pouziva krizek

var $;
$ = document.getElementById; // nebo function $ (id) { return document.getElementById(id); }
//document.getElementById("napoveda").innerHTML
$("napoveda").innerHTML

google = Misli si cislo -- About 51,500 results (0.39 seconds)
google = Mysli si cislo -- About 12,300,000 results (0.41 seconds)
google = Mysly si cislo -- About 18,100,000 results (0.53 seconds)
Urcite ta prvni moznost je podezrela.
Mysly si cislo sice pise 18,100,000 vysledku, ale mezi prvnimi vysledky je text "Myslím si číslo"
Mysli si cislo, mezi prvnimi vysledky je text "Mysli si číslo", zdroj: kosmas › knihy , kosmas je zrovna pomerne zname knihkupectvi, takze ti by mohli mit pravopis asi spravne
Jaky je zaver? Prinejmensim jsem nahodnym okem objevil alespon 1 hrubku

Editováno 14.2.2020 9:06

Nahoru Odpovědět

14.2.2020 9:05

Peter Mlich

Člen

Peter Mlich:14.2.2020 9:10

A mozna by bylo jeste zajimave napsat to spis takhle:

function getFormValue(name) { return ocument.forms["form_hadej"][name].value; }
function printScreen(id, str) {document.getElementById(id).innerHTML = str;}

Nahoru Odpovědět

14.2.2020 9:10

Radek Morris Sedláček

Člen

Radek Morris Sedláček:14.2.2020 15:45

Děkuji, že jsi mi našel velmi velkou hrubku. Myslím to upřímně. Jinak pravopisných hrubek tam vidím více.

Problém je, že tato oprava mi nepomohla v řešení mého úkolu.
Jinak ano na google jsem našel spousty příkladů. Jen jsem si vše musel upravit stejně tak jako na youtube jsem našel informaci, abych nekopíroval stejné řádky a dal je do funkce. Což jsem učinil.
Nikde se mi ale nedaří zjistit informaci jak zprovoznit ten random. I když jsem provedl funkci, jak jsi mi radil tak to nejede.

function rnd(n1) {
    let n1 = nacti();
    return Math.floor(Math.random() * n1) +1;
}
rndcislo = rnd(n1);

navíc mi vyskočí, že proměnná n1 není deklarována. Chybu mi označuje v ["form_hadej"]["cislo1"].

function nacti() {
    let c1 = document.forms["form_hadej"]["cislo1"].value;
    let n1 = parseInt(c1);
    return n1;
};

Nahoru Odpovědět

14.2.2020 15:45

Při dotazování se povzneste nad pocit, že můžete působit dojmem nejhloupějšího člověka v místnosti. [Jack Welch]

Radek Morris Sedláček

Člen

Radek Morris Sedláček:16.2.2020 0:00

Stále nevím co s tímto. Generuji náhodné číslo, ale místo čísla mi po volání do konzole vyjede tato hláška. Zadaná čísla do input jsou 3 a 2.

const cislo1 = document.getElementById('c1');
const cislo2 = document.getElementById('c2');

let rndcislo = () => {
    return Math.floor(Math.random() * parseInt(cislo1.value) +1);
}

function tipuj() {
    console.log(cislo1.value);
    console.log(cislo2.value);
    console.log(rndcislo);
}

<button type="button" id="hadej" onclick="tipuj(this);" name="hadej" disabled>Hádej</button>

Výpis konzole

3                       main.js:49
2                       main.js:50
() => {         main.js:51
    return Math.floor(Math.random() * parseInt(cislo1.value) +1);
}

Zkoušel jsem i standardní funkci

function nahodne_cislo() {
    let rndcislo = Math.floor(Math.random() * parseInt(cislo1.value)) + 1;
    console.log(rndcislo);
    return rndcislo;
}

Ale tu mi nelze vyvolat napíše mi to že rndcislo není deklarováno

main.js:50 Uncaught ReferenceError: rndcislo is not defined
    at tipuj (main.js:50)
    at HTMLButtonElement.onclick (index.html:22)

Nahoru Odpovědět

16.2.2020 0:00

Při dotazování se povzneste nad pocit, že můžete působit dojmem nejhloupějšího člověka v místnosti. [Jack Welch]

Neaktivní uživatel

Člen

Neaktivní uživatel:16.2.2020 8:59

Nemohl bys to dát v nějaké poslední verzi na jsfiddle.net? Ať to tu nemusíme procházet a hledat změny napříč příspěvky.

Nahoru Odpovědět

16.2.2020 8:59

Neaktivní uživatelský účet

Radek Morris Sedláček

Člen

Radek Morris Sedláček:16.2.2020 13:23

https://jsfiddle.net/…7kvgt5jm/16/

Skvělé by bylo dostat ten random do funkce hraj, aby se při uhodnutí a resetování value generovalo nové číslo po stisku button Spusť, které se zobrazí po uhádnutí. Je to i logické tím uživatel odešle zahájení hry a načte se cislo1.value, které nastavuje rozsah generovaného čísla.

snad se to načte takto s online nastroji pro programovaní pracuji poprvé používám VS Code.

Nahoru Odpovědět

16.2.2020 13:23

Při dotazování se povzneste nad pocit, že můžete působit dojmem nejhloupějšího člověka v místnosti. [Jack Welch]

Radek Morris Sedláček

Člen

Radek Morris Sedláček:16.2.2020 13:54

https://jsfiddle.net/…7kvgt5jm/29/

Nahoru Odpovědět

16.2.2020 13:54

Při dotazování se povzneste nad pocit, že můžete působit dojmem nejhloupějšího člověka v místnosti. [Jack Welch]

Neaktivní uživatel

Člen

Neaktivní uživatel:16.2.2020 14:21

Teď jsem si ten dotaz ještě pořádně přečetl v kontextu celku. Asi se zamotáváš do těch arrow funkcí a deklarací proměnných. První výpis konzole ti vrací rndcislo jako funkci, protože to voláš jako proměnnou a ne funkci.

console.log(rndcislo); // vrátí, že rndcislo je funkce
console.log(rndcislo()); // vrátí return hodnotu z funkce

Druhá chyba vzniká tak, že máš rndcislo deklarováno jako let uvnitř nahodne_cislo(). Deklarace let platí jen ve složených závorkách, takže z jiné funkce tipuj() se nemůžeš dotazovat na rndcislo ani kdybys tu funkci napřed zavolal někde jinde. Musíš zavolat tu konkrétní funkci nahodne_cislo(), která vrací svou vnitřní hodnotu rndcislo.

Snad to dává smysl :-)

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

16.2.2020 14:21

Neaktivní uživatelský účet

Radek Morris Sedláček

Člen

Radek Morris Sedláček:16.2.2020 16:28

Rada byla na místě a přiklad řešení s tím že v odevzdané verzi nebude ten výpis konzolí. To tam mám jen pro ladění řešení.
Hotové řešení online: https://jsfiddle.net/…7kvgt5jm/31/
Přikládám i kód aby bylo vidět celé řešení, věřím, že by to šlo napsat lépe. A určitě to nebude celé dle normy ES6.
Ale funguje. Děkuji všem, co pomohli a poradili hlavně Neaktivní uživatel, který pomohl s řešením a psal smysluplné rady, které vedly k cíli.

HTML

<!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" id="c1" class="cislo" onkeyup="aktivuj(this);" onchange="aktivuj(this);" name="cislo1" value="">
                <button type="button" id="spust" onclick="hraj(this);" name="spust" disabled>Spusť</button>
            </div>
            <div id="rozsah">

            </div>
            <div id="hraj">
                <label for="c1">Hádej</label>
                <input type="number" id="c2" class="cislo" onkeyup="aktivuj(this, 'hadej');" onchange="aktivuj(this, 'hadej');" name="cislo2" value="">
                <button type="button" id="hadej" onclick="tipuj(this);" name="hadej" disabled>Hádej</button>
            </div>
            <div id="vysledky">

            </div>
        </form>
        <script type="text/javascript"src="main.js"></script>
    </body>
</html>

CSS

#hraj, #rozsah, #vysledky {
    visibility: hidden;
}

Javascript

'use strict'

const cislo1 = document.getElementById('c1');
const cislo2 = document.getElementById('c2');
const spust = document.getElementById('spust');
const hadej = document.getElementById('hadej');
const hrajem = document.getElementById('hraj');
const napoveda = document.getElementById('vysledky');
const rozsah = document.getElementById('rozsah');
const nova_hra = '<div><button type="button" id="nova_hra" onclick="reset_hry();" name="nova_hra">Hrát znova</button></div>';
let rndcislo;
let pokusy = 0;

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

function skryt() {
    hrajem.style.visibility = 'hidden';
    rozsah.style.visibility = 'hidden';
    napoveda.style.visibility = 'hidden';
    spust.disabled = true;
}


function hraj() {
    hrajem.style.visibility = 'visible';
    rozsah.style.visibility = 'visible';
    rndcislo = Math.floor(Math.random() * parseInt(cislo1.value) +1);

    if ((parseInt(cislo1.value)) <= 1) {
        skryt();
        alert('Zadané číslo musí být kladné a větší než jedna');
    } else if ((parseInt(cislo1.value)) !='' || (parseInt(cislo1.value)) != 0) {
        spust.disabled = true;
        rozsah.innerHTML = '<p>Rozsah hledaného čísla je od 1 do ' + (parseInt(cislo1.value)) + '.</p>';
    } else {
        skryt();
        alert('Vyplňte hodnotu rozsahu hledaného čísla.');
    }
    return rndcislo;
}

function reset_hry() {
    cislo1.value = '';
    cislo2.value = '';
    pokusy = 0;
    rozsah.innerHTML = '';
}

function tipuj() {
    console.log(cislo1.value);
    console.log(cislo2.value);
    console.log(rndcislo);
    const mensi = cislo2.value > rndcislo && cislo2.value <= cislo1.value;
    const vetsi = cislo2.value < rndcislo && cislo2.value <= cislo1.value;
    const uhodnuto = cislo2.value == rndcislo;
    napoveda.style.visibility = 'visible';
    pokusy++

    if (mensi) {
        napoveda.innerHTML = '<p>Hledané číslo je menší.</p><p>Pokus: ' + pokusy;
        alert('Hledané číslo je menší');
        hadej.disabled = true;
    } else if (vetsi) {
        napoveda.innerHTML = '<p>Hledané číslo je větší</p><p>Pokus: ' + pokusy;
        alert('Hledané číslo je větší');
        hadej.disabled = true;
    } else if (uhodnuto) {
        rozsah.innerHTML = '<p>Gratuluji! Uhodli jste hledané číslo:' + rndcislo + '. Pokusů k uhádnutí  ' + pokusy + '.</p>' + nova_hra;
        alert('Gratuluji! Uhodli jste hledané číslo. Pokusů k uhádnutí  ' + pokusy);
        skryt();
        rozsah.style.visibility = 'visible';
    } else {
        napoveda.innerHTML = '<p>Nepodváděj číslo je větší než uvedený rozsah!</p><p>Pokus: ' + pokusy;
        alert('Nepodváděj číslo je větší než uvedený rozsah');
        hadej.disabled = true;
    }
}

Nahoru Odpovědět

16.2.2020 16:28

Při dotazování se povzneste nad pocit, že můžete působit dojmem nejhloupějšího člověka v místnosti. [Jack Welch]

Peter Mlich

Člen

Peter Mlich:17.2.2020 10:59

Do funkce rnd jsi nemel zasahovat, tu jsi mel pouzit pak v kodu.

//    rndcislo = Math.floor(Math.random() * parseInt(cislo1.value) +1);
    rndcislo = rnd(5) +1;

/*
const cislo1 = document.getElementById('c1');
const cislo2 = document.getElementById('c2');
const spust = document.getElementById('spust');
const hadej = document.getElementById('hadej');
const hrajem = document.getElementById('hraj');
const napoveda = document.getElementById('vysledky');
const rozsah = document.getElementById('rozsah');
*/
var i, id_list, el_list; // a nebo rovnou si to nazvy global; global={}; global.el_list = {};
id_list = [
'cislo1',
'cislo2',
'spust',
'hadej',
'hraj',
'vysledky',
'rozsah'
];
el_list = {};
for (i in id_list)
{
el_list[id_list[i]] = document.getElementById(id_list[i]);
}
alert(el_list.cislo1)

Mno, a cele bych to schoval do nejake function inicialize() {...}

Editováno 17.2.2020 11:01

Nahoru Odpovědět

17.2.2020 10:59

Radek Morris Sedláček

Člen

Radek Morris Sedláček:17.2.2020 12:17

Petře přijde mi že jsi nepochopil Petře přijde mi, že jsi nepochopil, co jsem požadoval ta funkce náhodného čísla, musí být takto.

rndcislo = Math.floor(Math.random() * parseInt(cislo1.value) +1);

Generuji náhodné číslo v rozsahu 1 až (zadáno uživatelem), proto načítám hodnotu cislo1.value, a protože se načte jako řetězec tak jej přeložím na číslo (celé číslo).
Tvá funkce mi generuje přesně dané číslo od 1 do 5 a navíc i jako desetinné číslo, což se da pak ošetřit zaokrouhlením.

rndcislo = rnd(5) +1;

V prvním příspěvku, kdy žádám o pomoc je i screen zadaného úkolu. To je nad tím co jsi mi vytkl tu hrubku s „i“ ve slově myslím.

Vzhledem k tomu že je to úkol do školy, tak jej již dále nebudu upravovat.
Snad jen, kdybych to musel předělat na základě požadavku učitele.
Teď řeším jiné úkoly, kde pracuji již v OOP třídy konstruktory a metody a jsem si jistý, že budu žádat zase o pomoc, ale až se prokoušu nějakým základem, první se pokusím vytvořit kód sám, teprve když to nepůjde tak poprosím.

Editováno 17.2.2020 12:17

Nahoru Odpovědět

17.2.2020 12:17

Při dotazování se povzneste nad pocit, že můžete působit dojmem nejhloupějšího člověka v místnosti. [Jack Welch]