• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zmiana onclicka po kliknięciu button, async await?

VPS Starter Arubacloud
0 głosów
606 wizyt
pytanie zadane 5 marca 2019 w JavaScript przez PROFF Obywatel (1,180 p.)

Cześć, próbuję zrobić button, który po onclicku wywołuje funkcję zmieniającą instancję, value buttona i  inny parametr onclicka.

Instancja zmienia się normalnie, value przycisku również, jednak problem jest ze zmianą onclicka. Nie wyrzuca błędu w konsoli, onclick również chyba się nie zmienia, nie widać tego podglądając konsolę. Wydaje mi się, że brakuje mi async await.

Czyli reasumując, potrzebuję pomocy, aby po kliknięciu przycisku np po 2sekundach zmienił się jego onclick z test(1) na test(4).

 


 function test(x){

    if(x==1){
    var typed = new Typed('.tekst', {
        strings: ["", " tekst drugi "],
        typeSpeed: 30
       
      });
      document.getElementById('lewaopcja').value = 'test4';
       document.getElementById('lewaopcja').onclick = test(4);
    
  }

if(x==4){
    var typed = new Typed('.tekst', {
        strings: ["", "tekst PIATY"],
        typeSpeed: 30
       
      });
  }

}


<input type="button" id="lewaopcja" value="test" onclick=test(1)>

 

4 odpowiedzi

+1 głos
odpowiedź 9 marca 2019 przez k.wichura Pasjonat (19,870 p.)
wybrane 9 marca 2019 przez PROFF
 
Najlepsza
const button = document.querySelector('#lewaopcja');
button.addEventListener('click', test);

let value = 1;

function test() {
  if(value === 1) {
    console.log('action for 1')
    value = 4
  } else if(value ===4) {
    console.log('action for 4')
    value = 1;
  }
}

<input type="button" id="lewaopcja" value="test">

 

komentarz 9 marca 2019 przez PROFF Obywatel (1,180 p.)
Dziękuję za pomoc, wszystko już działa jak należy!
+2 głosów
odpowiedź 5 marca 2019 przez Tomek Sochacki Ekspert (227,510 p.)

A dlaczego chcesz tak kombinować? Rozwiązań jest kilka, na szybko można podać dwa, takie zupełnie najprostsze:

  1. tworzysz sobie jakąś zmienną trzymającą wartość parametru, a w funkcji na onclick po prostu sprawdzasz ten parametr i go odpowiednio modyfikujesz, np. możesz go inkrementować co będziesz traktował jako kolejne wywołania funkcji.
  2. możesz dodać sobie jakiś atrybut dla tego buttona, np. data-custom-value = 1 i w funkcji wywoływanej na onclick możesz ten atrybut pobrać i zinkrementować.

Ja bym jednak obstawał raczej za rozwiązaniem pierwszym, aby to JS i tylko JS wiedział co i jak ma robić na onclick, html to nie powinno interesować.

komentarz 5 marca 2019 przez PROFF Obywatel (1,180 p.)
var typed = new Typed('.tekst', {
    strings: ["", "Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym."],
    typeSpeed: 0.1
   
  });




 function test(x){

    if(x==1){
    var typed = new Typed('.tekst', {
        strings: ["", " tekst x1 "],
        typeSpeed: 30
       
      });
      x=2;
      document.getElementById('lewaopcja').value = 'test'+x;
      
    
  }

   if(x==2){
    var typed = new Typed('.tekst', {
        strings: ["", "tekst x2"],
        typeSpeed: 30
       
      });

      x=3;
      document.getElementById('lewaopcja').value = 'test'+3;
  }

  if(x==3){
    var typed = new Typed('.tekst', {
        strings: ["", "tekst x3"],
        typeSpeed: 30
       
      });


  }
}
   <input type="button" id="lewaopcja" value="test" onclick=test(1)>

 

Po woli się uczę, zrozumiałem to tak. 

Jednak ten onclick zmienia się w zasadzie losowo a nie po kolei.

Jak kliknę to chcę, żeby wczytał test(2), po kolejnym kliku test(3) a tutaj dzieje się to losowo i po pierwszym kliknięciu zostaje value=test3

0 głosów
odpowiedź 9 marca 2019 przez PROFF Obywatel (1,180 p.)

W zasadzie to jeszcze będę potrzebował pomocy.

Finalnie chcę mieć 3 buttony, jak to sprawnie zrobić by nie powtarzać tej samej funkcji trzy razy tylko zawrzeć wszystko w jednej?

Przedstawię swój zamysł.

Trzy guziki. Jedna historyjka. Klikam jeden z guzików, obojętnie który. Wtedy, powiedzmy, że roboczo zmienia się value wszystkich trzech buttonów na 2. Mowa o value zarówno z htmla (idę w lewo na idę w lewo2, idę prosto na idę prosto2, idę w prawo na idę w prawo2) i zmiennej z js. Jak zobaczycie zaraz w kodzie, każdy button na osobną instancję, która zmienia .tekst kontynuując historyjkę. Tak więc klikam raz obojętnie który guzik, zmieniają się value wszystkich 3 buttonów, po kolejnym kliknięciu znów każdy się zmienia. Kod dla lepszego zrozumienia:


var typed = new Typed('.tekst', {
    strings: ["", "Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym."],
    typeSpeed: 0.1
   
  });



  const button = document.querySelector('#btn1');
  button.addEventListener('click', test);

   
  let value = 1;
   
  function test() {
    if(value === 1) {
      console.log('action for 1')
      value = 2
      var typed = new Typed('.tekst', {
        strings: ["", " tekst po kliknieciu raz "],
        typeSpeed: 30
       
      });
      document.getElementById('btn1').value = 'Idę w lewo'+value;

    } else if(value ===2) {
      console.log('action for 2')
      value = 3;
      var typed = new Typed('.tekst', {
        strings: ["", " tekst po kliknieciu drugi raz "],
        typeSpeed: 30
       
      });
      document.getElementById('btn1').value = 'Idę w lewo'+value;
    }

    else if(value ===3) {
      console.log('action for 3')
      value = 4;
      var typed = new Typed('.tekst', {
        strings: ["", " tekst po kliknieciu trzeci raz "],
        typeSpeed: 30
       
      });
      document.getElementById('btn1').value = 'Idę w lewo'+value;
  }

  }
   <input type="button" id="btn1" class="btn" value="Idę w lewo">
            <input type="button" id="btn2" class="btn" value="Idę prosto">
            <input type="button" id="btn3" class="btn" value="Idę w prawo"> 

 

0 głosów
odpowiedź 10 marca 2019 przez PROFF Obywatel (1,180 p.)
podbijam post

Podobne pytania

0 głosów
1 odpowiedź 84 wizyt
pytanie zadane 24 grudnia 2022 w JavaScript przez rafaeru Początkujący (330 p.)
0 głosów
2 odpowiedzi 1,060 wizyt
pytanie zadane 5 lutego 2020 w C# przez kubekszklany Gaduła (3,170 p.)
0 głosów
1 odpowiedź 158 wizyt
pytanie zadane 18 listopada 2019 w JavaScript przez Krzysztofson Użytkownik (620 p.)

92,452 zapytań

141,261 odpowiedzi

319,074 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...