Как изменить цвет абзацев с помощью JS и кнопки onclick? - PullRequest
Новая
       36

Как изменить цвет абзацев с помощью JS и кнопки onclick?

0 голосов
/ 26 декабря 2018

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

function chBackcolor(color) {
   document.body.style.background = color;
};
function changeColor(color) {
   document.getElementsByClassName('forma').onclick = changeColor;
}

А вот что я использовал в HTML: 

`<input type="button" value="Mode Psychédélique" 
     onclick="chBackcolor('magenta'), changeColor('blue')">

`

Заранее спасибо за вашу помощь!

Ответы [ 3 ]

0 голосов
/ 26 декабря 2018

Если вы проверяете документ getElementsByClassName, метод возвращает HTML-коллекцию, доступ к которой возможен как массив.Попробуйте 

document.getElementsByClassName('forma')[0].onclick = changeColor;

Если вы уверены, что только один элемент имеет такое имя класса.(В этом случае я предлагаю вам использовать селектор идентификатора вместо селектора имени класса)

Редактировать : я перепроверил ваш код и почувствовал, что .onclick = changeColor довольно странно

0 голосов
/ 26 декабря 2018

Чтобы изменить цвет каждого абзаца, вы можете использовать: 

document.querySelectorAll('.forma').forEach(function(ele) {
     ele.style.color = color;
});


function chBackcolor(color) {
    document.body.style.background = color;
};
function changeColor(color) {
    document.querySelectorAll('.forma').forEach(function(ele) {
        ele.style.color = color;
    });
}
<p class="forma">paragraph1...............</p>
<p class="forma">paragraph2...............</p>
<p class="forma">paragraph3...............</p>
<input type="button" value="Mode Psychédélique" onclick="chBackcolor('magenta'), changeColor('blue')">
0 голосов
/ 26 декабря 2018

Например, вы можете зациклить элементы HTMLCollection , возвращаемые getElementsByClassName , а затем установить цвет с помощью цикла for / *: 

function changeColor(color) {
  for (let e of document.getElementsByClassName('forma')) {
    e.style.color = color
  }
}


function chBackcolor(color) {
  document.body.style.background = color;
}

function changeColor(color) {
  for (let e of document.getElementsByClassName('forma')) {
    e.style.color = color
  }
}
<input type="button" value="Mode Psychédélique" onclick="chBackcolor('magenta'), changeColor('blue')">
<p class="forma">test1</p>
<p class="forma">test2</p>
<p class="forma">test3</p>

Другим вариантом может быть использование синтаксиса spread : 

function changeColor(color) {
    [...document.getElementsByClassName('forma')].forEach(e => e.style.color = color);
}


function chBackcolor(color) {
  document.body.style.background = color;
}

function changeColor(color) {
  [...document.getElementsByClassName('forma')].forEach(e => e.style.color = color);
}
<input type="button" value="Mode Psychédélique" onclick="chBackcolor('magenta'), changeColor('blue')">
<p class="forma">test1</p>
<p class="forma">test2</p>
<p class="forma">test3</p>
...