Jak wykonać button z możliwością naciśnięcia i wyświetlenia drugiego tekstu

pytanie zadane 20 października 2019 w HTML i CSS przez Kubs Mądrala (5,190 p.)

Witajcie,

czy ten kod jest poprawny? Chcę w przycisku zawrzeć tekst ON i po naciśnięciu OFF.

<div class="container">
  <button </button>
  <span class="trigger">ON</span>
  <span class="info d-none">OFF</span>
 </div>

1 odpowiedź

odpowiedź 20 października 2019 przez DawidK Nałogowiec (37,910 p.)

W html możesz umieścić tylko przycisk i w javascript zmieniać tekst na przeciwny tzn z 'on' na 'off '.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Button on off</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <button id='button'>ON</button>

    <script src='main.js'></script>
</body>
</html>

main.js

const button = document.querySelector('#button');

button.addEventListener('click', changeText);

function changeText() {
    button.innerHTML = button.innerHTML == 'ON' ? 'OFF' : 'ON';
}

zmienna1 == zmienna2 ? wartość : wartość to skrócona postać if(zmienna1==zmienna2)...else

komentarz 20 października 2019 przez Kubs Mądrala (5,190 p.)

Dziękuję. Uruchomiłem ale nie zmienia mi się z ON na OFF. Mam tylko ON.

komentarz 20 października 2019 przez DawidK Nałogowiec (37,910 p.)

dziwne, u mnie działa - co Ci się wyświetla w konsoli?

komentarz 20 października 2019 przez Kubs Mądrala (5,190 p.)

Uff, działa. Wybacz, uruchomiłem na stronie gdzie testuje kody i nie chodziło. Gdy uruchomiłem w VSC wszystko gra.

Dopytam jeszcze odnośnie kodu JS. Użycie:

$('.trigger').click(function(){
$('.trigger').addClass('d-none');
$('.info').removeClass('d-none');
});

jest równoznaczne z twoim rozwiązaniem w JS czy różni się czymkolwiek?

komentarz 20 października 2019 przez Kubs Mądrala (5,190 p.)

Zapomniałem dodać, że docelowo ma być to przycisk wysyłający tekst (formularz) na serwer oraz ma działać tylko raz.

To pewnie zmieni sytuację.

komentarz 20 października 2019 przez DawidK Nałogowiec (37,910 p.)

kod, który napisałeś wykorzystuje bibliotekę jquery, po kliknięciu na element o id 'trigger' dodaje do niego klasę css 'd-none' i usuwa klasę 'd-none' z elementu o id 'info'. Nie wiem co w nich jest, ale obstawiałbym 'display:none' (czyli niewyświetlanie)

komentarz 20 października 2019 przez DawidK Nałogowiec (37,910 p.)

Jeżeli ma zadziałać tylko raz możesz zmodyfikować funkcję żeby tylko zmieniła tekst na ' off ' i zablokowała przycisk.

function changeText() {
    button.innerHTML = 'OFF';
    button.disabled = true;
}

komentarz 20 października 2019 przez ScriptyChris Mędrzec (190,190 p.)

Jeżeli ma zadziałać tylko raz możesz zmodyfikować funkcję żeby tylko zmieniła tekst na ' off ' i zablokowała przycisk.

Albo do addEventListener przekazać, jako drugi parametr, obiekt { once: true }.

W przypadku jQuery'owego click( .. ) można wewnątrz callbacka odpiąć się od zdarzenia wywołując off( .. ).

Podobne pytania

0 głosów

1 odpowiedź 123 wizyt

Button w popover (bootstrap, albo i bez)

pytanie zadane 30 września 2020 w HTML i CSS przez Dzango111 Użytkownik (660 p.)

0 głosów

0 odpowiedzi 177 wizyt

Send Button Facebook i zamoistne dodanie treści wiadomości

pytanie zadane 10 października 2017 w JavaScript przez Vorex444 Dyskutant (9,610 p.)

0 głosów

1 odpowiedź 912 wizyt

Jak zrobić link do Przycisku Facebook ? Button

pytanie zadane 29 czerwca 2017 w HTML i CSS przez Adrian86452 Użytkownik (690 p.)

Jak wykonać button z możliwością naciśnięcia i wyświetlenia drugiego tekstu

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci