javascript - javascript将id值返回给另一个函数不起作用

标签 javascript html

我正在为一个玩具项目制作数独游戏。我想要做的是返回空白的 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>

最佳答案

您缺少的是在单击函数时必须从 .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>

关于javascript - javascript将id值返回给另一个函数不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63576013/

相关文章:

javascript - 使用 Quasar bex 将 Vue 组件注入(inject)网页

javascript - node.js 将相对路径字符串添加到数组会复制斜杠

javascript - 为什么 (23 == true) 为假而 (!!23 == true) 为真?毕竟有===可以精确比较

javascript - 无限滚动选择2组

css - 无法使用类型属性选择器在 IE7 中设置新的 HTML5 输入类型

javascript - bootstrap static 固定导航栏在滚动条上跳跃

html - 将我的内容拉伸(stretch)到页脚

javascript - 使用 jquery/javascript 动画 slider

javascript - 日期转换使用 javascript 将日期转换为之前的日期

javascript - 使用 javascript 编写 HTML 脚本时出现语法错误