重置JavaScript在onclick函数中添加的样式

我上周开始编写代码，所以我在这方面还是个新手。 我制作了一个3x3网格，我想用onclick函数在每个方向上扩展网格，我已经完成了。但我不知道如何添加重置按钮。我想要重置按钮将3x3网格设置回正常大小

谢谢你的帮助

功能skråv（客栈）{
inn.innerHTML='↖'；
}
功能skråvut（输出）{
out.innerHTML=''；
}
奥普功能酒店{
inn.innerHTML='↑'；
}
功能输出（输出）{
out.innerHTML=''；
}
斯克里什（客栈）功能酒店{
inn.innerHTML='↗'；
}
功能skråhut（输出）{
out.innerHTML=''；
}
文斯特功能酒店{
inn.innerHTML='←'；
}
功能venstreut（输出）{
out.innerHTML=''；
}
米德功能酒店{
inn.innerHTML='✕'；
}
函数midtut（输出）{
out.innerHTML=''；
}
赫伊尔功能酒店{
inn.innerHTML='→'；
}
høreut函数（输出）{
out.innerHTML=''；
}
斯克尔内德夫功能酒店{
inn.innerHTML='↙'；
}
功能skrånedvut（输出）{
out.innerHTML=''；
}
内德功能酒店{
inn.innerHTML='↓'；
}
功能nedut（输出）{
out.innerHTML=''；
}
斯克奈德功能酒店{
inn.innerHTML='和#8600'；
}
功能skrånedhut（输出）{
out.innerHTML=''；
}
函数klikright（）{
document.getElementById（“右”）.style.paddingRight=“100px”；
}
函数klikleft（）{
document.getElementById（“left”）.style.paddingLeft=“100px”；
}
函数klikkopp（）{
document.getElementById（“up”）.style.paddingTop=“100px”；
}
函数klikkned（）{
document.getElementById（“down”）.style.paddingBottom=“100px”；
}

#白色：悬停{
背景色：rgb（0，255，13）；
}
#蓝色：悬停{
背景色：rgb（14733240）；
}
鲁特内特{
宽度：150px；
高度：150像素；
填充：10px；
字体大小：70px；
边框：2件纯黑；
文本对齐：居中；
字体大小：粗体；
}
#蓝色的{
背景色：rgb（52164255）；
}
桌子
运输署{
边框：10px嵌入灰色；
右边距：自动；
左边距：自动；
}
#白色的{
背景色：白色；
}
h1{
文本对齐：居中；
字体大小：60px；
字号：；
}

3x3网格

您可以通过变量保留原始表。并插入原始版本以重置它

const table=document.querySelector（“.rutenet”）.innerHTML；
函数重置（）{
document.querySelector（“.rutenet”）.innerHTML=表格；
}
斯克里夫功能酒店{
inn.innerHTML='↖'；
}
功能skråvut（输出）{
out.innerHTML=''；
}
奥普功能酒店{
inn.innerHTML='↑'；
}
功能输出（输出）{
out.innerHTML=''；
}
斯克里什（客栈）功能酒店{
inn.innerHTML='↗'；
}
功能skråhut（输出）{
out.innerHTML=''；
}
文斯特功能酒店{
inn.innerHTML='←'；
}
功能venstreut（输出）{
out.innerHTML=''；
}
米德功能酒店{
inn.innerHTML='✕'；
}
函数midtut（输出）{
out.innerHTML=''；
}
赫伊尔功能酒店{
inn.innerHTML='→'；
}
høreut函数（输出）{
out.innerHTML=''；
}
斯克尔内德夫功能酒店{
inn.innerHTML='↙'；
}
功能skrånedvut（输出）{
out.innerHTML=''；
}
内德功能酒店{
inn.innerHTML='↓'；
}
功能nedut（输出）{
out.innerHTML=''；
}
斯克奈德功能酒店{
inn.innerHTML='和#8600'；
}
功能skrånedhut（输出）{
out.innerHTML=''；
}
函数klikright（）{
document.getElementById（“右”）.style.paddingRight=“100px”；
}
函数klikleft（）{
document.getElementById（“left”）.style.paddingLeft=“100px”；
}
函数klikkopp（）{
document.getElementById（“up”）.style.paddingTop=“100px”；
}
函数klikkned（）{
document.getElementById（“down”）.style.paddingBottom=“100px”；
}

