Случайный цвет фона, нажав на абзацы. Мой код выдает ошибку - PullRequest
Новая
       39

Случайный цвет фона, нажав на абзацы. Мой код выдает ошибку

1 голос
/ 25 марта 2019

Я делаю домашнее задание, которое состоит в том, чтобы раскрасить фон моих абзацев случайным образом, нажимая на них.Дело в том, что, когда я попробовал свой код, я получил сообщение об ошибке Uncaught "Cannot Read свойство 'style' of undefined. Я пытался сломать голову, но я действительно не понимаю, что я делаю неправильно. Можете ли вы мне помочь?

Заранее спасибо. 

<!DOCTYPE>
<html>
    <head>
       <meta charset=utf-8/>
        
    </head>
    <body> 
        <section>
            <p>Mussum Ipsum, cacilds vidis litro abertis. Cevadis im ampola pa arma uma pindureta. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Sapien in monti palavris qui num significa nadis i pareci latim.</p>
            <p>A ordem dos tratores não altera o pão duris. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.</p>
            <p>Leite de capivaris, leite de mula manquis sem cabeça. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Não sou faixa preta cumpadi, sou preto inteiris, inteiris.</p>  
        </section>
        <script>
        
            (function(){
               'use strict'
                
                var $ps = document.querySelectorAll('p');
              
                 for(var i = 0; i<$ps.length;i++){
                     
                    $ps[i].addEventListener('click', function(){
                        
                         $ps[i].style.backgroundColor = color;
                    });
                 }
     
                 function colors(){
                     var r = Math.floor((Math.random() * 256));
                     var g = Math.floor((Math.random() * 256));
                     var b = Math.floor((Math.random() * 256)); 
                     var color = 'rgb'+'('+r+','+g+','+b+')';
                }

            })();
        
        </script>
    </body>
</html>

Ответы [ 5 ]

1 голос
/ 25 марта 2019

Вы использовали $ps[i] внутри функции прослушивателя событий. Но значение i обновляется после каждой итерации цикла. В конце цикла значение i равно значению общего количества абзацев. Индекс абзаца начинается с 0. Итак, есть (Общее количество абзацев - 1) абзацев. Вот почему, когда он пытается получить доступ к $ps[i], он вызывает ошибку!

Вы можете исправить это, используя ключевое слово this вместо $ps[i] внутри функции прослушивателя событий. Здесь ключевое слово this указывает элемент, в который вставлен прослушиватель событий.

Вы просто использовали color внутри функции прослушивателя событий. Но цвет - это локальная переменная внутри colors() функции. Вы не можете получить доступ к локальной переменной за пределами функции. Поэтому вы должны использовать colors(). Также вам нужно вернуть цвет в конце функции colors(). 

for(var i = 0; i<$ps.length;i++){     
    $ps[i].addEventListener('click', function(){
        this.style.backgroundColor = colors();
    });
}


function colors(){
    var r = Math.floor((Math.random() * 256));
    var g = Math.floor((Math.random() * 256));
    var b = Math.floor((Math.random() * 256)); 
    var color = 'rgb'+'('+r+','+g+','+b+')';
    return color;
}
0 голосов
/ 26 марта 2019 
<!DOCTYPE>
<html>
    <head>
       <meta charset=utf-8/>
    </head>
    <body> 
        <section>
            <p>Mussum Ipsum, cacilds vidis litro abertis. Cevadis im ampola pa arma uma pindureta. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Sapien in monti palavris qui num significa nadis i pareci latim.</p>
            <p>A ordem dos tratores não altera o pão duris. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.</p>
            <p>Leite de capivaris, leite de mula manquis sem cabeça. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Não sou faixa preta cumpadi, sou preto inteiris, inteiris.</p>  
        </section>
        <script>
        document.addEventListener('click', ({target}) => {
          if( target.tagName !== 'P' ) return;
          const rand = () => Math.floor(Math.random() * 256);
          target.style.background = "rgb(R,G,B)".replace(/R|G|B/g, rand);
        });
        </script>
    </body>
</html>
0 голосов
/ 25 марта 2019

