Is it possible to set SVG object coordinates as a changing variable using JavaScript?

I'm creating svg using HTML and JavaSCript and I want to add some new svg objects into it based on onclick function. And I wonder if it is possible to set new SVG's coordinates as a changing variable. My idea goes like this:

HTML

<!DOCTYPE html>
<html>
    <body>
        <svg id="board" width="360" height="360">
            <rect x="10" y="10" width="100" height="100"/>
            <rect x="130" y="10" width="100" height="100"/>
            <rect x="250" y="10" width="100" height="100"/>

            <rect x="10" y="130" width="100" height="100"/>
            <rect x="130" y="130" width="100" height="100"/>
            <rect x="250" y="130" width="100" height="100"/>

            <rect x="10" y="250" width="100" height="100"/>
            <rect x="130" y="250" width="100" height="100"/>
            <rect x="250" y="250" width="100" height="100"/>
        </svg>
    </body>

JS

window.onclick = function(event){
    const CX = event.pageX;
    const CY = event.pageY;
    [...]
        
    drawImage();
}

[...]

function drawImage(){

    let coordX = CX/(360/3);         //360 is a size of the SVG object
    let coordY = CY/(360/3);

    function addCircle(){
        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circle.setAttribute("cx", coordX);
        circle.setAttribute("cy", coordY);
        circle.setAttribute("r", "45");
        circle.setAttribute("stroke", "blue");
        circle.setAttribute("stroke-width", "10");
        circle.setAttribute("fill", "#FCF8C4");

        document.getElementById("board").appendChild(circle);
    }
}

I want to visualize the newly drawed SVG based onclick at particular place. Is this even possible to do it this way?

Solution

Seems to work if you fix the errors in the script i.e.

you need to pass CX and CY to drawImage
you need to actually call addCircle
you can just use CX and CY directly

window.onclick = function(event){
                const CX = event.pageX;
                const CY = event.pageY;


        drawImage(CX, CY);
        }

function drawImage(CX, CY){

    let coordX = CX;
    let coordY = CY;

        function addCircle(){

            const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
            circle.setAttribute("cx", coordX);
            circle.setAttribute("cy", coordY);
            circle.setAttribute("r", "45");
            circle.setAttribute("stroke", "blue");
            circle.setAttribute("stroke-width", "10");
            circle.setAttribute("fill", "#FCF8C4");

            document.getElementById("board").appendChild(circle);
        }
        addCircle();
    }

<!DOCTYPE html>
<html>
    <body>
        <svg id="board" width="360" height="360">
            <rect x="10" y="10" width="100" height="100"/>
            <rect x="130" y="10" width="100" height="100"/>
            <rect x="250" y="10" width="100" height="100"/>

            <rect x="10" y="130" width="100" height="100"/>
            <rect x="130" y="130" width="100" height="100"/>
            <rect x="250" y="130" width="100" height="100"/>

            <rect x="10" y="250" width="100" height="100"/>
            <rect x="130" y="250" width="100" height="100"/>
            <rect x="250" y="250" width="100" height="100"/>
        </svg>
    </body>