Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Alex
Tvůrce
Avatar
Alex:15.3.2021 14:17

Ahoj, potřeboval bych po vykonání akce uživatelem přegenerovat obsah divu, aby v tom samém divu mohl udělat akci jinou.
Konkrétně - mám v
<div>
<selection>
a v něm určité možnosti. Jakmile uživatel vybere nějakou z těch možností, potřebuji, aby se v divu obsah přegeneroval, v závisloti na uživatelem vybrané možnost, do které pak zadá další parametry, ty si pak přebere ASPéčko. Oprimální by bylo, aby se obbsah přegeneroval bez stisknutí tlačítka.

Zkusil jsem: Zkoušel jsem si udělat skript v javascriptu, který by mi potřebnou část dokeneroval

function openOption() {
    var selection = document.getElementById("selection");
    var selected = selection.optioms[selection.selectedIndex].value;
    switch (selection) {
        case "1":

            document.querySelector("#provizorko").insertAdjacentHTML(
                `<label for="motor">
                    Zadejte počet kroků pro motor
                     <select id="motor">
                            <option>0</option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option disabled="disabled">5</option>
                     </select>
                </label>
            <input name="motor" id="kroky" type="number" />`
            break;
           );
    }
}

Přítomnost tohoto obsahu v <div> je nutná, protože <div>, jehož obsah chci přegenerovat, je taktéž generován javascriptem a může jich být generováno několik desítek (id si budu měnit postupně u každého, také pomocí javascriptu). Zároveň je nutné, aby tyto prvky byly jak vizuálně, tak "programově" řazeny chronologicky. Nebudou-li, dokazí se celý zbytek programu.
Generovaný div, včetně generacey vypadá takto:

function addBlock() {
    document.querySelector("#content").insertAdjacentHTML(
        "afterbegin",
        `<div class=" block" id="provizorko">
            <select id="selection">
                <option disabled="disabled" selected="selected"> nevybráno</option>
                <option id="kroky">Kroky</option>
                <option id="uhly">Úhly</option>
                <option id="cyklus">Cyklus</option>
                <option id="souradnice">Souřadnice</option>
            </select>
            <button type="button" onclick = "openOption" id="button">Nastavit</button>
        </div>`
    )
}

Je dost možné, že zádrhel je právě v tom <slection>u zatím jsem s ním moc nepracoval, takže možná je blbě jenom ten switch. Nevím

Chci docílit: Cílem je, aby se obsah přegeneroval na základě vybrané položky ze selectionu, na jiný obsah, obsahující políčka, přidružená k danému option.
Ideálně bez nutnosti použít javascript :-)

 
Odpovědět
15.3.2021 14:17
Avatar
Ondřej Šrytr
Člen
Avatar
Ondřej Šrytr:15.3.2021 21:01

Ahoj,

zarazil mě tento řádek:

var selected = selection.optioms[selection.selectedIndex].value;

Nemělo by to být options místo optioms?

 
Nahoru Odpovědět
15.3.2021 21:01
Avatar
Alex
Tvůrce
Avatar
Odpovídá na Ondřej Šrytr
Alex:15.3.2021 21:14

Mělo : -)

 
Nahoru Odpovědět
15.3.2021 21:14
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:16.3.2021 8:05

Ja tam vidim taky pad veci. Ale pouzivam bezny, starsi js, tak mozna se pletu.

1. Najdi si priklad a zprovozni z googlu. Pak mas jistotu, ze je kod ok. Bez tech preklepu, co vidim...
google = insertAdjacentHTML

// https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
Example

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

2. Prohlizec ma javascriptovou konzolu, ktera pise chyby.
3.

  • na zacatku a na konci sringu se pouziva apostrof ' ' nikoliv sql zpetny apostrof ` `
  • tak, ci tak, ve starem js bylo nutne radek ukoncit zpetnym lomitkem \ . nebo pouzivej jednoradkovy zapis kodu.

Ale koukam, ze to nejspis mas dobre, ze nove tuto formu pridali.

const item = `<div>
    test
  </div>
`
document.querySelector('#container').insertAdjacentHTML('afterend', item)
  • onclick = "openOption" nemelo by to byt onclick = "openOption();", jakoze chces spustit funkci a ne priradit tam string
 
Nahoru Odpovědět
16.3.2021 8:05
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:16.3.2021 8:09

Jakoze starym kodem pro string, by se to psalo takto

<script>
var str = "\
<form>\
<input>\
<\/form>\
";
// nebo, kdyz tam chces odradkovani, tak + \n
var str = "\n\
<form>\n\
<input>\n\
<\/form>\n\
";
</script>
Editováno
 
Nahoru Odpovědět
16.3.2021 8:09
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 5 zpráv z 5.