Изменение цвета фона с помощью клика с использованием queryselector (JS) - PullRequest
Новая
       0

Изменение цвета фона с помощью клика с использованием queryselector (JS)

0 голосов
/ 06 марта 2020

Я написал этот код для этих кнопок, поэтому, когда я нажимаю на них, цвет фона меняется, но он не работает. в чем проблема? 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>JavaScript Background Color Switcher</title>
</head>
<body>
    <div class="canvas">
        <h1>Color Scheme Switcher</h1>
        <span  class="button" id="grey"></span>
        <span  class="button" id="white"></span>
        <span  class="button" id="blue"></span>
        <span  class="button" id="yellow"></span>
    </div>
    <script src="app.js"></script>   
</body>
</html> 

JS File:
document.querySelector('.button').addEventListener('click', function btn (id) {
  document.body.style.background = id
})

Ответы [ 3 ]

1 голос
/ 06 марта 2020

Есть две проблемы с вашим кодом:

1) document.querySelector вернет только первый соответствующий элемент

2) событие click не имеет возьмите функцию с такими аргументами.

Лучше код будет: 

document.querySelectorAll('.button')
  .forEach(btn => 
    btn.addEventListener('click', () => document.body.style.background = btn.id)
  );

(здесь я снова использую btn вместо того, чтобы использовать данные из события, потому что я уже знаю, какую кнопку вы ударил, так что не нужно возиться с ev.target...

1 голос
/ 06 марта 2020

Вы должны использовать .querySelectorAll, чтобы добавить слушателя для всех элементов .button.

Я также исправил синтаксис для вашего addEventListener

let btns = document.querySelectorAll('.button')
btns.forEach(btn => {
  btn.addEventListener('click', evt => {
    document.body.style.background = evt.target.id
  })
})
.button { cursor: pointer; }
<div class="canvas">
  <h1>Color Scheme Switcher</h1>
  <span class="button" id="grey">Grey</span>
  <span class="button" id="white">White</span>
  <span class="button" id="blue">Blue</span>
  <span class="button" id="yellow">Yellow</span>
</div>
0 голосов
/ 06 марта 2020

использовать document.querySelectorAll вместо document.querySelector 

let buttons = document.querySelectorAll('.button')

buttons.forEach(element=>{
element.addEventListener('click', (e) => {
  document.body.style.background = e.target.id
  })
})
span{
padding: 4px 6px;
border: 1px solid;
cursor: pointer;
}
#grey{
background :grey;
}

#white{
background :white;
}

#blue{
background :blue;
}

#yellow{
background :yellow;
}
    <div class="canvas">
        <h1>Color Scheme Switcher</h1>
        <span  class="button" id="grey">gray</span>
        <span  class="button" id="white">white</span>
        <span  class="button" id="blue">blue</span>
        <span  class="button" id="yellow">yellow</span>
    </div>

Можно

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...