Diskuze: Vytvoření posluchače

Aktivity

Kamil

Člen

Kamil:19.4.2022 11:58

Ahoj,

po vytvoření posluchače se mi vytvoří událost pouze asi jen na klik a hned mi to zmízí, rád bych, aby to nemizelo.

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">
    <style>
        .krok1{
            width:600px;
            height:600px;
            background: red;
        }
    </style>
    <title>Document</title>
</head>
<body>

    <form action="index.html" method="POST">
        <select id="list-fail">
            <option value="chk_sensor">chk_sensor</option>
            <option value="localhost">localhost</option>
        </select>
        <input type="submit" value="odeslat" id="tlaciko-odeslat">
    </form>

    <script>
        let odeslat = document.getElementById('tlaciko-odeslat');

        odeslat.addEventListener('onclick', () => {
            let seznam = document.getElementById('list-fail').value;
                if (seznam == "chk_sensor"){
                    // vytvoreni section
                    const krok1 = document.createElement("section");
                    // přidání třídy
                    krok1.classList.add("krok1");
                    document.body.append(krok1);
                }
                else if (seznam == "localhost"){
                    alert ("Vybral jsi localhost");
                }
        });

    </script>
</body>
</html>

Chci docílit: Aby se mi po vybrani hodnoty ukázaly kroky, které definuji. Nyní se ukáží, ale po odkliknutí zmizí.

Odpovědět

19.4.2022 11:58

Kamil

Člen

Kamil:19.4.2022 12:04

oprava: místo onclick, tak tam mám mít click aby to udělalo, co jsem popisoval

Nahoru Odpovědět

19.4.2022 12:04

Peter Mlich

Člen

Peter Mlich:19.4.2022 15:15

Nejsem si uplne jisty, o co se pokousis. Ale, tu udalost mas navazanou na tlacitko, ktere formular odesila. Takze, bud mu zakaz dalsi udalosti nebo zablokuj formulari odeslani a nebo pouzij jine tlacitko, ktere formular neodesila, treba input type=button.
Dojde k tomu, ze se vykona ten js. Pak se formular odesle a stranka se znovu nacte cista. Pripadne tam neco doplni browser, pokud ma povolene nastaveni pamatovat si vyplnene policka formulare nebo nejake takove nastaveni.

Editováno 19.4.2022 15:16

Nahoru Odpovědět

19.4.2022 15:15

Peter Mlich

Člen

Peter Mlich:19.4.2022 15:19

google = How to prevent form from being submitted

html
................VVV
<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

script

function mySubmitFunction()
{
  someBug()
  return false; // <<<
}
----------
const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});

<form>
  <button type="submit">Submit</button>
</form>
----------------
<form onsubmit="alert('stop submit'); return false;" >
----------------
var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}

Editováno 19.4.2022 15:20

Nahoru Odpovědět

19.4.2022 15:19

Kamil

Člen

Kamil:19.4.2022 16:18

Chci mít rozhodujici strom, kde na základě hodnoty ze select se bude ukazovat návod jak něco řešit.

Nahoru Odpovědět

19.4.2022 16:18

Peter Mlich

Člen

Peter Mlich:19.4.2022 22:16

Tu funkci spoustej primo selectem?
https://www.jakpsatweb.cz/…_prejdi.html

<select onchange="location.href=this.options[this.selectedIndex].value">

Mimochodem, vsiml jsem si, ze tam mas vue, jedno tema. Co ho pouzit? Tam by tyhle veci meli jit jednoduseji nez beznym js kodem.
google = vue select show content
https://jsfiddle.net/ay2atz8y

<div id="app">
   <select v-model="selected">
       <option v-for="product in products" v-bind:value="{ id: product.id, text: product.name }">{{ product.name }}
       </option>
   </select>
   <h1>Value:
   {{selected.id}}
   </h1>
   <h1>Text:
   {{selected.text}}
   </h1>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
        selected: '',
    products: [
        {id: 1, name: 'A'},
      {id: 2, name: 'B'},
      {id: 3, name: 'C'}
    ]
  }
})
</script>
---
methods:{
    onChange: function(e){
        var id = e.target.value;
        var name = e.target.options[e.target.options.selectedIndex].text;
        console.log('id ',id );
        console.log('name ',name );
    },


 <select name="customerName" id="" v-on:change="onChangeSite($event)">
         <option value="1">Jan</option>
         <option value="2">Doe</option>
         <option value="3">Khan</option>
   </select>

Vubec, v tom forku je fura dalsich prikadu...
https://stackoverflow.com/…-using-vuejs

Editováno 19.4.2022 22:17

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

Nahoru Odpovědět

19.4.2022 22:16

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.