How to correctly target by class name?

I am trying to practice some things on JS, I want to toggle a number of divs on click to change their color but I can't seem to target correctly the first one. It was fine when I did it by tag name but by class it doesnt seem to work. What am I doing wrong? Thanks!

EDIT. This is what my code looks like after your corrections.

<body>
    <div class="container">

        <div class="one">

        </div>
        <div class="two">

        </div>
        <div class="three">

        </div>
        <div class="four">

        </div>

    </div>

    <script src="script.js"></script>
</body>

let boxOne = document.getElementsByClassName("one")[0]

boxOne.onclick = function() {
    alert("Clicked!")
}

Solution

I'm going to add that its better to assign an id and use getElementById if the selector is only used by one element.

let boxOne = document.getElementById("one");
let allBoxes = document.getElementsByClassName("square");

boxOne.onclick = function() {
  alert("Clicked via ID");
}
const arr = [1, 2, 3];
arr.forEach(i => {
  allBoxes[i].onclick = function() {
    alert("Clicked via Class");
  }
})

.square {
  width: 100px;
  height: 100px;
  background: blue;
  margin: 20px;
  font-size: 50px;
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

<body>
  <div class="container">

    <div class="square" id="one">
      1
    </div>
    <div class="square" id="two">
      2
    </div>
    <div class="square" id="three">
      3
    </div>
    <div class="square" id="four">
      4
    </div>

  </div>


</body>