Display next button after clicking on multiple images

var button = document.querySelectorAll('.obj');

    for (var a = 0; a < button.length; a++) {   

    button[a].addEventListener('click',function()
    {
    document.getElementById("n").style.display="inline";
    alert("Click on NEXT Button to move at position B");
    });
}

Below is HTML code

<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>
<body >

    <div id="main_ob_plot">
    <div><marquee direction="left"><img id="birds" src="images\birds.gif"></marquee></div>
    <a href="2.html"><img id="result" src="images\result.PNG" ></a>
    <img id="r" src="images\reset.PNG" onclick="Reset()">
    <img id="n" src="images\next.PNG" onclick="next()">
        <a href="index.html"><img id="h" src="images\home.PNG"></a>

    <div>
    <div id="flag_div"><span id="flag-obj">Object 1 (Flag)</span>
    <span><img id="flag" src="images\flag.PNG" onclick="flag()" class="obj"></span></div>
    <div id="pole_div"><span id="pole-obj">Object 2 (Pole)</span>
    <span><img id="pole" src="images\pole.PNG" onclick="pole()" class="obj"></span></div>
    <div id="house_div"><span id="house-obj">Object 3 (House)</span>
    <span><img id="house" src="images\house.PNG" onclick="house()" class="obj"></span></div>
   <div id="wind_div"><span id="wind-obj">Object 4 (Wind Mill)</span>
    <span> <img id="wind" src="images\wind.gif"  onclick="wind()" class="obj"></span></div>
     <div id="tree_div"><span id="tree-obj">Object 5 (Tree)</span>
     <img id="crow" src="images\crow.gif">
    <span> <img id="tree" src="images\tree.PNG" onclick="tree()" class="obj"></span></div>
    <img id="sc1_img" class="sc1_img" src="images\sc1.jpg" onclick="flag()">
    <img id="sc2_img"  src="images\sc2.jpg" onclick="pole()">
    <img id="sc3_img" src="images\sc3.jpg" onclick="house()">
    <img id="sc4_img" src="images\sc4.jpg" onclick="wind()">
    <img id="sc5_img" src="images\sc5.jpg" onclick="tree()">
    </div>

<div id="sheet">
<img id="lineobja1img" src="images\l1_black.PNG" alt="linea1">
<img id="lineobja2img" src="images\l2_black.PNG" alt="linea2">
<img id="lineobja3img" src="images\l3_black.PNG" alt="linea3">
<img id="lineobja4img" src="images\l4_black.PNG" alt="linea4">
<img id="lineobja5img" src="images\l5_black.PNG" alt="linea5">
<img id="lineobjb1img" src="images\l1_blackb.PNG" alt="lineb1">
<img id="lineobjb2img" src="images\l2_blackb.PNG" alt="lineb2">
<img id="lineobjb3img" src="images\l3_blackb.PNG" alt="lineb3">
<img id="lineobjb4img" src="images\l4_blackb.PNG" alt="lineb4">
<img id="lineobjb5img" src="images\l5_blackb.PNG" alt="lineb5">
<img id="refa" src="images\refa.PNG" alt="ref point a">
<img id="refdot1" src="images\refdot1.PNG" alt="ref dot1">
<img id="refdot2" src="images\refdot2.PNG" alt="ref dot2">
<img id="refb" src="images\refb.PNG" alt="ref point b">

<img id="drawobjimg" src="images\drawobj.PNG" class="draw" alt="draw">
</div>

