CODEWITHSUNDEEP
javascripthtmlfunctionsvg
Farah AlQ
Farah AlQ

Reputation: 15

Javascript function on svg drawing

I want to copy multiple small flower around a large one, so I created a radio buttons to allow users choose how many copies they want. Then I created a hidden copies of the small flowers with their locations, after that I tried to function the radio buttons but they didn't work as I thought.

</html>
<head>
<script>
function check(){
if(document.getElementById('one').checked){
        document.getElementById('FirstCo').style.strokeWidth='1';
        }
    if (document.getElementById('two').checked){
        document.getElementById('SecondCo').style.strokeWidth='1';
        }
    if (document.getElementById('Three').checked){
        document.getElementById('ThirdCo').style.strokeWidth='1';
    }
  if (document.getElementById('Four').checked){
        document.getElementById('FourthCo').style.strokeWidth='1';
}
}

</script>
</head>
<body>
<div>
 <input type="radio" name="copies" id="one" onlick="check()"value ="onecopy">One</br>

            <input type="radio" name="copies" id="two" onlick="check()" value ="twocopies">Two</br>

            <input type="radio" name="copies" id="Three" onlick="check()" value ="threecopies">Three</br>

            <input type="radio" name="copies" id="Four" onlick="check()" value ="fourcopies">Four</br>
</div>
</body>
<svg>
<g id = "FirstCo" style="fill:none;stroke:black;stroke-width:0">

    <circle cx="315" cy="60" r="5"/>

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(45 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(90 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(135 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(180 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(225 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(270 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(315 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(360 315 60)"/> 
</g>
<g id = "SecondCo" style="fill:none;stroke:black;stroke-width:0">

<circle cx="530" cy="300" r="5"/>

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(45 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(90 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(135 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(180 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(225 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(270 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(315 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(360 530 300)"/>
<g id = "ThirdCo" style="fill:none;stroke:black;stroke-width:0">

    <circle cx="310" cy="530" r="5"/>

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(45 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(90 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(135 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(180 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(225 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(270 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(315 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(360 310 530)"/> 
</g>

<g id = "FourthCo" style="fill:none;stroke:black;stroke-width:0">

<circle cx="100" cy="300" r="5"/>

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(45 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(90 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(135 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(180 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(225 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(270 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(315 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(360 100 300)"/>

 </g>
</svg>
</html>

Upvotes: 1

Views: 109

Answers (1)

Robert Longson
Robert Longson

Reputation: 124229

You may have interpreted touchscreen too literally, buttons are clicked rather than licked.

In addition the svg should be within the body and should have size attributes.

<html style="width:100%;height:100%;">
<head>
<script>
function check(){
if(document.getElementById('one').checked){
        document.getElementById('FirstCo').style.strokeWidth='1';
        }
    if (document.getElementById('two').checked){
        document.getElementById('SecondCo').style.strokeWidth='1';
        }
    if (document.getElementById('Three').checked){
        document.getElementById('ThirdCo').style.strokeWidth='1';
    }
  if (document.getElementById('Four').checked){
        document.getElementById('FourthCo').style.strokeWidth='1';
}
}

</script>
</head>
<body style="width:100%;height:100%;">
<div>
    <input type="radio" name="copies" id="one" onclick="check()" value ="onecopy">One<br />

    <input type="radio" name="copies" id="two" onclick="check()" value ="twocopies">Two<br />

    <input type="radio" name="copies" id="Three" onclick="check()" value ="threecopies">Three<br />

    <input type="radio" name="copies" id="Four" onclick="check()" value ="fourcopies">Four<br />
</div>

<svg width="100%" height="100%">
<g id = "FirstCo" style="fill:none;stroke:black;stroke-width:0">

    <circle cx="315" cy="60" r="5"/>

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(45 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(90 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(135 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(180 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(225 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(270 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(315 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(360 315 60)"/> 
</g>
<g id = "SecondCo" style="fill:none;stroke:black;stroke-width:1">

<circle cx="530" cy="300" r="5"/>

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(45 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(90 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(135 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(180 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(225 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(270 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(315 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(360 530 300)"/>
<g id = "ThirdCo" style="fill:none;stroke:black;stroke-width:0">

    <circle cx="310" cy="530" r="5"/>

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(45 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(90 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(135 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(180 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(225 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(270 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(315 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(360 310 530)"/> 
</g>

<g id = "FourthCo" style="fill:none;stroke:black;stroke-width:0">

<circle cx="100" cy="300" r="5"/>

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(45 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(90 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(135 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(180 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(225 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(270 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(315 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(360 100 300)"/>

 </g>
    </svg>
</body>
</html>

Upvotes: 1

Related Questions