如何解决我写这段代码是为了制作一个可编辑的容器，我们可以在其中选择我们的元素并编辑它们的属性，但代码无法正常运行
我想制作一个可编辑的容器，我们可以在其中轻松选择要编辑的框
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>但是当我编写代码时，当我选择一个框并对其进行编辑时，我遇到了一个问题，它可以正常工作，但是当我选择另一个框来编辑我在两个框中运行的所有属性时，不仅针对所选框.. . 请帮帮我。
解决方法
我希望这是您希望代码执行的操作。
检查内嵌注释以获得我的解释。
// 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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
