How can I add an onclick event with raphael.js to display different text in one container?

Question

I am trying to create an onclick event for the svg donutchart. Via default text1 should be displayed. By clicking another slice text1 should be swapped with the corresponding text. The text section should sit besides the piechart.

jsfiddle demo

slice6.click(function(setVisibility(id, visibility)){
    document.getElementById("text6").style.display = visibility;
});

Answer 1

Add the showText function to make it easier to show / hide a given text block.

Then change the click listeners to the following. You can't just pass any function to a click listener.

You can either pass an anonymous function like this:

e.click(function(e) {
  // I'm within an anonymous function
});

or you can create a function to pass to the click.

function onclick(e) {
    // I'm a named function
}

e.click(onclick);

Note: If you don't need the event information, the function doesn't need to take argument e .

function showText(t1, t2, t3, t4, t5, t6) {
    document.getElementById("text1").style.display = (t1) ? "block" : "none";
    document.getElementById("text2").style.display = (t2) ? "block" : "none";
    document.getElementById("text3").style.display = (t3) ? "block" : "none";
    document.getElementById("text4").style.display = (t4) ? "block" : "none";
    document.getElementById("text5").style.display = (t5) ? "block" : "none";
    document.getElementById("text6").style.display = (t6) ? "block" : "none";
}

slice1.click(function(e) {
    showText(true, false, false, false, false, false);
});

slice2.click(function(e) {
    showText(false, true, false, false, false, false);
});

slice3.click(function(e) {
    showText(false, false, true, false, false, false);
});

slice4.click(function(e) {
    showText(false, false, false, true, false, false);
});

slice5.click(function(e) {
    showText(false, false, false, false, true, false);
});

slice6.click(function(e) {
    showText(false, false, false, false, false, true);
});