#白色：悬停{
背景色：rgb（0，255，13）；
}
#蓝色：悬停{
背景色：rgb（14733240）；
}
鲁特内特{
宽度：150px；
高度：150像素；
填充：10px；
字体大小：70px；
边框：2件纯黑；
文本对齐：居中；
字体大小：粗体；
}
#蓝色的{
背景色：rgb（52164255）；
}
桌子
运输署{
边框：10px嵌入灰色；
右边距：自动；
左边距：自动；
}
#白色的{
背景色：白色；
}
h1{
文本对齐：居中；
字体大小：60px；
字号：；
}

3x3网格
重置

因为要在每一侧添加填充物，所以可以将其设置为0

功能skråv（客栈）{
inn.innerHTML='↖'；
}
功能skråvut（输出）{
out.innerHTML=''；
}
奥普功能酒店{
inn.innerHTML='↑'；
}
功能输出（输出）{
out.innerHTML=''；
}
斯克里什（客栈）功能酒店{
inn.innerHTML='↗'；
}
功能skråhut（输出）{
out.innerHTML=''；
}
文斯特功能酒店{
inn.innerHTML='←'；
}
功能venstreut（输出）{
out.innerHTML=''；
}
米德功能酒店{
inn.innerHTML='✕'；
}
函数midtut（输出）{
out.innerHTML=''；
}
赫伊尔功能酒店{
inn.innerHTML='→'；
}
høreut函数（输出）{
out.innerHTML=''；
}
斯克尔内德夫功能酒店{
inn.innerHTML='↙'；
}
功能skrånedvut（输出）{
out.innerHTML=''；
}
内德功能酒店{
inn.innerHTML='↓'；
}
功能nedut（输出）{
out.innerHTML=''；
}
斯克奈德功能酒店{
inn.innerHTML='和#8600'；
}
功能skrånedhut（输出）{
out.innerHTML=''；
}
函数重置（）{
document.getElementById（“向下”）.style.paddingBottom=“0px”；
document.getElementById（“右”）.style.paddingRight=“0px”；
document.getElementById（“左”）.style.paddingLeft=“0px”；
document.getElementById（“up”）.style.paddingTop=“0px”；
}
函数klikright（）{
document.getElementById（“右”）.style.paddingRight=“100px”；
}
函数klikleft（）{
document.getElementById（“left”）.style.paddingLeft=“100px”；
}
函数klikkopp（）{
document.getElementById（“up”）.style.paddingTop=“100p
function resetall(){

  // to get all td in table rutrnett
  var all = document.querySelectorAll(".rutenett td");

  // used a loop to set padding 10px initial state
  for(i=0;i<all.length;i++){

    //get all td item in a variable
    var alltd = all[i];

    //setting padding to 10px
    alltd.style.padding = "10px";

  }
}

const directions = document.querySelectorAll('.direction');

function resetGrid() {
  for (const direction of directions) {
    direction.style.padding = '0px'
  }
}

const reset = document.querySelector('#reset')

reset.addEventListener('click', resetGrid);

td.expandright { padding-right:100px;}
td.expandleft  { padding-left:100px;}
td.expandup    { padding-top:100px;}
td.expanddown  { padding-bottom:100px;}

function klikk(clickedsquare) {
  clickedsquare.classList.add("expand"+clickedsquare.id);
}

function reset(){
    var inputs = document.getElementsByTagName('td');
    for(var i = 0; i < inputs.length; i++) {        // go through each td
        inputs[i].classList.forEach(className => {  // check each class
           if (className.startsWith('expand'))      // if it starts with "expand"...
             inputs[i].classList.remove(className); //... remove it
        });
    }
}