Diskuze: document.write - jak ziskat css styly

Kamil

Člen

Kamil:5.9.2021 9:58

Ahoj,

jde mi o radu, jestli lze při odeslání formuláře získat css styly v document.write();

Zkusil jsem:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{background:#bf4;}
    </style>
</head>
<body>
    <form action="Pokus.html" method="POST">
        <select id="L10-FORM">
            <option value="Moznost1">Možnost1</option>
            <option value="Moznost2">Možnost2</option>
            </select>
        <input type="submit" value="Odeslat" id="odeslat">
    </form>
    <script>
        var form = document.getElementById('L10-FORM');
        var odeslat = document.getElementById('odeslat');
        console.log(form);
        console.log(odeslat);
        odeslat.addEventListener('click',function(){
            if(form.value=="Moznost1"){
                document.write("Vybral jste si chybu možnost1");
            }
        });

    </script>

</body>
</html>

Jde mi o to, abych při odeslání formuláře měl pak css styly vracené při výsledku stránky. Abych nemusel to definovat takto:

var form = document.getElementById('L10-FORM');
        var odeslat = document.getElementById('odeslat');
        console.log(form);
        console.log(odeslat);
        odeslat.addEventListener('click',function(){
            if(form.value=="Moznost1"){
                document.write("<body style='background:#bf4'>");
                document.write("Vybral jste si chybu možnost1");
                document.write('</body>');
            }
        });

Chci docílit: Aby css styly byly aktivni po odeslání formuláře.

Odpovědět

5.9.2021 9:58

Peter Mlich

Člen

Peter Mlich:5.9.2021 18:31

Styly se definuji pres tag style a html class (js className).
document.write by se pouzivat nemelo, innerHTML. Dela to, ze pripisuje k dokumentu dalsi radky, obvykle do tagu body. Pokud do html kodu pripises tag body, duplicitne k hlavnimu, muze se stat cokoliv, zalezi na tom, jak se k tomu postavi ktery prohlizec.
Misto body bych pouzil div.
udalost odeslani formulare se jmenuje submit. Formular se odesila tlacitkem input type=submit, button tlacitkem a input type=image https://www.jakpsatweb.cz/html/input.html . Event u tlacitka, onclick, se obvykle nezachytava. Jde to, ale je to neprakticke. Pri zachytavani submit udalosti je treba vratit true nebo false, jestli se ma formular odeslat. Podobne, u click je to js udalost form.submit(); Jenze, submit tlacitko formular odesle, tak by se mela stranka resetovat. si tam dej kdyztak

<form action="Pokus.html" method="POST" onsubmit="return false">

pro zajimavost, co to bude delat.

Jinak teda uplne nechapu, ceho chces s proc docilit? Po kliknuti na tlacitko se ma stat co presne?

Nahoru Odpovědět

5.9.2021 18:31

Kamil

Člen

Kamil:6.9.2021 18:12

inak teda uplne nechapu, ceho chces s proc docilit? Po kliknuti na tlacitko se ma stat co presne?

Ahoj,

chci docilit toho, abych dokazal manipulovat DOM na základě pracovního postupu (jak řešit testove chyby) Jenže v moměntě, když použiji document.write(), tak se mi css styly anuluji a budu mit bílou stránku.

PHP ani SQL nemohu použit, to IT u nas v práci zakazalo.

Nahoru Odpovědět

6.9.2021 18:12

Peter Mlich

Člen

Peter Mlich:6.9.2021 20:11

No, document.write bys pouzivat nemel. innerHTML. document.write, kdyz uz je stranka vygenerovana, muze delat naprosto psi kusy. To se da totiz pouzit jen pri generovani stranky, onload. a nebo pro vytvoreni obsahu noveho okna. Ja bych sel do toho submit. ale nevim, jak se to ted javascriptove vaze pres listenery Nicmene, vi to google.

        var form = document.forms[0];
form.onsubmit = function(){
var elSelect = form.getElementById('L10-FORM')
            if(elSelect.value=="Moznost1"){ // tohle take uplne nemusi fungovat, tady bych pouzil selectedIndex
                form.innerHTML+="Vybral jste si chybu možnost1";
            }
        });

Nahoru Odpovědět

6.9.2021 20:11

Kamil

Člen

Kamil:7.9.2021 11:32

Jak tedy můžu pomocí JS udělat nový DOM? Tak abych tím dokázal simulovat popis pracovního postupu. (účel)

Nahoru Odpovědět

7.9.2021 11:32

Peter Mlich

Člen

Peter Mlich:7.9.2021 14:13

Co znamena simulovat popis pracovniho postupu?
Co znamena udelat novy DOM?

DOM je Document Object Model, technicka prirucka popisujici, moznosti html jazyka a propojeni.
Proc bys ji delal novou?

Ja jen, ze je tezke ti porozumet. Zkusim jiny kod... Treba chces neco podobneho. (samozrejme se to da napsat lepe, proste jsem to je zplacal)
https://jsfiddle.net/u0Lrk1hb/

<div>OUT = <span id="xxx"></span></div>
<script>
var xxx = document.getElementById('xxx');
function textAdd(element) {
  xxx.innerHTML += element.innerHTML+'<br>';
}
function textReset(element) {
  xxx.innerHTML = '';
}
</script>
<hr>
<div onclick="textAdd(this)">Toto je text 1</div>
<div onclick="textAdd(this)">Toto je text 2</div>
<div onclick="textAdd(this)">Toto je text 3</div>
<div onclick="textReset()">Reset</div>

