按钮在第一次点击时没有反应答案

【问题标题】：Button does not react from the first click按钮在第一次点击时没有反应
【发布时间】：2023-03-19 19:28:01
【问题描述】：

大家好，

我的按钮有问题。我创建了画布函数，在单击按钮后根据坐标创建一个矩形。但是，当我打开 html 文件时，输入坐标并单击按钮，它在第一次单击时不起作用。我应该重新加载页面，然后按钮开始工作。你能告诉我，为什么我的按钮在第一次点击时不起作用？请在附件中找到我的代码。

let canvas = document.querySelector("#can")
let ctx = canvas.getContext("2d")
let rect1 = inp1.value
let rect2 = inp2.value
let arr1 = rect1.split("-")
let arr2 = rect2.split("-")
createcanvas.addEventListener("click" , ()=>{
    
        ctx.rect(arr1[0], arr1[1], arr1[2], arr1[3]);
        ctx.rect(arr2[0], arr2[1], arr2[2], arr2[3]);
        ctx.stroke();
})
connect.addEventListener("click" , ()=>{
    ctx.beginPath()
    ctx.moveTo(arr1[0],arr1[1])
    ctx.lineTo(arr2[0],arr2[0])
    ctx.stroke()
    ctx.closePath()

    ctx.beginPath()
    ctx.moveTo((+arr1[0])+(+arr1[2]),arr1[1])
    ctx.lineTo((+arr2[1])+(+arr2[2]),arr2[1])
    ctx.stroke()
    ctx.closePath()

    ctx.beginPath()
    ctx.moveTo(arr1[0], (+arr1[1])+(+arr1[2]))
    ctx.lineTo(arr2[0], (+arr2[1])+(+arr2[2]))
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    ctx.moveTo((+arr1[0])+(+arr1[2]),(+arr1[0])+(+arr1[2]))
    ctx.lineTo((+arr2[1])+(+arr2[2]),(+arr2[1])+(+arr2[2]))
    ctx.stroke()
    ctx.closePath()
    ctx.stroke()
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="inp1">
    <input type="text" name="" id="inp2">
    <button id="createcanvas">Create</button>
    <button id="connect">Connect</button>
    <canvas id="can" width="500px" height="500px" style="background-color: olive;display:block;"></canvas>
</body>
<script src="script.js"></script>

</html>

【问题讨论】：

标签： javascript html

【解决方案1】：

以下似乎现在可以工作：

let canvas = document.querySelector("#can");
let arr1,arr2,ctx = canvas.getContext("2d");
const getCoords=()=>[inp1.value.split("-").map(v=>+v),inp2.value.split("-").map(v=>+v)],
      drwline=(a,b,c,d)=>
         {ctx.beginPath();ctx.moveTo(a,b);ctx.lineTo(c,d);ctx.stroke();ctx.closePath();}

document.getElementById("createcanvas").addEventListener("click" , ()=>{
  let [arr1,arr2]=getCoords();
  ctx.rect(...arr1);
  ctx.rect(...arr2);
  ctx.stroke();
});
document.getElementById("connect").addEventListener("click" , ()=>{
  let [[a,b,c,d],[e,f,g,h]]=getCoords();
  drwline(a,b,e,f);
  drwline(a+c,b,e+g,f);
  drwline(a,b+d,e,f+h);
  drwline(a+c,b+d,e+g,f+h);
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="inp1" value="10-10-200-200">
    <input type="text" name="" id="inp2" value="20-20-230-230">
    <button id="createcanvas">Create</button>
    <button id="connect">Connect</button>
    <canvas id="can" width="500px" height="500px" style="background-color: #ccc;display:block;"></canvas>
</body>
<script src="script.js"></script>

</html>

说明：

我将输入读取部分移至您的 #createcanvas 和 #connect 按钮的事件处理函数中。为此，我创建了辅助函数getCoords()。这会收集输入值并将它们返回到两个数组中，然后这些数组对于各个函数都是本地的。

您应该始终使用document.getElementbyId() 或一些合适的document.querySelector() 函数来获取DOM 元素引用，否则对象可能会与全局命名空间中声明的变量发生冲突。

在后来的编辑中，我还缩短了您的一些绘图说明，遵循“DRY”（不要重复自己）范例：函数 drwline() 现在在两点之间画一条线。

【讨论】：

请参考sn-p下面的“说明”。
明白。谢谢！
@AramayisYeghiazaryan : 如果你愿意 answer response :) 快乐编码 :)
@Aramayis Yeghiazaryan，如果您的问题已经解决，请点赞并标记为正确答案。