@MrTomMus

JavaScript В чем ошибка?

4 разноцветных квадрата должны двигаться и перемещаться в серый квадрат, меняя его цвет.
<style>
     
     div[id$='Box']{
       width: 100px;
       height: 100px;
       margin-bottom: 5em;
       border: 2px solid black;
       cursor: pointer;

     }
      #yellowBox{
        background: yellow;
      }
      #greenBox{
        background: green;
      }
      #blueBox{
        background: blue;
      }
      #redBox{
        background: red;
      }
      #gray{
        width: 300px;
        height: 300px;
        background: gray;
        margin: auto;
        position: absolute;
        left: 50%;
        top: 200px;
      }
    </style>
  </head>
  <body>
    <div id="gray"></div>
    <div id="yellowBox"></div>
    <div id="greenBox"></div>
    <div id="blueBox"></div>
    <div id="redBox"></div>
    
    <script>
      
      let boxs = document.querySelectorAll("div[id$='Box']");
      for(box of boxs){
       box.onmousedown = function(e){
         console.log("click")
         box = e.correntTarget;
         box.style.position = "absolute";
         box.style.zIndex = 1000;
         function moveAt(event){
         let x = event.clientX-50;
         let y = event.clientY-50;
         box.style.top = y+"px"
         box.style.left = x+"px"
         }
      
       document.addEventListener('mousemove', moveAt);
       
       document.onmouseup = function(){
         document.removeEventListener('mousemove', moveAt);
        }
        
         let box_top = box.getBoundingClientRect().top;
         let box_left = box.getBoundingClientRect().left;
         let box_right = box.getBoundingClientRect().right
         let box_bottom = box.getBoundingClientRect().bottom
         
         
         let gray_top = gray.getBoundingClientRect().top;
         let gray_left = gray.getBoundingClientRect().left;
         let gray_right = gray.getBoundingClientRect().right;
         let gray_bottom = gray.getBoundingClientRect().bottom;
         
         
         if(box_left>gray_left && box_right < gray_right && box_top > gray_top && box_bottom < gray_bottom){
           
           gray.style.background = box.style.background;
           box.style.visibility = "hidden";
         }
        } 
       }


lesson_11.php:53 Uncaught TypeError: Cannot read property 'style' of undefined
at HTMLDivElement.box.onmousedown (lesson_11.php:53)

Выдает такую ошибку, что то там со стилями не так.
  • Вопрос задан
  • 128 просмотров
Пригласить эксперта
Ответы на вопрос 1
Легче сказать что здесь не ошибка
1) for (box of boxs) тут let специально не вставили?
2) box.onmousedown = function(e) почему не вынесли обработчик в функцию и не назначаете его, а каждый раз создаете новую функцию?
3) box = e.correntTarget это какой-то говнокод на основе говнокода. У обработчиков событий, если они сделаны в виде обычной функции this ссылается на dom элемент, можно достать div из него. Кроме того именно в вашей странной реализации переменная box уже содержит нужный дом элемент, он пришел из замыкания, и зачем вы его переназначаете непонятно.
4) Функцию moveAt нужно переписать так, чтобы он не зависела от box из замыкания, так чтобы ее можно было вынести из цикла а не создавать на каждой итерации новую.
5) За всем этим хаосом вы банально не видите опечатки в слове correntTarget.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