Nahoru Odpovědět

7.9.2021 14:13

Kamil

Člen

Kamil:7.9.2021 17:24

Ahoj,

jasně, objasním to.

popis pracovního postupu - na základě

<select name="formL10">
         <option value="moznost1">Možnost 1</option>
         <option value="moznost2">Možnost 2</option>
         <option value="moznost3">Možnost 3</option>
    </select>

Člověk od nas si vybere, co potřebuje za popis vyřešení daného problému a klikne třeba na možnost 1 a tam bude

jdi do adresare cd /usr/bin/pokus
spust program ./reflash.sh
smaz soubor pokus.tmp

atpd.

Nemůžu být konkrétní.

Rád bych k tomu využil PHP a databáze, ale naše IT mi odmítlo Apache nainstalovat. :-)
Proto bych to chtěl mít 1x HTML soubor a 1x js soubor, kde by v JS byl ten postup/postupy.

Nahoru Odpovědět

7.9.2021 17:24

Peter Mlich

Člen

Peter Mlich:8.9.2021 8:13

google = js show text by select onchange (jestli pouzivas select, tak ten vyuziva udalost onchange, onclick nemusi nektery prohlizec uznavat, protoze neni uveden v pravidlech w3c dokumentace)
https://www.codeproject.com/…ange-of-HTML

<script language="JavaScript">

var DivTxt = new Array()
DivTxt[0] = "Please Select Priority"
DivTxt[1] = "Priority Low: The selection is Low"
DivTxt[2] = "Priority Normal: The selection is Normal"
DivTxt[3] = "Priority High: The selection is High"
DivTxt[3] = "Priority Critical: The selection is Critical"

function getText(slction){
txtSelected = slction.selectedIndex;
document.getElementById('textDiv').innerHTML = DivTxt[txtSelected];
}
</script>


<Select class="body_text" name="critical" onchange="getText(this)">
<option value="Select"> Select </option>
   <option value="LOW"> Low </option>
   <option value="NORMAL"> Normal </option>
   <option value="HIGH"> High </option>
   <option value="CRITICAL"> Critical </option>
</select>
<div id="textDiv" style="color:Green; font-family:Calibri; font-size:small; font-weight:bold"> </div>

https://jsfiddle.net/m0h8bdx5/

Editováno 8.9.2021 8:15

Nahoru Odpovědět

8.9.2021 8:13

Peter Mlich

Člen

Peter Mlich:8.9.2021 8:17

Select.value take nemusi fungovat, protoze value maji tagu options. Ale, tusim to vsechny nove browsery uz umi.

Nahoru Odpovědět

8.9.2021 8:17

Peter Mlich

Člen

Peter Mlich:8.9.2021 8:35

A pouzil bych teda json pro naplneni daty, generovani toho selectu, divu. Neco jako...
google = js show text by select onchange json data
https://www.encodedna.com/…vascript.htm

<html>
<head>
    <title>Bind SELECT Dropdown with JSON using JavaScript</title>
</head>
<body>
    <p>
        <input type="button"
            onclick="populateSelect()"
                value="Click to Populate SELECT with JSON" />
    </p>

    <!--The SELECT element.-->
    <select id="sel" onchange="show(this)">
        <option value="">-- Select --</option>
    </select>

    <p id="msg"></p>
</body>

<script>
    function populateSelect() {
        // THE JSON ARRAY.
        var birds = [
            {"ID": "001", "Bird_Name": "Eurasian Collared-Dove"},
            {"ID": "002", "Bird_Name": "Bald Eagle"},
            {"ID": "003", "Bird_Name": "Cooper's Hawk"},
        ];

        var ele = document.getElementById('sel');
        for (var i = 0; i < birds.length; i++) {
            // POPULATE SELECT ELEMENT WITH JSON.
            ele.innerHTML = ele.innerHTML +
                '<option value="' + birds[i]['ID'] + '">' + birds[i]['Bird_Name'] + '</option>';
        }
    }

    function show(ele) {
        // GET THE SELECTED VALUE FROM <select> ELEMENT AND SHOW IT.
        var msg = document.getElementById('msg');
        msg.innerHTML = 'Selected Bird: <b>' + ele.options[ele.selectedIndex].text + '</b> </br>' +
            'ID: <b>' + ele.value + '</b>';
    }
</script>
</html>

Jenom bych teda pouzil jinou strukturu, neco jako

        var birds = {
            "001": {"ID": "001", "Bird_Name": "Eurasian Collared-Dove", description:"xyz"} // id duplicitne dat pred to jako string a zmenit zavorky [] na {}
        ];
for (i in birds) {...
option.value = birds[i]
option.text = birds[i]["Bird_Name"]
...}
// Tim padem se potom da pouzit pro vyhledani description option.value
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex
// https://stackoverflow.com/questions/6573597/html-javascript-dropdown-selectedindex
selectElem.addEventListener('change', function() {
var index = selectElem.selectedIndex;
var value = selectElem.options[index].value;
var desc = birds[i][value];
        var msg = document.getElementById('msg');
        msg.innerHTML = desc;

Nahoru Odpovědět

8.9.2021 8:35

Nejčastěji vyhledáváné

Diskuze: document.write - jak ziskat css styly