<div id="adilade_view"><center><img id="alidade_img" src="images\alidade.PNG"></center></div>
<img id="stand_img" src="images\stand.PNG">
<img id="tripodimg" src="images\tri.PNG" alt="tri">
<div id="sheet2">
    <img id="lineobja1img2" src="images\l1_black2.PNG" alt="linea1">
    <img id="lineobja2img2" src="images\l2_black2.PNG" alt="linea2">
    <img id="lineobja3img2" src="images\l3_black2.PNG" alt="linea3">
    <img id="lineobja4img2" src="images\l4_black2.PNG" alt="linea4">
    <img id="lineobja5img2" src="images\l5_black2.PNG" alt="linea5">
    <img id="lineobjb1img2" src="images\l1_blackb2.PNG" alt="lineb1">
    <img id="lineobjb2img2" src="images\l2_blackb2.PNG" alt="lineb2">
    <img id="lineobjb3img2" src="images\l3_blackb2.PNG" alt="lineb3">
    <img id="lineobjb4img2" src="images\l4_blackb2.PNG" alt="lineb4">
    <img id="lineobjb5img2" src="images\l5_blackb2.PNG" alt="lineb5">
    <img id="refa2" src="images\refa2.PNG" alt="ref point a">
    <img id="refdot12" src="images\refdot12.PNG" alt="ref dot1">
    <img id="refdot22" src="images\refdot22.PNG" alt="ref dot2">
    <img id="refb2" src="images\refb2.PNG" alt="ref point b">
    
    <img id="drawobjimg2" src="images\drawobj2.PNG" class="draw" alt="draw">
    </div>
  
<img id="tripodimg2" src="images\tri2.PNG" alt="tri">
</div>
 
<script src="js/main.js"></script>
<script src="js/main2.js"></script>
</body>
</html>

Below is my CSS code

* {
    margin: 0px;
    padding: 0;
}
/*header section template styling*/

#header {
    border-bottom: 8px solid #ff6600;
    font-family: 'Raleway', sans-serif;
    width: 1890px;
    top: 0;
    min-width: 500px;
    background-color: #fff!important;
}

#header img {
    padding: 8px 8px 4px 32px;
}

h2 {
    font-size: large;
}
#steps{
    margin-top: 20px;
    font-size: 30px;
}
ol{
    margin-left: 50px;
   font-size: 20px;

}
#labName {
    float: right;
    font-size: 25px;
    align-items: center;
    margin-top: 30px;
    margin-right: 40px;
    color: #2C99CE;
}

#exp-name {
    width: 1890px;
    text-align: center;
    padding: 10px;
    height: 20px;
    color: #2C99CE;
    font-family: 'Raleway', sans-serif;
    border-bottom: 1px solid #333;
} 
#main{

    margin-top: 50px;
    margin-left: 300px;
    height: 700px;
    width: 1000px;
    background-color: white;
    border: 3px solid black;
    border-radius: 10px;
}

#main_ob_plot{

    margin-top: 10px;
    margin-left: 10px;
    height: 720px;
    width: 1400px;
    background-color: blanchedalmond;
    border: 3px solid black;
    border-radius: 10px;
    background-image: url("../images/Capture.png");
}
#birds{
    height:90px;
    width:350px;
}
#flag{
    margin-left: 175px;
    float:left;
    cursor: pointer;
    position:absolute;
    
}
#flag-obj{
    position: absolute;
    left:15%;
    color: black;
    font-size: medium;
    background-color: blanchedalmond;
    white-space: nowrap;
    border:2px solid black;
    border-radius: 10px;
    font-weight: bolder;
    transform: translateX(-50%);
    padding: 10px 10px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5 s ease;

}
#flag-obj::before{
    content: "";
    position: absolute;
    left:50%;
    top:100%;
    transform: translateX(-50%);
    border:15px solid;
    border-color: blanchedalmond #0000 #0000 #0000;
}
#flag_div:hover #flag-obj{
    
    visibility: visible;
    opacity: 0.9;
}

#pole{

   margin-top: 33px;
    margin-left: 345px;
    float:left;
    cursor: pointer;
    position:absolute;
}
#pole-obj{
    position: absolute;
    left: 21%;
   
    color: black;
    font-size: medium;
    background-color: blanchedalmond;
    white-space: nowrap;
    border:2px solid black;
    border-radius: 10px;
    font-weight: bolder;
    transform: translateX(-50%);
    padding: 10px 15px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5 s ease;

}
#pole-obj::before{
    content: "";
    position: absolute;
    left:50%;
    top:100%;
    transform: translateX(-50%);
    border:15px solid;
    border-color: blanchedalmond #0000 #0000 #0000;
}
#pole_div:hover #pole-obj{
    
    visibility: visible;
    opacity: 0.9;
}

