Zmiana onclicka po kliknięciu button, async await?

Question

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)>

 

Answer 1

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">

 

Comments

Dziękuję za pomoc, wszystko już działa jak należy!

Answer 2

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ć.

Comments

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

Answer 3

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"> 

 

Answer 4

podbijam post