Demo of Adding or removing border from Image in JavaScript

Return to tutorial on adding border to image

Complete source

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Add or remove an image border with JavaScript</title>
</head>
<body>
  <img src="images/help.jpg" id="i1" alt="Help illustration">
  <br><br>
  <button type="button" id="add-border">Add Border</button>
  <button type="button" id="remove-border">Remove Border</button>

  <script>
    const image = document.getElementById('i1');
    const addButton = document.getElementById('add-border');
    const removeButton = document.getElementById('remove-border');

    addButton.addEventListener('click', () => {
      image.style.border = '3px solid currentColor';
    });

    removeButton.addEventListener('click', () => {
      image.style.border = '0';
    });
  </script>
</body>
</html>