#house{

    margin-top: 60px;
    margin-left: 495px;
    float:left;
    cursor: pointer;
    position:absolute;
}
#house-obj{
    position: absolute;
    left: 32.5%;
    top:26%;
    color: black;
    font-size: medium;
    background-color: blanchedalmond;
    white-space: nowrap;
    border:2px solid black;
    border-radius: 10px;
    font-weight: bolder;
    transform: translateX(-50%);
    padding: 10px 15px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5 s ease;

}
#house-obj::before{
    content: "";
    position: absolute;
    left:50%;
    top:100%;
    transform: translateX(-50%);
    border:15px solid;
    border-color: blanchedalmond #0000 #0000 #0000;
}
#house_div:hover #house-obj{
    
    visibility: visible;
    opacity: 0.9;
}
#wind{
height: 320px;
width:170px;
margin-left: 880px;
float:left;
cursor: pointer;
position:absolute;
}
#wind-obj{
    position: absolute;
    left: 51%;
    top:23%;
    color: black;
    font-size: medium;
    background-color: blanchedalmond;
    white-space: nowrap;
    border:2px solid black;
    border-radius: 10px;
    font-weight: bolder;
    transform: translateX(-50%);
    padding: 10px 15px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5 s ease;

}
#wind-obj::before{
    content: "";
    position: absolute;
    left:50%;
    top:100%;
    transform: translateX(-50%);
    border:15px solid;
    border-color: blanchedalmond #0000 #0000 #0000;
}
#wind_div:hover #wind-obj{
    
    visibility: visible;
    opacity: 0.9;
}
#crow{
    height:50px;
    width:20px;
    position: absolute;
    margin-left: 1260px;
    margin-top: 70px;
   
}

#tree{
height: 170px;
width: 150px;
margin-top: 100px;
margin-left: 1195px;
float:left;
cursor: pointer;
position:absolute;
}
#tree-obj{
    position: absolute;
    left: 67%;
    top:29%;
    color: black;
    font-size: medium;
    background-color: blanchedalmond;
    white-space: nowrap;
    border:2px solid black;
    border-radius: 10px;
    font-weight: bolder;
    transform: translateX(-50%);
    padding: 10px 10px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5 s ease;

}
#tree-obj::before{
    content: "";
    position: absolute;
    left:50%;
    top:100%;
    transform: translateX(-50%);
    border:15px solid;
    border-color: blanchedalmond #0000 #0000 #0000;
}
#tree_div:hover #tree-obj{
    
    visibility: visible;
    opacity: 0.9;
}


#sc1_img{
    height:70px;
    width:70px;
    margin-left: 150px;
    margin-top: 10px;
    float:left;
    position: absolute;
    cursor: pointer;

}

#sc2_img{
    height:100px;
    width:80px;
  margin-top: 60px;
    margin-left: 343px;
    float:left;
    position: absolute;
    cursor: pointer;
}
 #sc3_img{
    height:60px;
    width:100px;
    margin-top: 100px;
    margin-left:605px;
    float:left;
    position: absolute;
    cursor: pointer;
}

#sc4_img{
    height:120px;
    width:150px;
    
    position: absolute;
    margin-left:890px;
    margin-top: 160px;
    float:left;
    position: absolute;
    cursor: pointer;
}
#sc5_img{
    height:120px;
    width:160px;
    position: relative;
    margin-left: 1190px;
    margin-top: 150px;
    float:left;
    position: absolute;
    cursor: pointer;
} 
#back_info{
margin-left: 350px;
margin-top: 120px;
height: 70px;
width: 300px;
font-size: large;
color:black;
background-color: #23B2EE;
font-weight: bolder;
border: 3px solid black;
border-radius: 10px;
cursor: pointer;
}

