Javascript 将id值返回给另一个函数的脚本无效

我正在为一个玩具项目做一个数独游戏。我想做的是返回空格的id值，并将其放到另一个函数中。所以，当我点击这个数字时，我想让它变成空白，但它不起作用。你们能帮帮我吗？有什么问题吗

div{
光标：指针；
显示：内联块；
填充：10px；
}
1.
2.
3.
函数更改\u id（）{
var idname=event.target.getAttribute（'id'）；
返回idname；
}
函数put_值（）{
var get_num_id=event.target.getAttribute（'id'）；
var num=document.querySelector（“#”+get_num_id）；
document.querySelector（'#'+change_id（））.textContent=num.textContent；
};

如果我理解了你的观点，当用户点击填充/空白框时，我们设置其id，当用户点击空白/空白框时，我们用填充的

内部文本填充空白框

，并且我们取消设置这两个

id

变量以准备下一轮

let suId，numId；
函数更改\u id（）{
suId=event.target.getAttribute（'id'）；
填充（）；
}
函数put_值（）{
numId=event.target.getAttribute（'id'）；
填充（）；
};
函数fill（）{
如果（suId&&numId）{
document.getElementById（suId）.innerText=document.getElementById（numId）.innerText；
suId=null；
numId=null；
}
}

div{
光标：指针；
显示：内联块；
填充：10px；
边框：1px固体粉末蓝色
}

1.
2.
3

您缺少的是当函数被单击时，您必须从.html文件中传递一个JavaScript事件对象，并捕获函数参数上的事件。您可以使用以下代码：

<div class="item" id="su1" style="border: 1px solid powderblue;" onclick="change_id(e)"></div>
<div class="item" id="su2" style="border: 1px solid powderblue;" onclick="change_id(e)"></div>
<div class="item" id="su3" style="border: 1px solid powderblue;" onclick="change_id(e)"></div>

<div class="number" id='num1' style="border: 1px solid powderblue;" onclick="put_value(e)">1</div>
<div class="number" id='num2' style="border: 1px solid powderblue;" onclick="put_value(e)">2</div>
<div class="number" id='num3' style="border: 1px solid powderblue;" onclick="put_value(e)">3</div>

<script>

 var changedId = null; // we create a variable which stored the changed id value

 function change_id(event){
  changedId = event.target.getAttribute('id');
 }

 function put_value(event){
  var get_num_id = event.target.getAttribute('id');
  var num = document.querySelector('#'+get_num_id);
  document.querySelector(`#${changedId}`).textContent = num.textContent;
 };
</script>

1.
2.
3.
var changedId=null；//我们创建一个变量来存储更改的id值
功能更改\u id（事件）{
changedId=event.target.getAttribute（'id'）；
}
函数put_值（事件）{
var get_num_id=event.target.getAttribute（'id'）；
var num=document.querySelector（“#”+get_num_id）；
document.querySelector（`${changedId}`）.textContent=num.textContent；
};

我的解决方案

JS

HTML

1.
2.
3.

有几种方法可以更好地解决问题，据我所知，这将是您期望的解决方案

需要闭包来缓存函数值，并在需要时稍后返回

执行时表示相同的事件对象引用 put_值函数

div{
光标：指针；
显示：内联块；
填充：10px；
}
1.
2.
3.
函数更改\u id（）{
var idname=event.target.getAttribute（'id'）；
if（idname.indexOf（'su'）=-1）{
返回change_id['cache']；
}否则{
更改_id['cache']=idname；
}
}
函数put_值（）{
var get_num_id=event.target.getAttribute（'id'）；
var num=document.querySelector（“#”+get_num_id）；
var change\u id\u val=change\u id（）
如果（更改id值）{
document.querySelector（'#'+change_id_val）.textContent=num.textContent；
}
};

