/    Sign up×
Community /Pin to ProfileBookmark

display next button after clicking on multiple objects is not working

Copy linkTweet thisAlerts:
Oct 27.2021

“`
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=”imagesbirds.gif”></marquee></div>
<a href=”2.html”><img id=”result” src=”imagesresult.PNG” ></a>
<img id=”r” src=”imagesreset.PNG” onclick=”Reset()”>
<img id=”n” src=”imagesnext.PNG” onclick=”next()”>
<a href=”index.html”><img id=”h” src=”imageshome.PNG”></a>

<div>
<div id=”flag_div”><span id=”flag-obj”>Object 1 (Flag)</span>
<span><img id=”flag” src=”imagesflag.PNG” onclick=”flag()” class=”obj”></span></div>
<div id=”pole_div”><span id=”pole-obj”>Object 2 (Pole)</span>
<span><img id=”pole” src=”imagespole.PNG” onclick=”pole()” class=”obj”></span></div>
<div id=”house_div”><span id=”house-obj”>Object 3 (House)</span>
<span><img id=”house” src=”imageshouse.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=”imageswind.gif” onclick=”wind()” class=”obj”></span></div>
<div id=”tree_div”><span id=”tree-obj”>Object 5 (Tree)</span>
<img id=”crow” src=”imagescrow.gif”>
<span> <img id=”tree” src=”imagestree.PNG” onclick=”tree()” class=”obj”></span></div>
<img id=”sc1_img” class=”sc1_img” src=”imagessc1.jpg” onclick=”flag()”>
<img id=”sc2_img” src=”imagessc2.jpg” onclick=”pole()”>
<img id=”sc3_img” src=”imagessc3.jpg” onclick=”house()”>
<img id=”sc4_img” src=”imagessc4.jpg” onclick=”wind()”>
<img id=”sc5_img” src=”imagessc5.jpg” onclick=”tree()”>
</div>

<div id=”sheet”>
<img id=”lineobja1img” src=”imagesl1_black.PNG” alt=”linea1″>
<img id=”lineobja2img” src=”imagesl2_black.PNG” alt=”linea2″>
<img id=”lineobja3img” src=”imagesl3_black.PNG” alt=”linea3″>
<img id=”lineobja4img” src=”imagesl4_black.PNG” alt=”linea4″>
<img id=”lineobja5img” src=”imagesl5_black.PNG” alt=”linea5″>
<img id=”lineobjb1img” src=”imagesl1_blackb.PNG” alt=”lineb1″>
<img id=”lineobjb2img” src=”imagesl2_blackb.PNG” alt=”lineb2″>
<img id=”lineobjb3img” src=”imagesl3_blackb.PNG” alt=”lineb3″>
<img id=”lineobjb4img” src=”imagesl4_blackb.PNG” alt=”lineb4″>
<img id=”lineobjb5img” src=”imagesl5_blackb.PNG” alt=”lineb5″>
<img id=”refa” src=”imagesrefa.PNG” alt=”ref point a”>
<img id=”refdot1″ src=”imagesrefdot1.PNG” alt=”ref dot1″>
<img id=”refdot2″ src=”imagesrefdot2.PNG” alt=”ref dot2″>
<img id=”refb” src=”imagesrefb.PNG” alt=”ref point b”>

<img id=”drawobjimg” src=”imagesdrawobj.PNG” class=”draw” alt=”draw”>
</div>

<div id=”adilade_view”><center><img id=”alidade_img” src=”imagesalidade.PNG”></center></div>
<img id=”stand_img” src=”imagesstand.PNG”>
<img id=”tripodimg” src=”imagestri.PNG” alt=”tri”>
<div id=”sheet2″>
<img id=”lineobja1img2″ src=”imagesl1_black2.PNG” alt=”linea1″>
<img id=”lineobja2img2″ src=”imagesl2_black2.PNG” alt=”linea2″>
<img id=”lineobja3img2″ src=”imagesl3_black2.PNG” alt=”linea3″>
<img id=”lineobja4img2″ src=”imagesl4_black2.PNG” alt=”linea4″>
<img id=”lineobja5img2″ src=”imagesl5_black2.PNG” alt=”linea5″>
<img id=”lineobjb1img2″ src=”imagesl1_blackb2.PNG” alt=”lineb1″>
<img id=”lineobjb2img2″ src=”imagesl2_blackb2.PNG” alt=”lineb2″>
<img id=”lineobjb3img2″ src=”imagesl3_blackb2.PNG” alt=”lineb3″>
<img id=”lineobjb4img2″ src=”imagesl4_blackb2.PNG” alt=”lineb4″>
<img id=”lineobjb5img2″ src=”imagesl5_blackb2.PNG” alt=”lineb5″>
<img id=”refa2″ src=”imagesrefa2.PNG” alt=”ref point a”>
<img id=”refdot12″ src=”imagesrefdot12.PNG” alt=”ref dot1″>
<img id=”refdot22″ src=”imagesrefdot22.PNG” alt=”ref dot2″>
<img id=”refb2″ src=”imagesrefb2.PNG” alt=”ref point b”>

<img id=”drawobjimg2″ src=”imagesdrawobj2.PNG” class=”draw” alt=”draw”>
</div>

<img id=”tripodimg2″ src=”imagestri2.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”;
}
“`

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@RahulkauthorOct 27.2021 — ["display next buton after clicking on multiple objects is not working","display next button after clicking on multiple objects is not working"]
Copy linkTweet thisAlerts:
@SempervivumOct 27.2021 — Single backticks (probably created by the button `&lt;/&gt;</C>) won't work reliably when posting code. You better use code tags: <C>your code here` or triple backticks. I edited your posting accordingly.
Copy linkTweet thisAlerts:
@RahulkauthorOct 27.2021 — Thanks for editing. Please can you resolve my query.
Copy linkTweet thisAlerts:
@SempervivumOct 27.2021 — Your code is fairly long. Can you point out the essentials? What should it do? What does it instead?
Copy linkTweet thisAlerts:
@RahulkauthorOct 27.2021 — My query is in the very first code. I![I](https://ibb.co/JppjhTT) 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.
Copy linkTweet thisAlerts:
@SempervivumOct 27.2021 — In order to achieve this at each click you have to check all buttons if they are clicked. This code should do the job:
``<i>
</i> var button = document.querySelectorAll('.obj');
for (var a = 0; a &lt; button.length; a++) {
button[a].addEventListener('click', function (event) {
// add class "clicked" to current button:
event.target.classList.add('clicked');
// check if all buttons are clicked:
var allClicked = true;
// loop through all buttons
// if the current one is not yet clicked
// set "allClicked" to false:
for (var j = 0; j &lt; button.length; j++) {
if (!button[j].classList.contains('clicked')) {
allClicked = false;
}
}
if (allClicked) {
document.getElementById("n").style.display = "inline";
alert("Click on NEXT Button to move at position B");
}
});
}<i>
</i>``
(not tested)
Copy linkTweet thisAlerts:
@SempervivumOct 27.2021 — PS: Or a bit shorter and without loops:
``<i>
</i> // add eventlistener for click to window:
window.addEventListener('click', (event) =&gt; {
// event.target is the element having been clicked
// was a button .obj clicked?
if (event.target.classList.contains('obj')) {
// add class "clicked" to the button:
event.target.classList.add('clicked');
// are all buttons clicked now?
if (!document.querySelector('.obj:not(".clicked")')) {
// make next button visible:
document.getElementById("n").style.display = "inline";
alert("Click on NEXT Button to move at position B");
}
}
});<i>
</i>``
Copy linkTweet thisAlerts:
@RahulkauthorOct 28.2021 — Sorry, both codes are not working.
Copy linkTweet thisAlerts:
@SempervivumOct 28.2021 — Both codes were not tested and the console was clearly indicating what's wrong: The selector here:

`if (!document.querySelector('.obj:not(".clicked")')) {</C><br/>
should read:<br/>
<C>if (!document.querySelector('.obj:not(.clicked)')) {</C><br/>
This is tested now and works:
<CODE>`<i>
</i> // add eventlistener for click to window:
window.addEventListener('click', (event) =&gt; {
// event.target is the element having been clicked
// was a button .obj clicked?
if (event.target.classList.contains('obj')) {
// add class "clicked" to the button:
event.target.classList.add('clicked');
// are all buttons clicked now?
if (!document.querySelector('.obj:not(.clicked)')) {
// make next button visible:
document.getElementById("n").style.display = "inline";
alert("Click on NEXT Button to move at position B");
}
}
});<i>
</i>``
Copy linkTweet thisAlerts:
@RahulkauthorOct 28.2021 — ``<i>
</i> // add eventlistener for click to window:
window.addEventListener('click', (event) =&gt; {
// event.target is the element having been clicked
// was a button .obj clicked?
if (event.target.classList.contains('obj')) {
// add class "clicked" to the button:
event.target.classList.add('clicked');
// are all buttons clicked now?
if (!document.querySelector('.obj:not(".clicked")')) {
// make next button visible:
document.getElementById("n").style.display = "inline";
alert("Click on NEXT Button to move at position B");
}
}
});<i>
</i>`</CODE>
You mean i should replace below code with the above code
<CODE>`<i>
</i>var button = document.querySelectorAll('.obj');

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

button[a].addEventListener('click',function()
{
document.getElementById("n").style.display="inline";
alert("Click on NEXT Button to move at position B");
});
}<i>
</i>``
I have replaced, but code is not working.
Copy linkTweet thisAlerts:
@SempervivumOct 28.2021 — Yes, however you didn't takeover the fix for the wrong selector.

BTW: You need to use triple **back**ticks when posting code. Again I edited your posting.
×

Success!

Help @Rahulk spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...