I have code (some kind of clicker game) that should show you next button (image) after reaching some score (in this example 10) and this button (image) gives you more points then previous one etc. My problem is that I cant make my second button (image) to appear.

```js
var score_count = 0
var pic1 = document.getElementsByClassName('btn1');
var pic2 = document.getElementsByClassName('btn2');

function addToScore(amount) {
  score_count = score_count + amount;
  document.getElementById('score_count').innerHTML = score_count;

}

if (score_count >= 10) {
  pic2.style.visibility = 'visible';
}
```

```css
.score {
  font-size: 40px;
}

.btns:active {
  transform: scale(0.98);
  box-shadow: 3px 2px 22px 1px rgb(0, 0, 0, 0.24);
}

.btn2 {
  visibility: hidden;
}
```

```html
<script src="script.js" type="text/javascript"></script>

<p class="score">Score: <span id="score_count">0</span></p>

<input id="pic1" class="btn btns" type="Image" name="Image1" src="imgs/pic1.jpg" height="256px" width="256px" onclick="addToScore(1)">

<input id="pic2" class="btn2 btns" type="Image" name="Image2" src="imgs/pic2.jpg" height="256px" width="256px" onclick="addToScore(5)">
```