如何使用 onclick 按钮使 rect 消失并重新出现答案

【问题标题】：How to make rect's disappear and re-appear using onclick buttons如何使用 onclick 按钮使 rect 消失并重新出现
【发布时间】：2019-07-18 19:46:27
【问题描述】：

我有一些矩形想要出现，然后使用 onclick 按钮消失。但是，矩形永远不会消失。

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

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

<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();
}

【问题讨论】：

标签： javascript html raphael

【解决方案1】：

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

一种解决方案是添加

let r1, r2, r3;

在所有功能之上，然后在go1内更改

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

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

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

【讨论】：