时间戳

首页 > 解决方案 > 我编写这段代码来创建一个可编辑的容器，我们可以在其中选择我们的元素并编辑它们的属性，但是代码无法正常运行

javascript - 我编写这段代码来创建一个可编辑的容器，我们可以在其中选择我们的元素并编辑它们的属性，但是代码无法正常运行

问题描述

我想制作一个可编辑的容器，我们可以在其中轻松选择要编辑的框

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>

但是当我编写代码时，当我选择一个框并对其进行编辑时，我遇到了一个问题，它可以正常工作，但是当我选择另一个框来编辑我的所有属性时，我的所有属性都在两个框中运行，不仅适用于所选框...帮助我， 请。

标签： javascripthtmlcss

解决方案

我希望这就是你想要你的代码做的事情。

检查内联评论以获取我的解释。

// 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>

推荐阅读