Przycisk pokaz/schowaj w js

pytanie zadane 12 listopada 2019 w JavaScript przez Squbany221 Użytkownik (640 p.)
edycja 28 listopada 2019 przez Squbany221

Witam mam do zrobienia przycisk który po kliknieciu pokaze tekst i zmieni nazwe przycisku na schowaj.Po kliknieciu

3 odpowiedzi

odpowiedź 13 listopada 2019 przez pseudoExpert Obywatel (1,300 p.)

Można to zrobić mocno prościej i inaczej ale skoro została stworzona funkcja PokazSchowaj, to jej nazwa sugeruje, że jedna funkcja zarówno pokazuje jak i chowa. Żeby było łatwo i czytelnie dodałem warunek i zduplikowałem kod.

<script>
  function PokazSchowaj() {
  
    if (document.getElementById("wiecej").hidden == true){
      document.getElementById("wiecej").hidden = false;
      var btn = document.getElementById("buttonMore");
      btn.innerHTML = "Schowaj";
      
    }
    else{
    
      document.getElementById("wiecej").hidden = true;
      var btn = document.getElementById("buttonMore");
      btn.innerHTML = "czytaj wiecej";
      
    }
  }
</script>

Oczywiście takie rozwiązanie jest bardzo dalekie od dobrych praktyk, zasad, itp ale jest chyba czytelne bo to głównie Twój kod.

pozdrawiam

komentarz 13 listopada 2019 przez danielb Bywalec (2,520 p.)

Hmm, w sumie dobre podejście.

komentarz 13 listopada 2019 przez Squbany221 Użytkownik (640 p.)

@pseudoExpert, Dzięki o takie cos mniej wiecej mi chodziło jestem dopiero początkujący.

odpowiedź 12 listopada 2019 przez mmarszik Mądrala (7,390 p.)

odpowiedź 12 listopada 2019 przez danielb Bywalec (2,520 p.)
edycja 12 listopada 2019 przez danielb

Jak ja kiedyś coś takiego robiłem, to zrobiłem to tak:

function menuoff() {
document.getElementById("sidebar").innerHTML = "<div id=\"showmenu\"> <div id=\"buttonhide\"><button id=\"buttonsidebar\" onClick=\"menuon()\"> Ukryj </button></div> <div class=\"showmenu\"> tresc menu </div> </div>";
}

function menuon() {
    document.getElementById("sidebar").innerHTML ="<button id=\"buttonsidebar\" onClick=\"menuoff()\"> MANU </button>";
}

A chodzi o to, aby tam gdzie masz, u siebie btn.innerHTML = "Schowaj"; dać diva z przyciskiem, możesz zauważyć w moim kodzie \ jest to, po to aby zneutralizować postawione za nim "".

a tu masz HTML:

	<div id="sidebar">
        	<button id="buttonsidebar" onClick="menuoff()"> MENU </button> 	
        </div>
    		<div class="mainmenu">
            	Test Tekstu w menu
            </div>