I write this code to make an editable container, where we can select our element and edit their properties, but the code doesn't run properly

Question

I want to make an editable container in which we can easily select our boxes to edit

 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>Element selector and changer</title> <link rel="stylesheet" href="PforElement.css"> </head> <body> <div id="amindivBox"> <!-- we change using this box --> <div id="FirstdivBox"> <!-- for set an container --> <select name="containerBox" id="containerBox"> <option value="DivBoxS" id="DivBoxValue">Div</option> </select> <button id="setCont"> Set-Container </button> <!-- for width --> <input type="text" id="widthValue"> <button id="setW"> Set Width </button> </div> <!-- the change is shown inn this box --> <div id="SeconddivBox"> </div> </div> <script src="PforElement.js"></script> </body> </html>

But when I write the code, I face a problem when I select one box and edit it, it works properly but when I select another box to edit my all properties run in both the boxes not only for the selected box... help me, please.

Answer 1

I hope this is what you intend your code to do.

Check the inline comments for my explanation.

 // Initialize variables let count = 0; let setW = document.getElementById('setW'); let setCont = document.getElementById('setCont'); let SeconddivBox = document.getElementById('SeconddivBox'); setCont.addEventListener('click', function() { ++count; // Increment count by 1 let containerBox = document.getElementById('containerBox').value; if (containerBox == 'DivBoxS') SeconddivBox.innerHTML += `<div class="DivClass" id="DivId${count}"></div>`; }); SeconddivBox.addEventListener('click', e => { let TargetedElement = e.target; // There wasn't any need for you to use JSON.stringify on the id, since it is not an object if (TargetedElement.id.includes('DivId')) { let selected = document.querySelector('.Selected'); // This will be the flag for the selected element. if (selected) selected.classList.remove('Selected'); // Here we're removing the element that was selected before. TargetedElement.classList.add('Selected'); // Adding a class to the targeted element so we will able to select it later } }); setW.addEventListener('click', () => { // When the setwidth button is clicked let widthValue = document.getElementById('widthValue').value; document.querySelector('.Selected').style.width = `${widthValue}px`; // Look for the targeted element and set it's width. });

 * { 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; }.DivClass.Selected { /*Simple style to identify the selected element*/ border: 3px solid red; }

 <div id="amindivBox"> <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>

I write this code to make an editable container, where we can select our element and edit their properties, but the code doesn't run properly

Question

1 answers

solution1
0 2021-04-10 13:45:30

I write this code to make an editable container, where we can select our element and edit their properties, but the code doesn't run properly

Question

1 answers

solution1 0 2021-04-10 13:45:30

solution1
0 2021-04-10 13:45:30