javascript - 如何使用onclick按钮使rect消失并重新出现

我有一些想要通过onclick按钮出现然后消失的矩形。但是，直肠永远不会消失。

我对它进行了编码，以便在按下某个按钮时，某些变量将.hide()或.show()

我的逻辑是在go1()中定义了所有变量，以便在播放go2()时，计算机已经知道r1.remove()所指的内容，因此将其隐藏，反之亦然。显然不是这样。

<button id="d" style="width:5em;height:3em;" onclick="go1">click me</button>
        <button id="b" style="width:5em;height:2em;" onclick="go2">click me</button>
        <button id = "a" style="width:5em;height:3em;" onclick="go3">click me2</button>

var p = Raphael(0, 0, 800, 800);

function go1() {
    let r1 = p.rect(300, 300, 50, 50)
        .attr({
            'fill': 'red',
            'cursor': 'pointer',
            'href': 'https://www.google.com/',
        });
    let r2 = p.rect(377, 300, 50, 50)
        .attr({
            'fill': 'blue',
            'cursor': 'pointer',
            'href': 'https://www.google.com/',
        });
    p.path("M362 162 L588 559");
    //p.path("M10 30L60 30L10 80L60 80z");

    let r3 = p.rect(477, 400, 50, 50)
        .attr({
            'fill': 'yellow',
            'cursor': 'pointer',
            'href': 'https://www.google.com/',
        });
};

function go2() {
    r1.show();
    r2.hide();
    r3.hide();
}

function go3() {
    r1.hide();
    r2.show();
    r3.show();
}

最佳答案

似乎您在r1中定义了r2，r3和go1，因此在go2和go3中未定义它们。

一种解决方案是添加

let r1, r2, r3;

首先是所有功能，然后在go1内进行更改

let r1 =到r1 =，并对其他两个r变量执行相同的操作。

另外，我认为您需要将onclick="go1"更改为onclick="go1()"，并对其他两个单击处理程序执行相同的操作。



我强烈建议您修复缩进。好的缩进使这样的问题更容易发现。如果发现难以正确缩进代码，请尝试使用https://beautifier.io/。