首页 > 解决方案 > javascript将id值返回到另一个函数不起作用

问题描述

我正在为一个玩具项目制作数独。我想做的是返回空白的 id 值并将其放入另一个函数。因此,当我单击数字时,我希望将其放入空白中,但它不起作用。你们能帮我看看有什么问题吗?

<!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');
      return idname;
    }

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

</html>

标签: javascripthtml

解决方案


如果我理解你的观点,当用户点击填充/空白框时,我们设置它的 ID,当用户点击空白/填充框时,我们用填充填充空白框,innerText并且我们取消设置两个id变量以准备下一轮;

let suId, numId;

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

function put_value() {
    numId = event.target.getAttribute('id');
    fill();
};

function fill() {
  if (suId && numId) {
    document.getElementById(suId).innerText = document.getElementById(numId).innerText;
    suId = null;
    numId = null;
  }
}
div {
  cursor:pointer;
  display: inline-block;
  padding: 10px;
  border: 1px solid powderblue
}
<div class="item" id="su1" onclick="change_id()"></div>
<div class="item" id="su2" onclick="change_id()"></div>
<div class="item" id="su3" onclick="change_id()"></div>

<div class="number" id='num1' onclick="put_value()">1</div>
<div class="number" id='num2' onclick="put_value()">2</div>
<div class="number" id='num3' onclick="put_value()">3</div>


推荐阅读