#back_info:hover{
    color:black;;
    background-color: #009dff;
}
#pta{
    margin-left: 350px;
    margin-top: 100px;
    height: 70px;
    width: 300px;
    font-size: large; 
    color:black;
    background-color: #23B2EE;
    font-weight: bold;
    border: 3px solid black;
    border-radius: 10px;
    cursor: pointer;
}
#pta:hover{
    color:black;;
    background-color: #009dff;
}
#set{
    margin-left: 350px;
    margin-top: 80px;
    height: 70px;
    width: 300px;
    font-size: medium; 
    color:whitesmoke;
    background-color: #222222;
    font-weight: bold;
    border: 3px solid black;
    border-radius: 10px;
    cursor: pointer;
}
#set:hover{
    color:burlywood;
}
#plot{
    margin-left: 350px;
    margin-top: 100px;
    height: 70px;
    width: 300px;
    font-size: large; 
    color:black;
    background-color: #23B2EE;
    font-weight: bold;
    border: 3px solid black;
    border-radius: 10px;
    cursor: pointer;
}
#plot:hover{
    color:black;;
    background-color: #009dff;
}
#image_slider{
    height:400px;
    width: 700px;
    margin-top: 30px;
    margin-left: 150px;
    border-radius: 10px;
    border:2px solid black;
    box-shadow: 0px 0px 20px #a0621a;
}
#img_sl{
    height:400px;
    width: 700px;
}
#rad_para{

   
    font-weight: bold;
    font-size:25px;
    text-align: justify;
    
    padding: 30px;
}

#back{
    margin-left: 850px;
    margin-top: 35px;
    height: 50px;
    width: 120px;
    font-size: medium; 
    color:black;
    background-color: #23B2EE;
    font-weight: bold;
    border: 3px solid black;
    border-radius: 10px;
    cursor: pointer;
    
}
#back:hover{
    color:black;;
    background-color: #009dff;
}

#lineobja1img
{
    
    height: 100px;
    margin-top: 90px;
    font-weight: bolder;
    margin-left: 5px;
    float:left;
    display: none;
    position:absolute;
 
    
}
#lineobja2img
{
    
    height: 100px;
    margin-top: 95px;
    margin-left: 18px;
    float:left;
    display: none;
    position:absolute;
    
    
}
#lineobja3img
{
   
    height:100px;
    margin-top: 95px;
    float:left;
    display: none;
    position:absolute;
    margin-left: 28px;
    
    
}

#lineobja4img
{
    height:100px;
   float:left;
    display: none;
    position:absolute;
    margin-left: 45px;
    margin-top: 95px;
   

}

#lineobja5img
{
    width: 200px;
    height: 100px;
    margin-top: 95px;
    margin-left:13px;
    float:left;
    display: none;
    position:absolute;
    font-weight: bolder;

}
#lineobjb1img
{
    
    height: 100px;
    margin-top: 105px;
    margin-left: 35px;
    float:left;
    display: none;
    position:absolute;
    
}
#lineobjb2img
{
   
    height: 100px;
    margin-top: 100px;
    margin-left: 45px;
    float:left;
    display: none;
    position:absolute;  
}
#lineobjb3img
{
   
    height:100px;
    margin-top: 100px;
    margin-left: 55px;
    float:left;
    display: none;
    position:absolute;
    
  
}

#lineobjb4img
{
    height:100px;
    margin-top: 100px;
    margin-left: 60px;
    float:left;
    display: none;
    position:absolute;
   
    
}

#lineobjb5img
{
    
    height:100px;
    margin-top: 100px;
    margin-left: 75px;
    float:left;
    display: none;
    position:fixed;
   
}

#refa{
    margin-top: 170px;
    margin-left: 65px;
    height:10px;
    width:10px;
    position: absolute;
    float: left;
}

#refdot1{
    margin-top: 160px;
    margin-left: 75px;
    height:10px;
    width:5px;
    position: absolute;
}

#refdot2{
    margin-top: 160px;
    margin-left: 120px;
    height:10px;
    width:5px;
    position: absolute;
}

#refb{
    margin-top: 170px;
    margin-left: 130px;
    height:10px;
    width:10px;
    position: absolute;
}

