Function inside event listener won’t run

How do I get the function computerChoice() to run when I click on the strawberryButton which has an addEventListener? At the moment nothing happens when I click on strawberryButton

<div class="fruits"> 
    <div class="strawberry">
        <img class="strawberry-button" src="strawberry1.png" height=250px></div>
    <div class="orange">
        <img class="orange-button" src="orange.png" height=250px width=250px></div>
    <div class="pineapple">
        <img class="pineapple-button" src="pineapple.png" height=250px width=250px></div>
    <div class="pear">
        <img class="pear-button" src="pear.png" height=250px width=250px></div>
</div>

my JS

// Initialize everything to zero
let score = 0;
let rounds = 0;

const strawberryButton = document.querySelector(".strawberry-button");
const orangeButton = document.querySelector(".orange-button");
const pearButton = document.querySelector(".pear-button");
const pineappleButton = document.querySelector(".pineapple-button");
const score_div = document.querySelector(".score");
const userChoice_div = document.querySelector(".user-choice");
const computerChoice_div = document.querySelector(".computer-choice");

    function computerChoice(){
        const fruitSelection = ["orange", "strawberry", "pear", "pineapple"];
        const pickFruit = fruitSelection[Math.floor(Math.random() * 4)];
        return pickFruit;

    }

strawberryButton.addEventListener('click', computerChoice)