jQuery addClass example

Change class name on click in jQuery

by Shane Chambers

HTML

<input id="website-url" type="text"/>
<button id="grab-image-button" class="button">
Get Image
</button>

<div id="image-container">

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#image-container{
  width:100%;
  margin:auto;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#player-table{
  color:white;
  background-color:lightgray;
  outline:white;
  
}

#player-table tr, #player-table th{
  background-color: black;
  
}

JavaScript

// find elements
  var $urlInput = $("#website-url");
  var $imageContainer = $("#image-container");
  
	// handle click event
  $("button").on("click", function(){
  		var url = $urlInput.val();
      if(url.length !== 0){      
  			$.get(url, function(data, status){
        	var $img = $("img", $(data)).get(0);
          if($img.length !==0){
          	$imageContainer.html(''); // clear container
            $imageContainer.append($img);            
          }
          else{
          	alert('no images found at '+ url);
          }
        });
      }
      else{
      	alert('There is no url in the input');
      }
  });