#drawobjimg
{
    margin-top:160px;
    margin-left:130px;
    height: 50px;
    width: 70px;
    position:absolute;
   
}
#sheet
{
    margin-top: 285px;
    margin-left: 525px;
    margin-bottom: 0px;
    float: left;
    height: 200px;
    width:200px;
    background-color:#DEDEDE;
    transform: perspective(800px)scaleZ(2)rotateX(70deg);
    opacity:0.9;
    border: 1px 1px 5px 5px solid ;
    border-color: #B7410E ;
    position:absolute;
    cursor: pointer;

}
#tripodimg
{
    margin-top: 430px;
    float: left;
    height: 135px;
    width: 260px;
    position:fixed;
    margin-left: 150px;
    cursor: pointer;
    
}
#adilade_view{
    margin-top: 250px;
    margin-left: 20px;
    width:300px;
    height:220px;
    background-color:blanchedalmond;
    position: absolute;
    
    font-weight: bolder;
    font-size: 30px;
    padding:10px;
}
#alidade_img{
    height: 220px;
    width:300px;
}
#stand_img{
    height:90px;
    width:325px;
    float:left;
    margin-top: 475px;
    margin-left: 20px;
    position:relative;
}
#next{
    margin-top: 200px;
    margin-left: 50px;
    height: 35px;
    width:100px;
    position: absolute;
    border-radius:10px;
    color:black;
    background-color: blanchedalmond;
    font-weight: bolder;
    font-size: larger;
    
}
#reset
{ 
   margin-top: 555px;
    float: left;
    height: 40px;
    width: 150px;
    margin-left: 150px;
    border-radius:10px white;
    border:3px solid white;
    color:white;
    background-color: #00394d;
    font-size: medium;
    font-weight: bold; 
}
#r{
    position: absolute;
    margin-left: 20px;
    margin-top: 570px;
    float: left;
    height: 50px;
    width: 110px;
    opacity: 0.9;
    cursor: pointer;
    
}
#n{
    position: absolute;
    margin-top: 570px;
    margin-left: 130px;
    float: left;
    height: 50px;
    width: 90px;
    opacity: 0.9;
    cursor: pointer;
    display: none;
    
}
#h{
    position: absolute;
    margin-top: 570px;
    margin-left: 220px;
    float: left;
    height: 50px;
    width: 110px;
    opacity: 0.9;
    cursor: pointer;
}
#result{

    position: absolute;
    margin-top: 180px;
    margin-left:150px;
    float: left;
    height: 50px;
    width: 110px;
    opacity: 0.9;
    cursor: pointer;
    display:none;
}
#home_ob_plot{
   
    margin-top: 555px;
    margin-left: 50px;
    height: 40px;
    width: 150px;
    font-size: medium; 
    color:whitesmoke;
    background-color: #00394d;
    font-weight: bold;
    border-radius:10px white;
    border:3px solid white;
    cursor: pointer;
    float: left;

}
[type=radio]{
    display:none;
}
#slider{
    height:35vw;
    position:relative;
    perspective: 1000px;
    transform-style: preserve-3d;
}
#slider label{
    margin: auto;
    width: 60%;
    height:100%;
    border-radius: 4px;
    position: absolute;
    left:0;
    right: 0;
    cursor:pointer;
    transition:transform 0.4s ease;
}
#graph{
float: left;
height: 700px;
width: 800px;
margin-top: 20px;
margin-left: 300px;
position: absolute;
}
#home{
    float: left;
    height: 40px;
    width: 100px;
    font-size: 20px;
    font-weight: bolder;
    background-color:green;
    color: whitesmoke;
    margin-top: 400px;
    margin-left: 1150px;
    position: absolute;
    cursor: pointer;
    
}
#home:hover{
    color:white;
    background-color:#3895D3;
}
#symbol{
    float: left;
    margin-top: 500px;
    margin-left: 1100px;
    position: absolute;

}

/* FOR B POITION */

#lineobja1img2
{
    
    height: 100px;
    margin-top: 90px;
    font-weight: bolder;
    margin-left: 5px;
    float:left;
    
    position:absolute;
 
    
}
#lineobja2img2
{
    
    height: 100px;
    margin-top: 95px;
    margin-left: 18px;
    float:left;
    
    position:absolute;
    
    
}
#lineobja3img2
{
   
    height:100px;
    margin-top: 95px;
    float:left;
    
    position:absolute;
    margin-left: 28px;
    
    
}

