'Using onclick to change 6 circles into different shapes and back to a circle once clicked again

Code is very basic as I'm only a beginner. Can't understand what I'm to do within my function to preform this.Not sure if I need to use a loop to preform this or can I can do this with just the onclick and a function to pass the parameter to? Not sure if the array is needed or not? Thought I'd have to have some sort of an index to refer to for the function to know which shape the circle is to change to

<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>```

javascript

Solution 1:^[1]

Use this changeShape function instead:

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";
}
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	HelpfulHelper

'Using onclick to change 6 circles into different shapes and back to a circle once clicked again

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]