別の要素以外のAppendChild

2020-08-02 javascript html css

私はJSの初心者です。直接お詫びをお願いします。

appendchildを使用してシンプルなdivを作成しています。このアクションはボタンから行われます。問題は、ボタンを押すたびに、それ以外に、前の正方形の下に新しい正方形が作成されることです。それ以外に作成するにはどうすればよいですか?

<html>
    <head>
        <title>RocketSeat - Challenge 1</title>
    </head>
    <body>
        <button onclick="MakeSquare()" style="margin-top: 100px;">Make a square</button>

    </body>
    <script>
        function MakeSquare(){
            const square = document.createElement('div')
            const elementBody = document.querySelector('body')
            square.style.backgroundColor ='red'
            square.style.width = '50px'
            square.style.height = '50px'
            square.style.marginTop= '50px'
            square.style.border = '1px solid red'
            elementBody.appendChild(square)
        }

    </script>
</html>

Answers

CSS(スタイリング)の問題のようです、これを試してください:

<html>

<head>
  <title>RocketSeat - Challenge 1</title>
</head>

<body>
  <button onclick="MakeSquare()" style="margin-top: 100px;">Make a square</button>

</body>
<script>
  function MakeSquare() {
    const square = document.createElement('div')
    const elementBody = document.querySelector('body')
    square.style.backgroundColor = 'red'
    square.style.width = '50px'
    square.style.height = '50px'
    square.style.marginTop = '50px'
    square.style.border = '1px solid red'
    square.style.display = 'inline-block' // added display styling
    elementBody.appendChild(square)
  }
</script>

</html>

これはスタイリングの問題です。このシナリオでは、スタイルをコードから分離した方がきれいな場合があります。あなたはそれにクラスを与えることによってこれを行うことができます。また、レイアウトをより適切に制御できるように、正方形の周りにラッパーを提供するように命令します。次に、ラッパーでcss変数を指定してカスタマイズをさらに改善し、必要に応じてスタイリングを制御できるようにします。ここに例があります:

const setup = () => {
  makeSquare();
  makeSquare();
  makeSquare();
  
  changeSquareColorToPink();
  changeSquareDefaultColorToBlue();
}


function makeSquare() {
  const square = document.createElement('div');
  const squareWrapper = document.querySelector('.square-wrapper');
  square.classList.add('square');
  squareWrapper.appendChild(square)
}

function changeSquareColorToPink() {
    const square = document.querySelector('.square:nth-child(1)');
  square.style.setProperty('--square-color', 'pink');
}

function changeSquareDefaultColorToBlue() {
    const squareWrapper = document.querySelector('.square-wrapper');
  squareWrapper.style.setProperty('--square-color', 'blue');
}

window.addEventListener('load', setup)
.bt_makeSquare {
  margin-top: 6em;
}
.square-wrapper {
  --square-color: red;
  --square-size: 50px;
  margin-top: 2em;
}
.square {
  margin: 1em;
  display: inline-block;
  width: var(--square-size);
  height: var(--square-size);
  box-sizing: border-box;
  border: 1px solid var(--square-color);
  background-color: var(--square-color);
}
<button class="bt_makeSquare" onclick="makeSquare()">Make a square</button>
<div class="square-wrapper"></div>

Related