Image resizing using Javascript

Question

I am trying to make an image enlarge itself if a user clicks on it and retain its original size once the cursor is away from it, but the image is not responding, it's an 800 pixel image.

behaviour.js:

document.addEventListener("DOMContentLoaded", function(event) {
    alert('Hello!');
});

document.getElementById("smart_thumbnail");

var thumbnailElement = document.getElementById("smart_thumbnail");

thumbnailElement.addEventListener("click", function() {
    alert('I saw you click');
});

var thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.className ="small";

if (thumbnailElement.className == "") {
    // write here the code that will execute if the image is big
}

index.html:

 <p>An 800 pixel image</p>
        <img id="smart_thumbnail"  src="http://calmground.com/wp-content/galler\
y/our-calm-ground/calm.jpg" class="small"  >

@kinglish, I believe the img.small is a CSS code right, though I didn't copy your code, but I followed everything, seems something is breaking somewhere in my file because it's not running.

Index.html:

<p>An 800 pixel image</p>
                <img id='smart_thumbnail'  src='http://download.baps.org/wallpapers/14.bmp' class='small'  >

behavior.js I edited:

*document.addEventListener("DOMContentLoaded", function(event) {
   //  alert('Hello!');
});

document.getElementById("smart_thumbnail");

var thumbnailElement = document.getElementById("smart_thumbnail");

thumbnailElement.addEventListener("click", function({
    var theElement = event.target;
    // to toggle class names
    if (theElement.classList.contains('small')) {

        theElement.classList.remove('small');
        theElement.classList.add('large');
    }else {
        theElement.classList.remove('large');
        theElement.classList.add('small');
    }

});

styles.css:

img.small {
    width: 50px;
}

img.large {
    width: 200px;
}

Answer 1

Here's how to resize the image onClick and resize it again when out of hover:

var enableHover = false;
document.addEventListener("DOMContentLoaded", function(event) {
    alert('Hello!');
});

document.getElementById("smart_thumbnail");

var thumbnailElement = document.getElementById("smart_thumbnail");

thumbnailElement.addEventListener("click", function() {
    this.classList.toggle('small');
    document.getElementById("label").innerHTML = "An 800 pixel image";
    enableHover = true;
});

thumbnailElement.addEventListener("mouseleave", function() {
  if (enableHover) {
    this.classList.toggle('small');
    document.getElementById("label").innerHTML = "A 100 pixel image";
    enableHover = false;
  }
})

.small {
  height: 100px;
}

<p id="label">A 100 pixel image</p>
<img id="smart_thumbnail"  src="https://placekitten.com/400/800" class="small">

<style>
  .small {
    height: 100px;
  }
</style>

<p id="label">A 100 pixel image</p>
<img id="smart_thumbnail" src="https://placekitten.com/400/800" class="small">

<script>
  var enableHover = false;
  document.addEventListener("DOMContentLoaded", function(event) {
    alert('Hello!');
  });

  document.getElementById("smart_thumbnail");

  var thumbnailElement = document.getElementById("smart_thumbnail");

  thumbnailElement.addEventListener("click", function() {
    this.classList.toggle('small');
    document.getElementById("label").innerHTML = "An 800 pixel image";
    enableHover = true;
  });

  thumbnailElement.addEventListener("mouseleave", function() {
    if (enableHover) {
      this.classList.toggle('small');
      document.getElementById("label").innerHTML = "A 100 pixel image";
      enableHover = false;
    }
  })
</script>