代码非常基础，因为我只是一个初学者。我不明白我该在我的职责范围内做什么来预制这个。不确定我是否需要使用一个循环来预处理这个问题，或者我可以只使用onclick和一个函数来传递参数吗？不确定是否需要该阵列？我想我必须有一个索引来参考函数，才能知道圆的形状要改为
<html lang="en">
<head>
<script>
function changeShape(){
array for the shapes
var shapes = new Array;
shapes["circle"] = "circle";
shapes["square"] = "square";
shapes["triangle"] = "triangle";
shapes["parall"] = "parall";
shapes["trap"] = "trap";
document.getElementById("shape1").className=="circle";
}
}
</script>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="shape1" class = "circle" onclick="changeShape('shape1')"></div>
<br>
<div id="shape2" class="square" onclick="changeShape('shape2')"></div>
<br>
<div id="shape3" class="oval" onclick="changeShape('shape3')"></div>
<br>
<div id="shape4" class="rectangle" onclick="changeShape('shape4')"></div>
<br>
<div id="shape5" class="triangle" onclick="changeShape('shape5')"></div>
<br>
<div id="shape6" class="parall" onclick="changeShape('shape6')"></div>
<br>
<div id="shape7" class="trap" onclick="changeShape('shape7')"></div>
<br>
</body>
<style>
*{
padding:0;
margin: 0;
box-sizing: border-box;
}
.circle{
width:200px;
height: 200px;
border-radius: 50%;
background: red;
}
.square{
width:200px;
height: 200px;
background: orange;
}
.oval{
padding: 5%;
width:300px;
height: 100px;
border-radius: 45%;
background: yellow;
}
.rectangle{
width:350px;
height: 150px;
background: green;
}
.triangle{
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #555;
}
.parall {
width: 100px;
height: 50px;
transform: skew(20deg);
background: #555;
}
.trap {
border-bottom: 50px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
}
</style>
</html>```
使用此changeShape函数：
function changeShape(shape){
var shapes={"shape1":"circle","shape2":"sqare","shape3":"oval","shape4":"rectangle","shape5":"triangle","shape6":"parall","shape7":"trap"};
var element=document.getElementById(shape);
if (element.className=="circle"){
element.className=shapes[shape];
}
else{
element.className="circle";
}
}