How to avoid previous function interfering with current?

Question

i created 2 different functions and 2 triangles when i click on the triangle a label appears , when i click the second triangle the detials of first triangle appears as well please help

Answer 1

event.stopPropagation();

Answer 2

nope still not working

Answer 3

https://code.sololearn.com/WRWkUO2g60WJ/?ref=app

Answer 4

can you please check the code

Answer 5

You have a lot mix of errors ;P

First, your Html isn't valid at all, so you've define complex css rules to reach your goal even so...
You need to build your css on a solid-valid html structure ^^

Accessory, your <script> tag is malformed and it be enough to write just '<script>' without attributes... and don't use <center> tag, which is deprecated, but style the container, or the element itself, so do just:

<!-- <center><h1>Chip Chop game</h1></center>-->
<h1>Chip Chop game</h1>

... and we'll set it an alignement to center in css.
The main problem in your code is at your main content... the squares and triangles.
You have a lot of </img> just after your <div> for colored squares, and you don't close these <div>s. I have attempted to correct it as it's interpreted by brothers, but even, your structure wasn't compatible with your purpose ( clicking/hovering nested elements ), so I have finally tried to rewrite it a bit, more logicaly ;)

<div class="square" >
<div class="square1" onclick="show()">
<div class="triangle" id="1"></div>
<label id="bruh" onclick="">1</label>
<label id="lmao">2</label>
</div>
<div class="square2"></div>
<div class="square3" onmouseover="show1()"></div>
<div class="square4">
<div class="triangle1" id="2"></div>
<label id="take" onmouseover="show1()">3</label>
</div>
</div>

( to be continued in next post )

Answer 6

( end of previous answer )

You'll need maybe to do some adjustements: there's some of them to do in css ( but I've prepared this also below ), and the events are probably no more where you expect, as the structure was changed ( the last onmouseover event on id 'take' will never occurs actually, since it's css property leave it with "display:none;", it's no longer on the document ^^ -- the first occur on mouse over, or on focus in touch devices, the yellow box, instead of green before corrections -- the onclick event is unchanged: to move behavior of yellow at green, simply move the onmouver attribute in the green, 'square4', <div> attributes )

Now, the Css...
I just put below the corrections ( modifications, deletions, additions ) with no more comments: ask for specifics things if you need ;)

/* additionnal styles */
* { box-sizing:border-box; }
h1 { text-align:center; }

/* modified styles ( new, overwriten, or deleted -- commented in this case */
.square1 {
position : absolute;
/* left : 30px;
top: 30px;*/
}
.square3 {
position : absolute;
/* right : 142px;*/
top:140px;
height : 140px;
width : 140px;
}
.square2 {
position : absolute;
height : 140px;
width : 140px;
}
.square4 {
position : absolute;
/* bottom : 143px;*/
height : 140px;
width : 140px;
overflow:hidden;
}
.triangle {
/* right: 140px;*/
}
#bruh {
left: 40px;
top: 90px;
/* text-size:bold;*/
font-weight:bold; /* it's font-size for size and font-weight for bold or not */
}
#lmao {
right: 40px;
top: 30px;
/* text-size:bold;*/
font-weight:bold; /* it's font-size for size and font-weight for bold or not */
}
.triangle1 {
/* right: 0px;*//*
}