Javascript 如何记录按钮的点击，并在计算器屏幕的输入框中显示其值？

所以我想做一个计算器，但我一直被难住了。我想让我的按钮点击记录，但进入我的计算器的顶部框，并使用一个事件监听器。我想使用函数（事件）在屏幕上显示按钮的值（操作次数），并使用event.target.dataset.num返回值，并将其存储为添加到屏幕值的新变量

我的代码现在很粗糙，只是需要一些指导

//3。
//改变操作颜色的颜色
//多色
const colorMultiply=document.getElementById（'multiply'）
colorMultiply.style.backgroundColor=“绿色”
//分色
const colorddivide=document.getElementById（'divide'）
colorddivide.style.backgroundColor=“红色”
//减色
const colorSubtract=document.getElementById（'subtract'）
colorSubtract.style.backgroundColor=“蓝色”
//添加颜色
const colorAdd=document.getElementById（'add'））
colorAdd.style.backgroundColor=“黄色”
//将数字的字体改为蓝色（我是这样做的，以防任何人想要一个数字的颜色）
//让它更容易
常量number1=document.getElementById（'number1'）
number1.style.color=“蓝色”
常量number2=document.getElementById（'number2'）
number2.style.color=“蓝色”
常量number3=document.getElementById（'number3'）
number3.style.color=“蓝色”
常量number4=document.getElementById（'number4'）
编号4.style.color=“蓝色”
常量number5=document.getElementById（'number5'）
number5.style.color=“蓝色”
常量number6=document.getElementById（'number6'）
编号6.style.color=“蓝色”
常量number7=document.getElementById（'number7'）
编号7.style.color=“蓝色”
常量number8=document.getElementById（'number8'）
编号8.style.color=“蓝色”
常量number9=document.getElementById（'number9'）
编号9.style.color=“蓝色”
常量number0=document.getElementById（'number0'）
number0.style.color=“蓝色”
常量decimal=document.getElementById（'decimal'）
decimal.style.color=“蓝色”
//更改“清除”按钮的颜色
const clear=document.getElementById（'clear'））
clear.style.color=“白色”
clear.style.backgroundColor=“黑色”
///////////////////////////////////////////////////////////////////////////////////////////////////////
//然后，我们要在“清除”按钮之前插入“memoryStoreButton”：
var memoryStoreButton=document.createElement（“按钮”）；
memoryStoreButton.innerHTML=“MS”；
清除.before（MemoryStore按钮）//在清除之前按下按钮
//然后我们要在memoryStoreButton之前加上memoryClearButton`
var memoryClearButton=document.createElement（“按钮”）；
memoryClearButton.innerHTML=“MC”；
memoryStoreButton.before（memoryClearButton）//在清除之前按下按钮
//最后，在memoryClearButton之前加上memoryRestoreButton`
var memoryRestoreButton=document.createElement（“按钮”）；
memoryRestoreButton.innerHTML=“MR”；
memoryClearButton.before（MemoryRestorButton）//在清除之前按下按钮
///////////////////////////////////////////////////////////////////////////////////////////////////////////
//我需要存储目标DOM元素、输入/输出的变量
//我需要添加一个事件侦听器，以便在单击所有按钮时从中检索数据。
const buttone=document.getElementById（'number1'）；
buttonOne.addEventListener（'click'，函数（）{
控制台日志（1）；
});
const buttonTwo=document.getElementById（'number2'）；
buttonTwo.addEventListener（'单击'，函数（））{
控制台日志（2）；
});
const buttonThree=document.getElementById（'number3'）；
addEventListener（'click'，function（）{
控制台日志（3）；
});
const buttonFour=document.getElementById（'number4'）；
buttonFour.addEventListener（'click'，函数（）{
控制台日志（4）；
});
const buttonfile=document.getElementById（'number5'）；
addEventListener（'click'，function（）{
控制台日志（5）；
});
const buttonSix=document.getElementById（'number6'）；
addEventListener（'click'，function（）{
控制台日志（6）；
});
const buttonSeven=document.getElementById（'number7'）；
按钮seven.addEventListener（'click'，function（）{
控制台日志（7）；
});
const buttonEight=document.getElementById（'number8'）；
addEventListener（'click'，function（）{
控制台日志（8）；
});
const buttonline=document.getElementById（'number9'）；
buttonline.addEventListener（'click'，function（）{
控制台日志（9）；
});
const buttonZero=document.getElementById（'number0'）；
buttonZero.addEventListener（'click'，函数（）{
控制台日志（0）；
});
const buttonDecimal=document.getElementById（'decimal'）；
buttonDecimal.addEventListener（'click'，function（）{
console.log（'.'）；
});
*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
最小高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.计算器{
弹性：0.40%；
}
.屏幕8{
宽度：100%；
字体大小：7rem；
填充：0.5雷姆；
背景：rgb（41,41,56）；
颜色：白色；
边界：无；
}
.按钮8{
显示器：flex；
柔性包装：包装；
过渡：所有0.5s线性；
}
钮扣{
弹性：0.25%；
边框：1px纯黑；
填充：0.250；
过渡：一切都很轻松；
}
.btn灰色{
背景：rgb（224）；
}
.btn8{
字号：4rem；
}

计算器8
计算器8
*
/
-
+
.
9
8.
7.
6.
5.
4.
3.
2.
1.
0
=
C
Pretty implemented design，我对你的帖子投赞成票。Pretty implemented design，我对你的帖子投反对票。