I am trying to create an editable container that allows us to easily select boxes for editing.
let SeconddivBox = document.getElementById("SeconddivBox");
let setCont = document.getElementById("setCont");
count = 0;
setCont.addEventListener("click",
function () {
count += 1;
let containerBox = document.getElementById("containerBox").value;
if (containerBox == "DivBoxS") {
SeconddivBox.innerHTML += `<div class="DivClass" id="DivId${count}"></div>`
}
})
SeconddivBox.addEventListener("click",
function (e) {
let TargetedElement = e.target;
let TargetedId = JSON.stringify(TargetedElement.id);
if (TargetedId.includes('DivId')) {
// for set width of element which you are selected
let setW = document.getElementById("setW");
setW.addEventListener("click",
function () {
let widthValue = document.getElementById("widthValue").value;
console.log(widthValue);
TargetedElement.style.width = `${widthValue}px`;
})
return;
}
})* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#FirstdivBox {
border: 2px solid blue;
width: 100vw;
height: 20vh;
}
#SeconddivBox {
border: 2px solid red;
width: 100vw;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
}
#widthValue {
border: 4px solid red;
}
.DivClass {
width: 150px;
height: 150px;
border: 3px solid black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0>
<title>Editable Container</title>
<link rel="stylesheet" href="custom-style.css">
</head>
<body>
<div id="mainContainer">
<!-- This is the editable container -->
<div id="FirstdivBox">
<select name="containerBox" id="containerBox">
<option value="DivBoxS" id="DivBoxValue">Div</option>
</select>
<button id="setCont">
Set-Container
</button>
<input type="text" id="widthValue">
<button id="setW">
Set Width
</button>
</div>
<div id="SeconddivBox">
</div>
</div>
<script src="main-script.js"></script>
</body>
</html>However, I encountered a problem while coding - when selecting and editing one box, the properties apply to both instead of just the selected box. Any help would be appreciated!