exercice 2

Correction exo 2

by gol ngaz²

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<input id="bouton1" type='button' value='bouton1'>
<input id="bouton2" type='button' value='bouton2'>
<input id="bouton3" type='button' value='bouton3'>
<input id="bouton4" type='button' value='bouton4'>
<input id="bouton5" type='button' value='bouton5'>
<br>


<div>

</div>

CSS

div{
  diplay:block;
  background-color:blue;
  height:10px;
  width:400px;
}

JavaScript

taille= 10;

$("input#bouton1").click(function(){
  taille += 10;
  if (taille > 100 ){
  	taille = 10;
  }
  $("div").css('height', taille+'px');
});


$('input#bouton2').click(function(){
	$("div").css("background-color", "green");
});

$('input#bouton3').click(function(){
	$("div").css("background-color", "blue");
});

$('input#bouton4').click(function(){
	$("div").css("display", "none");
});

$('input#bouton5').click(function(){
	$("div").css("display", "block");
});