Cambiare parola al click del mouse

**siteo** · 23-02-2016, 14.46.24

Ciao,
vorrei che ad ogni click del mouse viene cambiata la parola all'interno del tag button. Il tag button parte con la parola show e, al click, diventa hide e poi, al click, ridiventi show.
Sono riuscito a cambiare da show a hide ma non riesco a cambiare da hide a show. Posto il codice:

Codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $(".flip01").click(function() {
          $(".panel01").slideToggle("slow");
        });
      });

      function flip_01() {
        var el = document.getElementById("flip_01");
        var show = "Show";
        var hide = "Hide";

        if (el != show) {
          el.innerHTML = hide;
        }
        else if (el == show) {
          el.innerHTML = hide;
        }
        else if (el != hide) {
          el.innerHTML = show;
        }
        else if (el == hide) {
          el.innerHTML = show;
        }
        else
          el.innerHTML = "errore";
      }
    </script>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td>
            <button class="flip01" id="flip_01" name="flip_01" onclick="flip_01()">Show</button>
          </td>
        </tr>
        <tr>
          <td>
            <div class="panel01" style="display: none;">
	      Testo
	    </div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Grazie per l'aiuto

26-02-2016, 02.26.28

Ciao potresti fare tutto con Jquery due righe di codice...

Codice HTML:

	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td>
            <button class="flip01" id="flip_01" value="" name="flip_01" onclick=""> </button>
          </td>
        </tr>
        <tr>
          <td>
            <div class="panel01" style="display: none;">
	      Testo
	    </div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
<script>

		$("#flip_01" ).html('Show');
		
		var clicked= false;
		
	    $("#flip_01").click(function() {
		   $(this).html(clicked ? 'Show' : 'Hide');   	
		   clicked = !clicked;
		});
</script>

Discussione: Cambiare parola al click del mouse

LinkBack

Strumenti discussione

Display

Cambiare parola al click del mouse

Regole di scrittura