#lineobja4img2
{
    height:100px;
   float:left;
  
    position:absolute;
    margin-left: 45px;
    margin-top: 95px;
   

}

#lineobja5img2
{
    width: 200px;
    height: 100px;
    margin-top: 95px;
    margin-left:13px;
    float:left;
    
    position:absolute;
    font-weight: bolder;

}
#lineobjb1img2
{
    
    height: 100px;
    margin-top: 105px;
    margin-left: 35px;
    float:left;
    display: none;
    position:absolute;
    
}
#lineobjb2img2
{
   
    height: 100px;
    margin-top: 100px;
    margin-left: 45px;
    float:left;
    display: none;
    position:absolute;  
}
#lineobjb3img2
{
   
    height:100px;
    margin-top: 100px;
    margin-left: 55px;
    float:left;
    display: none;
    position:absolute;
    
  
}

#lineobjb4img2
{
    height:100px;
    margin-top: 100px;
    margin-left: 60px;
    float:left;
    display: none;
    position:absolute;
   
    
}

#lineobjb5img2
{
    
    height:100px;
    margin-top: 100px;
    margin-left: 75px;
    float:left;
    display: none;
    position:fixed;
   
}

#refa2{
    margin-top: 170px;
    margin-left: 65px;
    height:10px;
    width:10px;
    position: absolute;
    float: left;
}

#refdot12{
    margin-top: 160px;
    margin-left: 75px;
    height:10px;
    width:5px;
    position: absolute;
}

#refdot22{
    margin-top: 160px;
    margin-left: 120px;
    height:10px;
    width:5px;
    position: absolute;
}

#refb2{
    margin-top: 170px;
    margin-left: 130px;
    height:10px;
    width:10px;
    position: absolute;
}

#drawobjimg2
{
    margin-top:160px;
    margin-left:130px;
    height: 50px;
    width: 70px;
    position:absolute;
   
}
#sheet2
{
    margin-top: 285px;
    margin-left: 175px;
    margin-bottom: 0px;
    float: left;
    height: 200px;
    width:200px;
    background-color:#DEDEDE;
    transform: translate(646px)perspective(800px)scaleZ(2)rotateX(70deg);
    opacity:0.9;
    border: 1px 1px 5px 5px solid ;
    border-color: #B7410E ;
    position:absolute;
    cursor: pointer;
    display: none;

}
#tripodimg2
{
    margin-top: 430px;
    float: left;
    height: 135px;
    width: 260px;
    position:fixed;
    margin-left: 790px;
    cursor: pointer;
    display: none;
}

Below is my JS code

function Reset() 
{
window.location.reload();
}
// SLIDING ANIMATION OF IMAGES
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
// TIMING FUNCTION TO AUTO CHANGE IMAGES
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

function set_time()
{
setInterval(image_show,1500);
}

var clear;

function flag()
{
    

    if($('#n').css('display') === 'none')
{
    
    check();
    setTimeout(function(){ document.getElementById("alidade_img").src="images/a1.PNG"; }, 400);
    setTimeout(function(){  document.getElementById("alidade_img").src="images/a2.PNG"; }, 800);   
    setTimeout(function(){ document.getElementById("drawobjimg").style.transform="translate(-110px,-45px)scale(1.5)rotateY(120deg)"; }, 400);
    setTimeout(function(){  document.getElementById("drawobjimg").style.transform="translate(0px,0px)"; }, 800);
    setInterval(() => {document.getElementById("lineobja1img").style.display="inline"}, 400);
    
    /*document.getElementById("drawobjimg").style.transform="translate(-115px,-35px)scale(1.2)rotateY(150deg)";
    document.getElementById("lineobja1img").style.display="inline";*/
}
else

{   setTimeout(function(){ document.getElementById("alidade_img").src="images/a1.PNG"; }, 400);
    setTimeout(function(){  document.getElementById("alidade_img").src="images/a2.PNG"; }, 800);
    setTimeout(function(){ document.getElementById("drawobjimg2").style.transform="translate(-75px,-35px)scale(1.2)rotateY(170deg)"; }, 400);
    setTimeout(function(){  document.getElementById("drawobjimg2").style.transform="translate(0px,0px)"; }, 800);
    setInterval(() => {document.getElementById("lineobjb1img2").style.display="inline"}, 400);
   /* document.getElementById("drawobjimg").style.transform="translate(-75px,-35px)scale(1.2)rotateY(170deg)";
    document.getElementById("lineobjb1img").style.display="inline";*/
}
  
}

