javascript - 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>
解决方案
如果我理解你的观点,当用户点击填充/空白框时,我们设置它的 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>
推荐阅读
- r - 使用 rhandsontable 插入值的问题
- macos - 我正在尝试从 MAC 上的 intellij IDE 远程调试托管在 Ubuntu 服务器上的 Spring MVC 应用程序
- spring - 当我在 applicationContext.xml 和 daoContext.xml 中添加配置信息时,Eclipse 得到以下 404 错误
- ubuntu-18.04 - openmeeting 中没有屏幕共享选项
- android - 如何在配置更改时恢复菜单状态
- javascript - Webpack 加载页面上的所有块
- javascript - Vue 可以计算或观察 body 的 scrollHeight 吗?
- c# - 谷歌支付实现 mvc 网络应用
- apache-spark - 类似火花配置的区别
- vue.js - 使用导入的自定义 SCSS 组件编译 Tailwind CSS