Не могу изменить цвет на клик javascript. Программа Etch-a-Sketch - PullRequest
Новая
       20

Не могу изменить цвет на клик javascript. Программа Etch-a-Sketch

0 голосов
/ 09 апреля 2020

Я довольно новичок в Javascript и сейчас прохожу курс "Проекты Odin". Одно из заданий состоит в том, чтобы создать программу гравировки эскиза с помощью javascript. По сути, когда вы наводите указатель мыши на эту сетку, она меняет цвет отдельного поля сетки, позволяя вам заполнить весь блок, если хотите. На этом этапе проекта я смог создать сетку, изменить цвет и фон при наведении мыши, а также очистить сетку, чтобы снова ее покрасить. Я хочу создать еще одну кнопку, которая просто меняет цвет того, что делает указатель мыши, с черного на зеленый.

С таким же успехом я могу спросить заранее, так как это связано, и у меня нет никакой земной идеи, с чего начать.

- (Необязательно): вместо простого изменения цвета например, ваша сетка от черного к белому (каждый раз) проходит через нее при изменении мыши на совершенно случайное значение RGB. Затем попробуйте каждый проход, просто добавьте еще 10% черного к нему, чтобы только после 10 проходов квадрат стал абсолютно черным.

Любая помощь будет принята с благодарностью. Я пытался понять это в течение нескольких часов, и я уверен, что это простое решение, но сейчас я почти бьюсь головой о стену. Спасибо за вашу помощь!

Javascript


// Javascript file for Etch a Sketch Project
//Completed by Alex Leloup for the Odin Project
// Will comment throughout file to explain what was done and 
// how code was arrived at. 

// Creat a webpage with 16x16 grid of square divs using javascript.

const gridContainer = document.getElementById("gridContainer"); // this takes the divs that were created by the below loop and stored 
// into cell variable, that were added to the container variable... and makes this information available to the ID attribute 
// in html
const newGridBtn = document.getElementById('newGridBtn'); 
const greenButton = document.getElementById('greenButton'); 

function makeRows(rows, cols) { //function named makeRows with variables of 'rows', 'cols' created.

gridContainer.style.setProperty('--grid-rows', rows); //'--grid-rows' creates a css variable(custom property) named grid-rows.
gridContainer.style.setProperty('--grid-cols', cols); //'--grid-cols' creates a css variable(custom property) named grid-cols.
  for (i = 0; i < (rows * cols); i++) { // loop will keep running as long as the total of cells is less that rows * cols.
   let cell = document.createElement("div"); //every time loop runs new div element created
    cell.innerText = (i + 1); // each variable 'cell' that contains the newly created div displays the number div it is.
    cell.onmouseover = function() {
      cell.style.backgroundColor = 'black';
      cell.style.color = 'white';
    };
    gridContainer.appendChild(cell).className = "grid-item"; // every time a new cell is added in the loop it receives class name of "grid-item"
}
}
 function turnGreen (){
  let cell = document.getElementsByClassName("grid-item");
      cell.onmouseover = function() {
      cell.style.backgroundColor = 'green';
      cell.style.color = 'white';
    };
 };


 function clearGrid (){
  let cell = document.getElementsByClassName("grid-item");
  for (i = 0; i < cell.length; i++){
    cell[i].style.backgroundColor = "white";
    cell[i].style.color = "black";
  }

 };


makeRows(16, 16); // uses the values of 16,16 within the makeRows function.

newGridBtn.addEventListener("click", function() {
  clearGrid();
}
);

greenButton.addEventListener("click", function() {
  turnGreen();
}
);

CSS

:root {             
    --grid-cols: 1;
    --grid-rows: 1;
  }

  /* this css defines the parameters of the #container div. */
  #gridContainer {
    display: grid; /* generates a block-level grid */
    grid-gap: 1px; /*The gap CSS property sets the gaps (gutters) 
    between rows and columns. It is a shorthand for row-gap and column-gap. */
    grid-template-rows: repeat(var(--grid-rows),1fr); /*Fr is a fractional unit. by using 1fr we are saying that all of the rows 
    will all be equal */
    grid-template-columns: repeat(var(--grid-cols), 1fr);
  width: 50%;
  margin: 0 auto; /*centers the grid in screen.*/
}
  /* the is the class the newly formed divs have. this class defines the parameters of the new divs. */
  .grid-item {
    padding: 2px;
    border: 1px solid white;
    text-align: center;
  }

  .my-color-class {
        background: black !important;
        color: white;
  }



  .buttons{
    text-align: center;
    margin-bottom:25px;
  }
  h1 {
      text-align: center;
  }

HTML 

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Etch a Sketch Project - created by Alex Leloup</title>
        <meta name="description" content="Etch-a-Sketch Program">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css.css">

    </head>
    <body>


        <h1>Etch-a-Sketch Project</h1>
            <div class="buttons">
                <button id="greenButton">Green</button>
                <button id="newGridBtn">Clear the Sketch Pad</button>
            </div>

            <div id="gridContainer"></div>



    <script type="text/javascript" src="spript.js"></script>
   </body>
</html>
...