时间戳

首页 > 解决方案 > 我选择的跨度未按预期更新

javascript - 我选择的跨度未按预期更新

问题描述

我正在编写一门课程，H1 应该将 RGB 更新为选定的 pickColor 但没有更新，我不确定我的错误在哪里。在我的 JS 页面中，当我编写“colorDisplay.textContent = pickColor;:”代码时，我期待它能够正常工作。谢谢！

         var colors = [
             "rgb(255, 0, 0)",
             "rgb(255, 255, 0)",
             "rgb(0, 255, 0)",
             "rgb(0, 255, 255)",
             "rgb(0, 0, 255)",
             "rgb(255, 0, 255)",
          ]

         var squares = document.querySelectorAll(".square");
         var pickedColor = colors[3];
         var colorDisplay = document.getElementById("colorDisplay");

          colorDisplay.textConent = pickedColor;


          for(var i = 0; i <squares.length; i++){
             squares[i].style.backgroundColor = colors[i];
          }
body {
            background-color: #232323;
          }

         .square {
            width: 30%;
            background: purple;
            padding-bottom: 30%;
            float: left;
            margin: 1.66%;
          }

          #container {
            margin: 0 auto;
            max-width: 600px;
          }

          h1 {
              color: white;
    
          }
<!DOCTYPE html>
        <html lang="en">
        <head>
            <title>Colour Game</title>
            <link rel="stylesheet" type="text/css" href="colorGame.css">
         </head>
         <body>

            <h1>The Great <span id="colorDisplay">RGB</span> Colour Game</h1>
             <div id="container">
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
            </div>
          <script type="text/javascript" src="colorGame.js"></script>
         </body>
         </html>

标签： javascripthtmlcss

解决方案

您需要更改才能innerText用作 colorDisplay.innerText = pickedColor;

要将单击事件实现为正方形，您可以处理为

squares.forEach(el => el.addEventListener('click', event => {
    var colorDisplay = document.getElementById("colorDisplay");
    colorDisplay.innerText = el.style.backgroundColor;
}));


var colors = [
             "rgb(255, 0, 0)",
             "rgb(255, 255, 0)",
             "rgb(0, 255, 0)",
             "rgb(0, 255, 255)",
             "rgb(0, 0, 255)",
             "rgb(255, 0, 255)",
          ]

         var squares = document.querySelectorAll(".square");
         var pickedColor = colors[3];
         var colorDisplay = document.getElementById("colorDisplay");

          colorDisplay.innerText = pickedColor;

 for(var i = 0; i <squares.length; i++){
             squares[i].style.backgroundColor = colors[i];
          }

squares.forEach(el => el.addEventListener('click', event => {
    var colorDisplay = document.getElementById("colorDisplay");
    colorDisplay.innerText = el.style.backgroundColor;
}));
body {
            background-color: #232323;
          }

         .square {
            width: 30%;
            background: purple;
            padding-bottom: 30%;
            float: left;
            margin: 1.66%;
          }

          #container {
            margin: 0 auto;
            max-width: 600px;
          }

          h1 {
              color: white;
    
          }
<!DOCTYPE html>
        <html lang="en">
        <head>
            <title>Colour Game</title>
            <link rel="stylesheet" type="text/css" href="colorGame.css">
         </head>
         <body>

            <h1>The Great <span id="colorDisplay">RGB</span> Colour Game</h1>
             <div id="container">
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
            </div>
          <script type="text/javascript" src="colorGame.js"></script>
         </body>
         </html>

推荐阅读