Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Po kliknięciu wyświetla się wiadomość i po 2 sekundach znika

JS  Założony przez  Patryk Stefański.

28.04.2019, 17:15
#1
Witam !
Jestem słaby w js bo nigdy się nim nie interesowałem, ale teraz go potrzebuje.
Tak wygląda struktura
ROOT/pages/register.php


Chce, aby po kliknięciutego inputa(submit) wyświetliła się informacja w ROOT/index.php?p=home.php Bo tam prowadzi formularz

Ale też chce aby wiadomość pokazała się po ok 0,5sekundzie i na 2sekundy.
Probówałem to zrobić sam, ale coś mi kompletnie nie wychodzi.
I pokazują się błędy
register_btn_success.addEventListener("click", setTimeout(alertSuccess, 500), false); ->Uncaught TypeError: Failed to execute 'addEventListener' on 'EventTarget': The callback provided as paremetr 2 is not an object
alert_success.style.opacity = "1"; -> Uncaught TypeError: Cannot read property 'style' of null

Kod html
<div class="alert success" style="display: none">
         <strong>Success!</strong> Indicates a successful or positive action.
  </div>
I javascript

//Pobiera inputa
var register_btn_success = document.querySelector("#register_btn");
//Nasłuchuje klikniecia

register_btn_success.addEventListener("click", setTimeout(alertSuccess, 500), false);

//Nie pytać
function TimeOut(n, p) {
  setTimeout(p() {

  }, n)
}

//Funkcja chowająca alert'a
function alertSuccess() {
  var alert_success = document.querySelector(".alert");
  alert_success.style.opacity = "1";
  alert_success.style.display = "block";
  setTimeout(function() {
    alert_success.style.opacity = "0";
    setTimeout(function() {
      alert_success.style.display = "none";
    }, 2000);
  }, 2000);
}
Akcja "Dziękuję za pomoc"
Kasujesz link - nie licz na wsparcie
28.04.2019, 17:34 (Ten post był ostatnio modyfikowany: 28.04.2019, 17:34 przez b360.)
#2
Skoro formularz prowadzi na nową stronę, co powoduje odświeżenie page'a, to po co nasłuchujesz czy button został kliknięty?
Na nowej stronie pokaż komunikat taki jaki chcesz i po X czasu go ukryj.

$(document).ready(function () {
  setTimeout(function() {
    var $hiddenAlerts = $('.alert:hidden');
    $hiddenAlerts.show();
  }, 500);
  
  setTimeout(function() {
    var $visibleAlerts = $('.alert:visible');
    $visibleAlerts.hide();
  }, 2500);
});
28.04.2019, 17:41 (Ten post był ostatnio modyfikowany: 28.04.2019, 17:42 przez Patryk Stefański.)
#3
Mam błąd "SyntaxError: expected expression, got ')'" wps.js:10:2
kod
$(document).ready(function() {
    setTimeout(function() {
      var $hiddenAlerts = $('#alertSucces:hidden');
      $hiddenAlerts.show();
    }, 500);
    setTimeout(function() {
      var $visibleAlerts = $('#alertSucces:visible');
      $visibleAlerts.hide();
    }, 2500);
  )
}
Akcja "Dziękuję za pomoc"
Kasujesz link - nie licz na wsparcie
28.04.2019, 17:45
#4
Podałeś że masz taki HTML:
<div class="alert success" style="display: none">
To po co zamieniłeś tam na ID?

+ źle skopiowałeś mój kod.
28.04.2019, 17:46 (Ten post był ostatnio modyfikowany: 28.04.2019, 17:46 przez Poftorek.)
#5
(28.04.2019, 17:41)Patryk Stefański napisał(a): Mam błąd "SyntaxError: expected expression, got ')'" wps.js:10:2
kod
$(document).ready(function() {
    setTimeout(function() {
      var $hiddenAlerts = $('#alertSucces:hidden');
      $hiddenAlerts.show();
    }, 500);
    setTimeout(function() {
      var $visibleAlerts = $('#alertSucces:visible');
      $visibleAlerts.hide();
    }, 2500);
  )
}
Na końcu zamykasz nawias okrągły a za nim klamrowy, zamień je.
Poradnik - Jak zbadać element na stronie internetowej?  
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08
28.04.2019, 17:50
#6
Bo pewnie będę używał wielu alertów i dałem go na id
<div id="alertSucces" class="alert success" style="display: none">
Wybacz, faktycznie źle skopiowałem.
Ale jak teraz zrobić, aby kod wywołał się tylko po kliknięciu submita w register.php ?
Akcja "Dziękuję za pomoc"
Kasujesz link - nie licz na wsparcie
28.04.2019, 17:54
#7
(28.04.2019, 17:50)Patryk Stefański napisał(a): Bo pewnie będę używał wielu alertów i dałem go na id
To jak wielu, to nie [id] a [class] ;)

(28.04.2019, 17:50)Patryk Stefański napisał(a): Ale jak teraz zrobić, aby kod wywołał się tylko po kliknięciu submita w register.php ?
Do akcji ROOT/index.php?p=home.php dopisz kolejny parametr, np. register=1. Co w rezultacie da taki url:
ROOT/index.php?p=home.php&register=1
28.04.2019, 18:06
#8
Usunąłem "id"
i dodałem if, który sprawdza to co przesłano $_GET i działa
Akcja "Dziękuję za pomoc"
Kasujesz link - nie licz na wsparcie



Użytkownicy przeglądający ten wątek:

1 gości