Javascript 无法读取属性'；拆下'；未定义错误的定义

这是关于我之前问的关于使用Javascript的石头、布、剪刀游戏的问题。我有3个单独的图像描绘岩石，布和剪刀在我的HTML和一个开始按钮。当我单击开始按钮时，

start.addEventListener

将启动，并将用户和计算机点设置为0。我有3个独立的函数-

rockFunc（）

当用户单击岩石图像时，

paperFunc（）

当用户单击纸张图像时，以及

scissorFunc（）

当用户单击剪刀图像时。每个函数都有一组条件。在每个if-else-if语句的块中，都调用了显示用户和计算机点的

finalDisplay（）

函数。它还应显示从列表中随机生成的计算机选择（

choiceList

）。这里的问题是，每当我尝试运行命令

choiceDisplay.remove（）

时，我都会收到一个错误，该命令表示

choiceDisplay

变量未定义。我在下面附上了Javascript和HTML代码

const rock=document.getElementById（'rock'）；
const scissor=document.getElementById（'scissor'）；
const paper=document.getElementById（'paper'）；
const start=document.getElementById（'start'））
const main=document.getElementById（'main-container'）；
var用户点、计算机点；
变量firstDisplay，选择显示；//firstDisplay可显示用户和计算机的点。
//选择显示以显示计算机选择的内容
var choiceList=['rock'、'paper'、'scissor']//计算机从中获得随机选择的选择列表
风险价值选择；
//当用户单击开始按钮时
start.addEventListener（'click'，function（）{
userPoints=0；
计算机点数=0；
firstDisplay=document.createElement（'div'）；
const text=document.createTextNode（`Computer:${computerPoints}用户：${userPoints}`）；
firstDisplay.classList.add（'displayinitial'）；
firstDisplay.appendChild（文本）；
main.appendChild（firstDisplay）；
})
//功能用于显示用户和计算机的点，并显示计算机的选择
函数最终显示（用户点、计算机点、计算机选择）{
firstDisplay=document.createElement（'div'）；
const text=document.createTextNode（`Computer:${computerPoints}用户：${userPoints}`）；
firstDisplay.classList.add（'displayinitial'）；
firstDisplay.appendChild（文本）；
main.appendChild（firstDisplay）；
choiceDisplay=document.createElement（'div'）；
const displayChoice=document.createTextNode（`Computer Choice${computerChoice}`）；
选择display.classList.add（'finaldisplay'）；
choiceDisplay.appendChild（displayChoice）；
main.appendChild（精选显示）；
//firstDisplay.remove（）；
}
//如果用户点击岩石
函数rockFunc（）{
computerChoice=choiceList[Math.floor（Math.random（）*choiceList.length）]；
如果（摇滚乐和电脑选择=='scissor'）{
userPoints=userPoints+1；
firstDisplay.remove（）；
选择display.remove（）；
最终显示（用户点、计算机点、计算机选择）；
}否则如果（岩石和计算机选择=='纸张'）{
计算机点数=计算机点数+1；
firstDisplay.remove（）；
选择display.remove（）；
最终显示（用户点、计算机点、计算机选择）；
}否则{
警惕（“再次播放”）；
firstDisplay.remove（）；
//选择display.remove（）；
//最终显示（用户点、计算机点、计算机选择）；
}
}
//当用户点击纸张时
函数paperFunc（）{
computerChoice=choiceList[Math.floor（Math.random（）*choiceList.length）]；
如果（纸张和计算机选择=='rock'）{
userPoints=userPoints+1；
firstDisplay.remove（）；
选择display.remove（）；
最终显示（用户点、计算机点、计算机选择）；
}else if（纸张和计算机选择=='scissor'）{
计算机点数=计算机点数+1；
firstDisplay.remove（）；
选择display.remove（）；
最终显示（用户点、计算机点、计算机选择）；
}否则{
警惕（“再次播放”）；
firstDisplay.remove（）；
//选择display.remove（）；
//最终显示（用户点、计算机点、计算机选择）；
}
}
//当用户点击剪刀
函数剪刀func（）{
computerChoice=choiceList[Math.floor（Math.random（）*choiceList.length）]；
如果（剪刀和计算机选择==‘纸张’）{
userPoints=userPoints+1；
firstDisplay.remove（）；
选择display.remove（）；
最终显示（用户点、计算机点、计算机选择）；
}else if（剪刀和计算机选择=='rock'）{
计算机点数=计算机点数+1；
firstDisplay.remove（）；
选择display.remove（）；
最终显示（用户点、计算机点、计算机选择）；
}否则{
警惕（“再次播放”）；
firstDisplay.remove（）；
//选择display.remove（）；
//最终显示（用户点、计算机点、计算机选择）；
}
}
rock.addEventListener（'click'，function（）{
rockFunc（）；
})
scissor.addEventListener（'click'，function（）{
剪刀函数（）；
})
paper.addEventListener（'click'，function（）{
paperFunc（）；
})

石头、布、剪刀
石头，布，剪刀游戏！
开始

错误是因为在调用

finalDisplay（）

之前，您选择了显示.remove（），但该函数是分配

选择显示的地方

但与其添加和删除DIV，不如在HTML中静态创建它，并更新其内容


const rock=document.getElementById（'rock'）；
const scissor=document.getElementById（'scissor'）；
const paper=document.getElementById（'paper'）；
const start=document.getElementById（'start'））
const main=document.getElementById（'main-container'）；
const choiceDisplay=document.getElementById（'choice-display'）；
const firstDisplay=document.getElementById（'first-display'