Function 内部事件监听器不会运行

Question

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)

Answer 1

The click handler is called. You can verify this by using a simple console output in the method:

function computerChoice(){
  console.log("click")
  // etc

I assume you want to process the value from the method, but you return it to nowhere.

You could define another variable below rounds , like this:

let pickedFruit = null

And then you assign the value in the click handler.

pickedFruit = fruitSelection[Math.floor(Math.random() * 4)];