practice

　　　　

<html>
<meta charset="utf-8">

<div>
<input type="radio"name="透明"value="0">0%
<input type="radio"name="透明"value="0.1">10%
<input type="radio"name="透明"value="0.2">20%
<input type="radio"name="透明"value="0.3">30%
<input type="radio"name="透明"value="0.4">40%
<input type="radio"name="透明"value="0.5">50%
<input type="radio"name="透明"value="0.6">60%
<input type="radio"name="透明"value="0.7">70%
<input type="radio"name="透明"value="0.8">80%
<input type="radio"name="透明"value="0.9">90%
<input type="radio"name="透明"value="1.0">100%
</div>
<p style="margin-left:164px;"><input type="button"value="ボタン"onclick="おぱしてぃ();"checked="true"></p>
<hr>
<div style="position:relative;left:92;top:10;width:200px;height:200px;border:solid 1px #888888;border-radius:50%;"></div>
<div id="目印"style="position:absolute;left:100;top:100;width:200px;height:200px;border:solid 1px black;border-radius:50%;background-color:black;"></div>

<script>
function おぱしてぃ()
{とうめいど=document.getElementsByName("透明");
let 表示;
for(愛=0;愛<とうめいど.length;愛++)
{if(とうめいど[愛].checked)
{表示=とうめいど[愛].value;
break;}}
document.getElementById("目印").style.opacity=parseFloat(表示);}
</script>

</html>