Javascript 函数在页面加载后释放，而不是在单击后释放

我想玩一玩小兔子的农场。我的编程水平是初学者

为什么addRabbit（）代码在页面加载后开始工作？我在点击“买兔子”按钮后写下了它

为什么兔子不显示在“出售兔子”和“购买兔子”按钮附近的页面上

我知道我在这里有很多问题，因为我是一个初学者。我能请你提到其中的任何一个吗

//变量
//选择兔子的模式变量
const chooseModal=document.querySelector（“.chooseModal”）；
const-selectRabbitBtn=document.querySelector（“.choose-rabbitbtn”）；
const rabbitSelects=document.querySelectorAll（“输入[type=radio]”）；
让chosenRabbitUrl=“img/rabbit1.png”；
//启动屏幕
const startScreenDiv=document.querySelector（“.story model”）；
const rabbit=document.querySelector（“img.rabbit”）；
const buyrabitbtn=document.querySelector（“.buy btn”）；
//事件侦听器
选择RabbitBtn.addEventListener（“单击”，选择Arbbit）；
//功能
函数选择器A B位（e）{
e、 预防默认值（）；
为了（让兔子的兔子选择）{
如果（兔子，选中）{
chosenRabbitUrl=`img/${rabbit.id}.png`；
打破
}
}
选择模态.style.display=“无”；
startScreen（）；
}
函数startScreen（）{
startScreenDiv.style.display=“block”；
rabbit.src=chosenRabbitUrl；
}
类兔子游戏{
构造函数（）{
this.rabbitscont=parseInt（document.querySelector（“.rabbits count”）.innerText，10）；
this.rabbitscontspan=document.querySelector（“.rabbits count”）；
this.rabbitsShowDiv=document.querySelector（“.rabbits count show”）；
this.coinsCount=parseInt（document.querySelector（“.coins count”）.innerText，10）；
this.coinsontspan=document.querySelector（“.coins count”）；
this.sellRabbitBtn=document.querySelector（“.sell btn”）；
this.myRabbits=[{age:0，src:chosenRabbitUrl，width:50}]；
};
//函数，该函数在页面上显示所有者拥有的兔子
//成年兔子应该更大，小兔子应该更小
秀兔（）{
//rabbit.src=chosenRabbitUrl
this.myrabbts.forEach（（rabbit）=>{
this.rabbitsShowDiv.innerHTML+=`}）；
};
//增加一只兔子的功能，如果主人没有硬币，兔子会吃掉他
addRabbit（）{
console.log（“你好”）；
如果（this.coincont>1）{
//取出1枚硬币
this.coinsCount-=1
console.log（this.coinsCount）；
//少一枚硬币
this.coinsCountSpan.innerText=this.coinsCount
//为兔子年龄增加1
//如果兔子超过4岁，在屏幕上把它放大
this.myrabbts.forEach（（rabbit）=>{
兔年龄+=1；
如果（兔子年龄>3）{
兔子。宽度=70
}
})
//向阵列中再添加1只兔子
this.myRabbits.push（{age:0，src:chosenRabbitUrl，width:50}）；
//再给我看一只兔子
this.rabbitsShowDiv.innerHTML+=``
}
};
// функция, которая продает кролика, если он взрослый
// если нет взрослых кроликов, выводит предупреждение, что нет взрослых кроликов
}
const rabbitGame=新rabbitGame（）；
兔子游戏；
buyRabbitBtn.addEventListener（“单击”，rabbitGame.addRabbit（））
/*概述*/
* {
保证金：0；
填充：0；
框大小：边框框；
}
身体{
字体系列：无衬线；
}
h3{
背景色：rgb（108、165、55）；
宽度：400px；
高度：30px；
填充物：5px；
颜色：白色；
文本对齐：居中；
}
钮扣{
填充：5px20px；
背景色：rgb（194,89,89）；
颜色：白色；
文本转换：大写；
边界：无；
字体大小：粗体；
}
按钮：悬停{
背景色：rgb（172,79,84）；
}
/*一般性辩论结束*/
/*选择兔子模式和规则模式*/
.选择模态，
.规则{
显示器：flex；
证明内容：中心；
边缘顶部：20px；
}
。选择模态>div{
显示器：flex；
弯曲方向：立柱；
}
输入[type=“radio”]{
不透明度：0；
}
标签>图像：悬停{
边框底部：1px实心rgb（199199199199199199）；
}
保险商实验室{
列表样式：无；
利润率：10px；
}
李{
边缘底部：5px；
}
.按钮组{
显示器：flex；
证明内容：中心；
}
/*选择兔子模式和规则模式结束*/
/*启动屏幕*/
/*.故事模式{
显示：无；
} */
.故事模式{
背景图片：url（“img/neighbor.jpg”）；
背景尺寸：封面；
高度：100vh；
位置：相对位置；
}
兔{
位置：绝对位置；
身高：40%；
最高：60%；
左：50%；
溢出：隐藏；
}
.故事模式>h3{
位置：绝对位置；
左边距：自动；
右边距：自动；
左：0；
右：0；
最高：5%；
}
.img覆盖{
宽度：100%；
身高：100%；
背景：rgba（61,61,61,0.3）；
}
.故事模式>按钮{
位置：绝对位置；
左边距：自动；
右边距：自动；
左：0；
右：0；
最高：13%；
}
/*开始屏幕结束*/
/*主要游戏*/
.主要游戏{
显示器：flex；
}
/*主游戏结束*/

请选择兔子
选择
你漂亮的邻居给了你一只兔子
规则
游戏规则

买草喂兔子
出售成年兔子
买新的小兔子

玩
硬币10

匿名
兔子3

s
buyRabbitBtn.addEventListener("click", rabbitGame.addRabbit());

buyRabbitBtn.addEventListener("click", rabbitGame.addRabbit);