非常感谢！它现在可以工作了：））我不知道我应该使用“null”。介意我再问一个问题吗？为什么我不能使用return来获取id值呢？安装null您可以使用空字符串或任何东西来初始化变量，因为据我所知，像这样初始化变量不是一个好的做法

var changedId我们应该保留空字符串或初始值之类的内容。现在回答您的问题，当您调用函数
change\u id（event）
时，它需要一个实际的item元素，当您单击item元素时，您可以从JavaScript事件中获得该元素，因此，如果您单击item元素，它将全局存储上次单击的元素的id，当您单击number元素时，它将替换为它。非常感谢！！：）我能问一下在change\u id['cache']中['cache']是什么吗？或者我可以得到一个引用吗？好的，函数也是对象，所以我们可以像在对象中一样存储信息，但是它必须被访问，这些信息被分配在方括号中属性访问：对象['property']这里缓存是函数（change_id）对象中的属性，闭包就是这样工作的。这项技术被认为是一种备忘录。
let app = function() {
    this.cellSelected = false
  this.$btns = document.querySelector('.btns');
  this.$items = document.querySelector('.items');
  this.$items.querySelectorAll('.item').forEach(el => {
    el.addEventListener('click', (e) => {
      this.selectCell(e.currentTarget);
      this.checkSelected();
    });
  });
  

  this.$btns.querySelectorAll('.btn').forEach(el => {
    el.addEventListener('click', (e) => {
        if(this.cellSelected) {
        this.cellSelected.innerText = e.currentTarget.innerText
      }
    });
  });
}
app.prototype.checkSelected = function(el) {    
  this.$btns.querySelectorAll('.number').forEach(el => {
        if(this.cellSelected) {
        el.setAttribute('tabindex', 0);
      el.removeAttribute('aria-disabled');
    } else {
        el.setAttribute('tabindex', -1);
      el.setAttribute('aria-disabled', true);
    }
  });  
}
app.prototype.selectCell = function(el) {
    if(this.cellSelected) {
        this.cellSelected.setAttribute('tabindex', -1);
      this.cellSelected.classList.remove('selected');
      if(this.cellSelected == el) {
        this.cellSelected = false;
        return
      }
    }
        el.classList.add('selected');
    el.setAttribute('tabindex', 0);
    this.cellSelected = el;
}

new app;

  <div class="items">
    <div tabindex="-1" class="item"></div>
    <div tabindex="-1" class="item"></div>
    <div tabindex="-1" class="item"></div>
  </div>
  
  <div class="btns">
    <div role="button" tabindex="-1" class="number btn" aria-disabled="true">1</div>
    <div role="button" tabindex="-1" class="number btn" aria-disabled="true">2</div>
    <div role="button" tabindex="-1" class="number btn" aria-disabled="true">3</div> 
  </div>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    div {
      cursor: pointer;
      display: inline-block;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="item" id="su1" style="border: 1px solid powderblue;" onclick="change_id()"></div>
  <div class="item" id="su2" style="border: 1px solid powderblue;" onclick="change_id()"></div>
  <div class="item" id="su3" style="border: 1px solid powderblue;" onclick="change_id()"></div>

  <div class="number" id='num1' style="border: 1px solid powderblue;" onclick="put_value()">1</div>
  <div class="number" id='num2' style="border: 1px solid powderblue;" onclick="put_value()">2</div>
  <div class="number" id='num3' style="border: 1px solid powderblue;" onclick="put_value()">3</div>

  <script>
    function change_id() {
    var idname = event.target.getAttribute('id');
    if(idname.indexOf('su') == -1){
        return change_id['cache'];
    }else{
        change_id['cache'] = idname;
    }
    }

    function put_value() {
      var get_num_id = event.target.getAttribute('id');
      var num = document.querySelector('#' + get_num_id);
    var change_id_val = change_id()
    if(change_id_val ){
            document.querySelector('#' + change_id_val).textContent = num.textContent;
    }
    };
  </script>
</body>

</html>