Это проблема с тем, как var обрабатываются внутри цикла, то есть каждый раз, когда вызывается ваш прослушиватель 'click', переменная i проверяется снова - и поскольку цикл уже завершен , это точно длина вашего массива элементов HTML. Вы можете проверить это, изменив внутреннюю часть слушателя события на простой console.log(i). Он будет печатать 3 каждый раз. Как это исправить? Например, вы можете взять информацию о том, что было выбранным элементом, из события, которое передается вашей функции: 

var $ps = document.querySelectorAll('p');

function changeBackgroundColor(e){
  e.target.style.backgroundColor = colors();
}

for(var i = 0; i<$ps.length;i++){

  $ps[i].addEventListener('click', changeBackgroundColor);
}

function colors(){
  var r = Math.floor((Math.random() * 256));
  var g = Math.floor((Math.random() * 256));
  var b = Math.floor((Math.random() * 256)); 
  return 'rgb'+'('+r+','+g+','+b+')';
}

Также обратите внимание, что ваш var color = (...) не будет виден вне области действия функции. Вам нужно вернуть его и прочитать возвращаемое значение.

0 голосов
/ 25 марта 2019

Несколько вещей:

Я не уверен, почему вы бы использовали замыкание функции для выполнения этого, но это на самом деле не проблема.

Создание функции colors без вызоваон не установит var color у вас внутри, что означает, что вы не можете его использовать, поэтому я добавил возвращаемое значение, чтобы получать новый цвет при каждом вызове функции.

Последнийпроблема заключалась в $ps[i].style: поскольку вы использовали var i, ps$[i], который вы используете в приемнике событий, не будет таким же, даже если он вызывается, вместо этого измените стиль цели события.

<!DOCTYPE>
<html>
    <head>
       <meta charset=utf-8/>
        
    </head>
    <body> 
        <section>
            <p>Mussum Ipsum, cacilds vidis litro abertis. Cevadis im ampola pa arma uma pindureta. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Sapien in monti palavris qui num significa nadis i pareci latim.</p>
            <p>A ordem dos tratores não altera o pão duris. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.</p>
            <p>Leite de capivaris, leite de mula manquis sem cabeça. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Não sou faixa preta cumpadi, sou preto inteiris, inteiris.</p>  
        </section>
        <script>
                'use strict'
                
                 var $ps = document.querySelectorAll('p');
              
                 for(var i = 0; i<$ps.length; i++){
                    $ps[i].addEventListener('click', function(e){
                         e.target.style.backgroundColor = color();
                    });
                 }
     
                 function color(){
                     var r = Math.floor((Math.random() * 256));
                     var g = Math.floor((Math.random() * 256));
                     var b = Math.floor((Math.random() * 256)); 
                     return 'rgb('+r+','+g+','+b+')';
                 }
        
        </script>
    </body>
</html>
0 голосов
/ 25 марта 2019

В функции прослушивателя щелчков ваш элемент доступен через thisФрагмент Aboce Yould работает.Это то, ради чего ты идешь? 

<!DOCTYPE>
<html>
    <head>
       <meta charset=utf-8/>
        
    </head>
    <body> 
        <section>
            <p>Mussum Ipsum, cacilds vidis litro abertis. Cevadis im ampola pa arma uma pindureta. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Sapien in monti palavris qui num significa nadis i pareci latim.</p>
            <p>A ordem dos tratores não altera o pão duris. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.</p>
            <p>Leite de capivaris, leite de mula manquis sem cabeça. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Não sou faixa preta cumpadi, sou preto inteiris, inteiris.</p>  
        </section>
        <script>
        
            (function(){
               'use strict'
                
                var $ps = document.querySelectorAll('p');
              
                 for(var i = 0; i<$ps.length;i++){
                     
                    $ps[i].addEventListener('click', function(){
                        
                         this.style.backgroundColor = colors();
                    });
                 }
     
                 function colors(){
                     var r = Math.floor((Math.random() * 256));
                     var g = Math.floor((Math.random() * 256));
                     var b = Math.floor((Math.random() * 256)); 
                     return 'rgb'+'('+r+','+g+','+b+')';
                }

            })();
        
        </script>
    </body>
</html>
...