Question

I’m starting fiddling with Raphael but I have a problem I can’t resolve:

for testing purposes I’m trying a simplified scenario:
add a circle at a given location, using two imput fields for x and y.

The circle will appear for a fraction of a second, then disappear. It happens in chrome and FF (not tried on others)

I have this 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>

and this js

 var paper;
window.onload = function () {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'
}).toFront();}

I’m sure it would be something easy and maybe stupid, but I cannot see it
Thanks in advance!

Answer 1

First of all. I recommend you not to use inline javascript, is better to define the event listeners on a different manner. In the next fiddle the method I used is not the better either. You could use target.addEventListener(type, listener[, useCapture]); for example you could go here to see how it works.

So, you could try like a starting point using this markup:

    <div id="canvas_container"></div>
    <lable>x</lable>
    <input id="cx" /><br/>
    <lable>y</lable>
    <input id="cy" /><br/>
    <button id="button">Populate</button>

And this JS:

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

You can see it working on this fiddle. And you are ready to go.