Question

谢谢你，提前给予我任何帮助。我最初在画布上开始这个项目，我现在正在使用SVG。

我点击两个点后试图让隐形线可见。正如你可能猜到我在这方面的任何帮助都会非常感激

    <DOCTYPE html>
<html>
<head>
<title> BlackMoon_5</title>

<style> 
    body {background-color: #00FFFF}
    line {stroke: blue;visibility: hidden;}

</style>
</head>
<body>


<svg width="1000" height= "1000"> <!--does svg need and end tag?-->

<circle id="circle0"cx="50" cy="50" r="5" onClick="dotClick(0)">
</circle> <!-- Upper Dot code From html5.dk-->

<line id="line0"x1="50" y1="50" x2="50" y2="100"> </line>

<circle id="circle1"cx="50" cy="100" r="5" onClick="dotClick(1)"> </circle> <!-- Lower dot -->

</svg>
</body>

<script>
function onClick() {
    document.getElementById("line0").style.visibility="visibile";

}
</script>

</html>

Answer 1

你的js中有几个错误。首先，您应该调用dotClick您的事件处理程序，而不是onClick。此外，您必须找到一种方法来显示单击两个圆圈时的线条。我用过一个物体。我也在改变点击圈的颜色（仅用于测试目的，如果你愿意，你可以摆脱它）。要使其可见，您可以使用stroke的setAttribute：

var buttons = {};

function dotClick(width) {

    (width === 0) ? buttons.one = !buttons.one : buttons.two = !buttons.two;

    document.getElementById("line0").setAttribute("stroke", (buttons.one && buttons.two) ? "red" : "");
    document.getElementById("circle0").setAttribute("fill", (buttons.one ? "red" : "black"));    
    document.getElementById("circle1").setAttribute("fill", (buttons.two ? "red" : "black"));
}

您可以在此fiddle

中查看

Answer 2

你有一堆拼写错误，还有一些错误的逻辑。

    <doctype html>
    <html>
    <head>
        <title> BlackMoon_5</title>

        <style>
            body {
                background-color: #00FFFF;
            }

            line {
                stroke: blue;
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <svg width="1000" height="1000">
            <!--does svg need and end tag?-->
            <circle id="circle0" cx="50" cy="50" r="5" onclick="dotClick(1);">
            </circle> <!-- Upper Dot code From html5.dk-->
            <line id="line0" x1="50" y1="50" x2="50" y2="100"> </line>
            <circle id="circle1" cx="50" cy="100" r="5" onclick="dotClick(2)"> </circle> <!-- Lower dot -->
        </svg>
    </body>

    <script>
    var clicked_1 = false;
    var clicked_2 = false;

    function dotClick(dot) {

        if(dot === 1){
            clicked_1 = true;
        }
        if(dot === 2){
            clicked_2 = true;
        }

        if(clicked_1 && clicked_2){
            document.getElementById("line0").style.visibility="visible";
        }
    }
    </script>

</html>

我无法点击圆圈以使线条可见

2 个答案: