Форум

lawer85 · #1 (**permalink**) 09.01.2015, 23:19

Есть код

Код:

<html>
 <head>
  <title>Magic Hat</title>
	<script src="jquery-1.9.0.js"></script>
	<script language="JavaScript">
    function showRabbit() 
	{
      var hatImage = $("#topHat");
	  hatImage.attr("src", "rabbit-hat.gif");
	  var button = $("#hocusPocus");
	  button.attr("value", "Get back in that hat!");
	  button.on('click', hideRabbit);
    }
	
	function hideRabbit() 
	{
		var hatImage = $("#topHat");
		hatImage.attr("src", "tophat.gif");
		var button = $("#hocusPocus");
		button.attr("value", "Hocus Pocus!");
		button.on('click', showRabbit);
	}
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat"/>
    <br /><br />
    <input type="button" value="Hocus Pocus!" id="hocusPocus" onClick="showRabbit();"/>
   </p>
  </form>   
 </body>
</html>

По этому коду при нажатии на кнопку должна меняться и картинка и надпись на кнопке.

При первом запуске страницы при нажатии на кнопку запускается функция showRabbit, меняет картинку и текст кнопки.

Далее снова жмем и запускается функция hideRabbit, меняет картинку и текст кнопки.

И снова жмем кнопку уже ничего не происходит, хотя должна вызываться функция showRabbit. Консоль не выводит ошибку.

Octane · #2 (**permalink**) 09.01.2015, 23:29

Метод "on" не меняет значение атрибута onClick, его действие похоже на addEventListener

lawer85 · #3 (**permalink**) 09.01.2015, 23:31

т.е. выходит надо удалить текущее значение и установить новое?

lawer85 · #4 (**permalink**) 10.01.2015, 00:43

Все сделал как надо!

function showRabbit() 
	{
      var hatImage = $("#topHat");
	  hatImage.attr("src", "rabbit-hat.gif");
	  var button = $("#hocusPocus");
	  button.attr("value", "Get back in that hat!");
	  button.off("click", showRabbit);
	  button.on("click", hideRabbit);
    }
	
	function hideRabbit() 
	{
		var hatImage = $("#topHat");
		hatImage.attr("src", "tophat.gif");
		var button = $("#hocusPocus");
		button.attr("value", "Hocus Pocus!");
		button.off("click", hideRabbit);
		button.on("click", showRabbit);
	}

рони · #5 (**permalink**) 11.01.2015, 12:42

lawer85,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   img{
     height: 200px
   }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var button = $("#hocusPocus"), img = $("#topHat")[0], n = 1;
       button.click(function() {
         n ^= 1;
         button[0].value = n ? "Hocus Pocus!" : "Get back in that hat!";
         img.src = n ? "http://www.maxi-gif.com/gif-anime/objets/objets-magies-00003.gif" : "http://img.saraivaconteudo.com.br/Clipart/Photo/138/34521_.jpg";
      });
});


  </script>
</head>

<body>   <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="http://www.maxi-gif.com/gif-anime/objets/objets-magies-00003.gif" id="topHat"/>
    <br /><br />
    <input type="button" value="Hocus Pocus!" id="hocusPocus" />
   </p>
  </form>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript