Greetings to all members of the community,
I have developed a web application (see code below) that, when double-clicked, inserts a text area into the frame.
Upon double-clicking the text area, it changes its color to green, and with another double-click, it reverts back to white...and so forth.
The issue I am facing is that when multiple text areas are created, only the most recently generated one retains the toggleable property. It appears that the event handlers for the preceding text areas are somehow being detached.
How can I ensure that the event handlers remain attached to every single text area?
Your assistance is greatly appreciated :)
function randomIntInRange(min, max) { // min and max included
return Math.floor(Math.random() * (max - min + 1) + min);
}
// Add a double click event listener to the root container
document.getElementById('root_container').addEventListener('dblclick', function(event) {
var textArea = new TextArea();
textArea.insertIntoHTML(event.clientX, event.clientY);
});
class TextArea {
constructor() {
// Generate a text area id
this.id = randomIntInRange(1000000000, 9999999999);
// Create a variable for changing the text area's bg-color in the onDoubleClick(event) method
this.isToggled = false;
this.onDoubleClick = this.onDoubleClick.bind(this);
}
insertIntoHTML(x, y) {
// Insert a new text area into the html code
document.getElementById('root_container').innerHTML += '<textarea id="' + this.id + '"></textarea>';
// Set the position of the text area
document.getElementById(this.id).style.position = 'absolute';
document.getElementById(this.id).style.left = x + 'px';
document.getElementById(this.id).style.top = y + 'px';
// Add a double click event listener to the text area
document.getElementById(this.id).addEventListener('dblclick', this.onDoubleClick);
// Focus on the text area
document.getElementById(this.id).focus();
}
onDoubleClick(event) {
// Prevent event bubbling
event.stopPropagation();
/* ******************************************
* Toggle the text area's background color
****************************************** */
// If the text area is not toggled yet
if (!this.isToggled) {
// Set the background color to green
document.getElementById(this.id).style.backgroundColor = '#7ce717';
this.isToggled = !this.isToggled;
} else {
// Otherwise set it to white
document.getElementById(this.id).style.backgroundColor = '#ffffffff';
this.isToggled = !this.isToggled;
}
}
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#title {
position: absolute;
top: -20px;
left: 200px;
}
#root_container {
background-color: #797979;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Set the webpage's title -->
<title>Web App</title>
<!-- Include the cascading style sheet -->
<link rel="stylesheet" type="text/css" href="../css/styles.css">
</head>
<body>
<div id="root_container">
</div>
<!-- Include the javascript file -->
<script src="../javascript/behaviour.js"></script>
</body>
</html>