function pole()
{
    
    if($('#n').css('display') === 'none')
   {   
        
       setTimeout(function(){ document.getElementById("alidade_img").src="images/b1.PNG"; }, 400);
        setTimeout(function(){  document.getElementById("alidade_img").src="images/b2.PNG"; }, 800);
        setTimeout(function(){ document.getElementById("drawobjimg").style.transform="translate(-105px,-60px)scale(2)rotateY(110deg)"; }, 400);
    setTimeout(function(){  document.getElementById("drawobjimg").style.transform="translate(0px,0px)"; }, 800);
    setInterval(() => {document.getElementById("lineobja2img").style.display="inline"}, 400);
       /*document.getElementById("drawobjimg").style.transform="translate(-100px,-50px)scale(2)rotateY(110deg)";
       document.getElementById("lineobja2img").style.display="inline";*/
}
  else
           
   {   
        setTimeout(function(){ document.getElementById("alidade_img").src="images/b1.PNG"; }, 400);
        setTimeout(function(){  document.getElementById("alidade_img").src="images/b2.PNG"; }, 800);
        setTimeout(function(){ document.getElementById("drawobjimg2").style.transform="translate(-75px,-45px)scale(1.5)rotateY(160deg)"; }, 400);
    setTimeout(function(){  document.getElementById("drawobjimg2").style.transform="translate(0px,0px)"; }, 800);
    setInterval(() => {document.getElementById("lineobjb2img2").style.display="inline"}, 400);
        /*document.getElementById("drawobjimg").style.transform="translate(-75px,-45px)scale(1.5)rotateY(160deg)";
        document.getElementById("lineobjb2img").style.display="inline";*/
   } 
   

}

function house()
{
    if($('#n').css('display') === 'none')
    {
        
        setTimeout(function(){ document.getElementById("alidade_img").src="images/c1.PNG"; }, 400);
        setTimeout(function(){  document.getElementById("alidade_img").src="images/c2.PNG"; }, 800);
        setTimeout(function(){ document.getElementById("drawobjimg").style.transform="translate(-85px,-80px)scale(3)rotateY(89deg)"; }, 400);
    setTimeout(function(){  document.getElementById("drawobjimg").style.transform="translate(0px,0px)"; }, 800);
    setInterval(() => {document.getElementById("lineobja3img").style.display="inline"}, 400);
        /*document.getElementById("drawobjimg").style.transform="translate(-80px,-65px)scale(2.5)rotateY(85deg)";
        document.getElementById("lineobja3img").style.display="inline";*/
    }
    else{
        setTimeout(function(){ document.getElementById("alidade_img").src="images/c1.PNG"; }, 400);
        setTimeout(function(){  document.getElementById("alidade_img").src="images/c2.PNG"; }, 800);
        setTimeout(function(){ document.getElementById("drawobjimg2").style.transform="translate(-65px,-60px)scale(2)rotateY(120deg)"; }, 400);
    setTimeout(function(){  document.getElementById("drawobjimg2").style.transform="translate(0px,0px)"; }, 800);
    setInterval(() => {document.getElementById("lineobjb3img2").style.display="inline"}, 400);
       /* document.getElementById("drawobjimg").style.transform="translate(-65px,-60px)scale(2)rotateY(120deg)";
        document.getElementById("lineobjb3img").style.display="inline";*/
    }   
}

