Кнопка Javascript, которая изменяет свойства HTML-элементов, используя DOM Events - PullRequest
Новая
       17

Кнопка Javascript, которая изменяет свойства HTML-элементов, используя DOM Events

0 голосов
/ 03 сентября 2018

Я пытаюсь создать кнопку, которая меняет цвет элементов абзаца на случайный цвет всякий раз, когда пользователь нажимает кнопку. Кажется, это не работает, и мой текстовый редактор (скобки) говорит мне, что я допустил 12 ошибок, но на самом деле этого не вижу. Вот что я написал в конце моей веб-страницы: 

                    <button id="button1">Color Changer</button>
                </div>
            </div>
        </div>
        <script type="text/javascript" src=script.js></script>
    </body>
</html>

Это script.js: 

var button1El = document.getElementById("button1");
var paragraphsEl = document.getElementsByTagName("p");
var colorChange = function () {
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    for (var i = 0; i < paragraphsEl.length; i += 1) {
        paragraphsEl[i].style.color = rgb(r, g, b);
    }
}
button1El.addEventListener("click", colorChange);

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

1 Ответ

0 голосов
/ 03 сентября 2018

Мало что здесь не так, что я перечислил в комментарии выше:

  • paragraphsEl - это массив, вы не можете установить style.color для массива, вам нужно перебирать каждый из элементов в массиве, чтобы установить это значение
  • style.color примет строковое значение, вы пытаетесь вызвать функцию с именем rgb, которая не существует, передайте строку, чтобы сделать эту работу
  • Используйте целые числа в RGB с `Math.floor (Math.random () * 255)

Близко, но вы, кажется, забываете, как работает несколько вещей.

Помните, что разбиение проблемы на части и выяснение того, какие типы данных используются в определенных местах, поможет вам избежать многих из этих проблем. 

var button1El = document.getElementById("button1");
var paragraphsElements = document.getElementsByTagName("p");
var colorChange = function () {
  var r = Math.floor(Math.random() * 255);
  var g = Math.floor(Math.random() * 255);
  var b = Math.floor(Math.random() * 255);

  for(var i = 0; i < paragraphsElements.length; i++) {
    paragraphsElements[i].style.color = 'rgb(' + r + ', ' + g + ', ' + b + ')';
  }
}
button1El.addEventListener("click", colorChange);

Вот ссылка на кодовый блок, демонстрирующая работающий код, я допустил пару ошибок, потому что не тестировал его:

https://codepen.io/anon/pen/PdmKVd

...