Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/25.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 拉斐尔:图形元素消失_Javascript_Raphael - Fatal编程技术网

Javascript 拉斐尔:图形元素消失

Javascript 拉斐尔:图形元素消失,javascript,raphael,Javascript,Raphael,我开始摆弄拉斐尔,但我有一个无法解决的问题: 出于测试目的,我尝试了一个简化的场景: 使用x和y的两个输入字段,在给定位置添加一个圆 圆圈将出现几秒钟,然后消失。它发生在chrome和FF中(未在其他浏览器上试用) 我有这个html <div id="canvas_container"></div> x<input id="cx" /><br/> y<input id="cy" /><br/> <button oncl

我开始摆弄拉斐尔,但我有一个无法解决的问题:

出于测试目的,我尝试了一个简化的场景: 使用x和y的两个输入字段,在给定位置添加一个圆

圆圈将出现几秒钟,然后消失。它发生在chrome和FF中(未在其他浏览器上试用)

我有这个html

<div id="canvas_container"></div>
x<input id="cx" /><br/>
y<input id="cy" /><br/>
<button onclick="see(document.getElementById('cx').value,document.getElementById('cy').value)">Populate</button>
我相信这会是件容易的事,也许很愚蠢,但我看不出来
提前谢谢

首先。我建议您不要使用内联javascript,最好以不同的方式定义事件侦听器。在下一篇文章中,我使用的方法也不是更好的。您可以使用
target.addEventListener(type,listener[,useCapture])
因此,您可以尝试使用以下标记作为起点:

    <div id="canvas_container"></div>
    <lable>x</lable>
    <input id="cx" /><br/>
    <lable>y</lable>
    <input id="cy" /><br/>
    <button id="button">Populate</button>
你可以看到它在拉小提琴。你准备好出发了

    <div id="canvas_container"></div>
    <lable>x</lable>
    <input id="cx" /><br/>
    <lable>y</lable>
    <input id="cy" /><br/>
    <button id="button">Populate</button>
var paper;
paper = new Raphael(document.getElementById('canvas_container'), 1000, 1000)

function see(x, y) {
    alert("coords " + x + " " + y);
    var fino = paper.circle(x, y, 20).attr({
        stroke: 'none',
        fill: '#f60'
    })

}

var button = document.getElementById('button');

button.onclick = function(){
    var x = document.getElementById('cx').value;
    var y = document.getElementById('cy').value;
    see(x,y);
}