function wind()
{
    if($('#n').css('display') === 'none'){

       
        setTimeout(function(){ document.getElementById("alidade_img").src="images/d1.PNG"; }, 400);
        setTimeout(function(){  document.getElementById("alidade_img").src="images/d2.PNG"; }, 800);
        setTimeout(function(){ document.getElementById("drawobjimg").style.transform="translate(-65px,-65px)scale(2)rotateY(-290deg)"; }, 400);
    setTimeout(function(){  document.getElementById("drawobjimg").style.transform="translate(0px,0px)"; }, 800);
    setInterval(() => {document.getElementById("lineobja4img").style.display="inline"}, 400);
       /* document.getElementById("drawobjimg").style.transform="translate(-65px,-65px)scale(2)rotateY(-290deg)";
        document.getElementById("lineobja4img").style.display="inline";*/
    }
    else{
        setTimeout(function(){ document.getElementById("alidade_img").src="images/d1.PNG"; }, 400);
        setTimeout(function(){  document.getElementById("alidade_img").src="images/d2.PNG"; }, 800);
        setTimeout(function(){ document.getElementById("drawobjimg2").style.transform="translate(-55px,-60px)scale(2)rotateY(110deg)"; }, 400);
    setTimeout(function(){  document.getElementById("drawobjimg2").style.transform="translate(0px,0px)"; }, 800);
    setInterval(() => {document.getElementById("lineobjb4img2").style.display="inline"}, 400);
        /*document.getElementById("drawobjimg").style.transform="translate(-55px,-60px)scale(2)rotateY(110deg)";
        document.getElementById("lineobjb4img").style.display="inline";*/
    }
      
}
function tree()
{   
    if($('#n').css('display') === 'none')

    {      
           setTimeout(function(){ document.getElementById("alidade_img").src="images/e1.PNG"; }, 400);
        setTimeout(function(){  document.getElementById("alidade_img").src="images/e2.PNG"; }, 800);
        setTimeout(function(){ document.getElementById("drawobjimg").style.transform="translate(-55px,-55px)scale(1.5)rotateY(-320deg)"; }, 400);
    setTimeout(function(){  document.getElementById("drawobjimg").style.transform="translate(0px,0px)"; }, 800);
    setInterval(() => {document.getElementById("lineobja5img").style.display="inline"}, 400);
       /* document.getElementById("drawobjimg").style.transform="translate(-50px,-55px)scale(1.5)rotateY(-320deg)";
        document.getElementById("lineobja5img").style.display="inline";*/
        
        
        
    }
  else{
        setTimeout(function(){ document.getElementById("alidade_img").src="images/e1.PNG"; }, 400);
        setTimeout(function(){  document.getElementById("alidade_img").src="images/e2.PNG"; }, 800);
        setTimeout(function(){ document.getElementById("drawobjimg2").style.transform="translate(-50px,-70px)scale(2.5)rotateY(-265deg)"; }, 400);
    setTimeout(function(){  document.getElementById("drawobjimg2").style.transform="translate(0px,0px)"; }, 800);
    setInterval(() => {document.getElementById("lineobjb5img2").style.display="inline"}, 400);
        /*document.getElementById("drawobjimg").style.transform="translate(-50px,-55px)scale(1.5)rotateY(-250deg)";
        document.getElementById("lineobjb5img").style.display="inline";*/
        
    }
       
}

    var button = document.querySelectorAll('.obj');

    for (var a = 0; a < button.length; a++) {   

    button[a].addEventListener('click',function(){
    document.getElementById("n").style.display="inline";
    alert("Click on NEXT Button to move at position B");
    });
}

    

function next()
{

    document.getElementById("sheet").style.display="none";
    document.getElementById("tripodimg").style.display="none";
    document.getElementById("sheet2").style.display="inline";
    document.getElementById("tripodimg2").style.display="inline";
}

Hi, @nipunjain1305! Welcome to the forum!
Do you have a question? The more information you give us, the easier it is to help.
A link to your project would also help a lot.

I want to show next button on the click of five objects like flag, pole, house, wind & tree as mentioned in the above code. All these objects have same class name as “obj” & next button id is “n”. Next button must be show only if all the objects are clicked.

A link to your project would be extremely helpful, so I can see what you have done so far.
I’m not sure if this is exactly what you are looking for, but here is a program that has you select all of the items before displaying the ‘next’ button.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.