Demo of Image align in JavaScript

JavaScript

const image = document.getElementById('i1');
const leftButton = document.getElementById('align-left');
const rightButton = document.getElementById('align-right');

function moveImage(side) {
  image.style.float = side;
}

leftButton.addEventListener('click', () => moveImage('left'));
rightButton.addEventListener('click', () => moveImage('right'));

HTML

<img src="images/help.jpg" id="i1" alt="Help illustration">
<button type="button" id="align-left">Left</button>
<button type="button" id="align-right">Right</button>

Complete source

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo of image alignment with JavaScript</title>
</head>
<body>
  <img src="images/help.jpg" id="i1" alt="Help illustration">
  <br><br><br><br>
  <button type="button" id="align-left">Left</button>
  <button type="button" id="align-right">Right</button>

  <script>
    const image = document.getElementById('i1');
    const leftButton = document.getElementById('align-left');
    const rightButton = document.getElementById('align-right');

    function moveImage(side) {
      image.style.float = side;
    }

    leftButton.addEventListener('click', () => moveImage('left'));
    rightButton.addEventListener('click', () => moveImage('right'));
  </script>
</body>
</html>