As a newcomer to JavaScript, I find this function intriguing, though I’m not entirely sure why it’s designed the way it is. At times, it seems to achieve its intended purpose of keeping the div visible and in the same position when clicking another div, until clicking back on the original one. However, I’m puzzled by the intermittent behavior where the messages “The second click has been made =” and “The first click has been made = ” are printed seemingly as if the if conditional is not being respected, even when only one click is made. Despite this confusion, I appreciate that the function appears well-designed and capable of fulfilling its objective under certain conditions.
<code>
**JavaScript**
`let clickFuera = true;
function inOutHover(idDivCard, isHover, idPoligono) {
const divCard = document.getElementById(idDivCard);
const poligono = document.getElementById(idPoligono);
const manejadorEventoMovMouse = function (e) {
divCard.style.left = e.pageX + 40 + "px";
divCard.style.top = e.pageY + 5 + "px";
};
const manejadorEventoClick = function () {
if (clickFuera) {
document.removeEventListener("mousemove", manejadorEventoMovMouse);
divCard.manejadorEventoMovMouse = null;
divCard.style`your text`.display = "block";
clickFuera = false;
console.log("The first click has been made = " + clickFuera);
} else {
poligono.removeEventListener("click", manejadorEventoClick);
divCard.style.display = "none";
clickFuera = true;
console.log("The second click has been made = " + clickFuera);
}
};
if (isHover) {
divCard.manejadorEventoMovMouse = manejadorEventoMovMouse;
document.addEventListener("mousemove", divCard.manejadorEventoMovMouse);
poligono.addEventListener("click", manejadorEventoClick);
divCard.style.display = "block";
} else {
if (divCard.manejadorEventoMovMouse) {
document.removeEventListener("mousemove", divCard.manejadorEventoMovMouse);
divCard.manejadorEventoMovMouse = null;
}
divCard.style.display = "none";
poligono.removeEventListener("click", manejadorEventoClick);
}
}
**HTML**
<body>
<div id="poligono" class="poligono" onmouseover="inOutHover('divCard', true, 'poligono')" onmouseout="inOutHover('divCard', false, 'poligono')"></div>
<div id="divCard" class="divCard">This is a card</div>
<script src="script.js"></script>
</body>
**CSS**
body {
font-family: Arial, sans-serif;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
margin: 0;
}
.poligono {
width: 100px;
height: 100px;
background-color: #3498db;
cursor: pointer;
}
.divCard {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</code>
<code>
**JavaScript**
`let clickFuera = true;
function inOutHover(idDivCard, isHover, idPoligono) {
const divCard = document.getElementById(idDivCard);
const poligono = document.getElementById(idPoligono);
const manejadorEventoMovMouse = function (e) {
divCard.style.left = e.pageX + 40 + "px";
divCard.style.top = e.pageY + 5 + "px";
};
const manejadorEventoClick = function () {
if (clickFuera) {
document.removeEventListener("mousemove", manejadorEventoMovMouse);
divCard.manejadorEventoMovMouse = null;
divCard.style`your text`.display = "block";
clickFuera = false;
console.log("The first click has been made = " + clickFuera);
} else {
poligono.removeEventListener("click", manejadorEventoClick);
divCard.style.display = "none";
clickFuera = true;
console.log("The second click has been made = " + clickFuera);
}
};
if (isHover) {
divCard.manejadorEventoMovMouse = manejadorEventoMovMouse;
document.addEventListener("mousemove", divCard.manejadorEventoMovMouse);
poligono.addEventListener("click", manejadorEventoClick);
divCard.style.display = "block";
} else {
if (divCard.manejadorEventoMovMouse) {
document.removeEventListener("mousemove", divCard.manejadorEventoMovMouse);
divCard.manejadorEventoMovMouse = null;
}
divCard.style.display = "none";
poligono.removeEventListener("click", manejadorEventoClick);
}
}
**HTML**
<body>
<div id="poligono" class="poligono" onmouseover="inOutHover('divCard', true, 'poligono')" onmouseout="inOutHover('divCard', false, 'poligono')"></div>
<div id="divCard" class="divCard">This is a card</div>
<script src="script.js"></script>
</body>
**CSS**
body {
font-family: Arial, sans-serif;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
margin: 0;
}
.poligono {
width: 100px;
height: 100px;
background-color: #3498db;
cursor: pointer;
}
.divCard {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</code>
**JavaScript**
`let clickFuera = true;
function inOutHover(idDivCard, isHover, idPoligono) {
const divCard = document.getElementById(idDivCard);
const poligono = document.getElementById(idPoligono);
const manejadorEventoMovMouse = function (e) {
divCard.style.left = e.pageX + 40 + "px";
divCard.style.top = e.pageY + 5 + "px";
};
const manejadorEventoClick = function () {
if (clickFuera) {
document.removeEventListener("mousemove", manejadorEventoMovMouse);
divCard.manejadorEventoMovMouse = null;
divCard.style`your text`.display = "block";
clickFuera = false;
console.log("The first click has been made = " + clickFuera);
} else {
poligono.removeEventListener("click", manejadorEventoClick);
divCard.style.display = "none";
clickFuera = true;
console.log("The second click has been made = " + clickFuera);
}
};
if (isHover) {
divCard.manejadorEventoMovMouse = manejadorEventoMovMouse;
document.addEventListener("mousemove", divCard.manejadorEventoMovMouse);
poligono.addEventListener("click", manejadorEventoClick);
divCard.style.display = "block";
} else {
if (divCard.manejadorEventoMovMouse) {
document.removeEventListener("mousemove", divCard.manejadorEventoMovMouse);
divCard.manejadorEventoMovMouse = null;
}
divCard.style.display = "none";
poligono.removeEventListener("click", manejadorEventoClick);
}
}
**HTML**
<body>
<div id="poligono" class="poligono" onmouseover="inOutHover('divCard', true, 'poligono')" onmouseout="inOutHover('divCard', false, 'poligono')"></div>
<div id="divCard" class="divCard">This is a card</div>
<script src="script.js"></script>
</body>
**CSS**
body {
font-family: Arial, sans-serif;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
margin: 0;
}
.poligono {
width: 100px;
height: 100px;
background-color: #3498db;
cursor: pointer;
}
.divCard {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
I’ve attempted to review the code and ensure that the events are properly executed, but I’m still perplexed by the inconsistent behavior. Sometimes it seems to work as expected, while other times it doesn’t. It’s been a challenge to pinpoint the exact reason behind this variability. Despite my efforts to understand and debug the code, I’m left wondering why it functions correctly on some occasions but fails to do so on others.