0

let song1 = document.querySelector('song_1');
let song2 = document.querySelector('song_2');
let song3 = document.querySelector('song_3');
let song4 = document.querySelector('song_4');
let song5 = document.querySelector('song_5');
let song6 = document.querySelector('song_6');
let colorArray = [song1,song2,song3,song4,song5,song6];

function changeColor() {
  colorArray.forEach(element => element.style.color = 'black');
    //здесь какая-то магическая формула, что б вывести элемент массива и перекрасить его в фиолетовый

}
colorArray.forEach( elem => elem.addEventListener('click', changeColor()));
body {
    background-color: #1C1B21;
}
html {
    width: 100%;
    height: 100%;
}
.container {
margin: 0 auto;
max-width: 1130px;
padding: 0px 15px;
}
.header {
background-image: url(img/headerbg.png);
 width: 100%;
background-repeat: no-repeat;
padding-top: 30px;
background-position: top center;


}
.nav__wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 322px;
}
.nav__list {
    display: flex;
    column-gap: 56px;
    line-height: 1.5;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: white;
}
.logo {
    padding-left: 95px;
    margin-right: 65px;
}
.new__song__title {
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.5;
    color: white;
    font-size: 48px;
}
.new__song__subtitle {
    font-family: 'Poppins', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 100px;
line-height: 1.5;
color: transparent;
-webkit-text-stroke: 1px white;
text-stroke: 1px white;

}
.new__song__section {
    margin-bottom: 50px;
}
.header__audio {
    display: flex;
    align-items: center;
    margin-bottom: 130px;

}
.playbtn {
cursor: pointer;
margin-right: 45px;
max-width: 25px;
}
.audiotrack__wrapper {
    background: #FFFFFF;
    max-width: 887px;
    width: 100%;
    height: 1px;
    cursor: pointer;
}
.audiotrack {
    background: #7A66CC;
    position: relative;
    min-height: 1px;
}

.mob__nav__menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
    background: #FFFFFF;
    
}

.closebutton {
    max-width: 90px;
    max-height: 50px;
    margin-left: auto;
    padding-right: 20px;
    margin-top: 10px;
    
}
.mob__nav__list {
    position: absolute;
    left: 20px;
    top: 10px;
    font-family: 'Poppins',sans-serif;

    font-size: 36px;
}
.mob_nav__item {
    margin-bottom: 20px;
}
.mob__nav__img {
    display:none;
    cursor: pointer;
}
.mob__nav__img img {
   max-width: 50px;
}

.introduce__list_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    
}
.introduce
.introduce__item {
  max-width:350px;
  column-gap: 30px;
}
.introduce__item {
    background-image: url(img/introduce2.png);
    background-repeat: no-repeat;
}

.introduce__item:first-child {
   background-image: url(img/introduce1.png);
   background-repeat: no-repeat;
}

.introduce__item:last-child {
background-image: url(img/introduce3.png);
background-repeat: no-repeat;
}
.introduce__text {
    margin-top: 210px;
    position: relative;
    color: #FFFFFF;
    font-family: 'Poppins',sans-serif;
    line-height: 1.5;
    font-size: 16px;
    font-weight: 400;
    background-color: rgba(122, 102, 204, 0.7);
    border-radius: 20px 0px;
    max-width: 350px;
}
.introduce__text p {
    padding-top: 21px;
    padding-left: 20px;
    padding-bottom: 21px;
    
}

header {
    margin-bottom: 179px;
}
.brightlights__title {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
}
.brightlights__text {
    font-family: 'Poppins';
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #FFFFFF;
max-width: 540px;
opacity: 0.7;
margin-right: 220px;
}
.brightlights__volume {
    margin-right: 30px;
    max-width: 64px;
    max-height: 31px;
}
.text__title {
    font-family: 'Poppins';

font-weight: 700;
font-size: 48px;
line-height: 1.5;

color: #FFFFFF;
}
.brightlights__content {
    display: flex;
}
.brightlights__main__img {
    
    width: 100%;
}
.brightlights__img {
    position: relative;
}
.brightlights__img::before {
content: url(img/brightlights2.png);
position: absolute ;
right: 95px;
bottom: 25%;

width: 100%;

}
.brightlights__info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 31px;
    grid-column-gap: 40px;
    
    
}
.brightlights__square {
    background: #7A66CC;
    border-radius: 10px 0px;
    max-width: 30px;
    width: 100%;
    
    padding-bottom: 30px;
    margin-right: 20px;
}
.brightlights__minicard {
    display: flex;
    align-items: center;
}

.brightslights__info__text {
    font-size: 18px;
    font-family: 'Poppins';
    font-weight: 600;
    line-height: 1.5;
    color: white;
}
.brightlights__review {
    
}

.brightlights__review__text {
    max-width: 520px;
    font-size: 18px;
    line-height: 1.5;
    font-family: 'Poppins';
    font-weight: 400;
    color: white;
    margin-bottom: 25px;
    
}
.brightlights__review__line {
    padding-bottom: 1px;
    width: 100%;
    max-width: 520px;
    background-color: white;
    margin-bottom: 25px;
    
}
.brightlights__review__link {
    color:#7A66CC;
    font-size: 18px;
    line-height: 1.5;
    font-family: 'Poppins';
    font-weight: 700;
    text-decoration: none;
    

    
}

.brightlights__review__wrapper {
    padding-left: 80px;
    padding-top: 50px;
}
.brightlights {
    margin-bottom: 236px;
}
.brightlights__review {
    border: 1px solid white;
    border-radius: 30px 0px;
    padding-bottom: 50px;
    position: relative;
    max-height: 313px;
    display: flex;
    align-items: center;
}
.brightlights__review::after {
    content: url("img/reviewimg.png");
    position: absolute;
    right: 0;
    padding-right: 80px;

}
.brightlights__review::before {
    content: url("img/quotes.png");
    position: absolute;
    padding-left: 80px;
}
.brightlights__review1 {
    margin-bottom: 265px;
}
.audio__img {
    margin-right: 60px;
    max-width: 510px;
    
}
.track__list {
    margin-bottom: 50px;
}
.lasttracks {
    display:flex;
    align-items: center;
    margin-bottom: 60px;
}
.lasttracks p {
    font-size: 48px;
    font-family: 'Poppins';
    font-weight: 700;
    color: white;
    line-height: 1.5;
}
.lasttracks__img {
    margin-right: 30px;
    max-height: 31px;
}

.audioplayer__wrapper {
    display: flex;
}
.audioplayer__section {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
}
.audiotrack__wrapper__section {
    max-width: 317px;
    min-height: 1px;
    max-height: 1px;
    background-color: #FFFFFF;
    width: 100%;
    cursor: pointer;
    
}
.audiotrack__section {
    min-height: 1px;
    max-height: 1px;
    max-width: 317px;
    background-color: #7A66CC;
    width: 20px;
}
.track__item {
    display:flex;
    align-items: center;    
}
.track__item:not(:last-child) {
    margin-bottom: 20px;
}
.song__number {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    font-family: 'Poppins';
    color: #FFFFFF;
margin-right: 20px;
opacity: 0.5;
padding-top: 5px;
}
.track__name {
    color: white;
    line-height: 1.5;
    font-family: 'Poppins';
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
}

.media__section {
    display: flex;
    align-items: center;
}
.media__section p {
    font-size: 24px;
    font-weight: 600;
    font-family: 'Poppins';
    color: white;
    line-height: 1.5;
    margin-right: 40px;
}
.media__section img {
    max-width: 90px;
    max-height: 30px;
}















@media (max-width: 1300px) {
    .nav__menu {
        display: none;
    }
    .mob__nav__img {
        display: block;
        margin-left: auto;
        

    }
    
}
@media (max-width: 500px) {
   .logo  {
    padding-left: 5px;
}
}

@media (max-width: 700px) {
.new__song__subtitle {
    font-size: 64px;
}
}
@media (max-width: 505px) {
    .new__song__subtitle { 
        font-size: 48px;
    
}
.new__song__title {
 font-size: 24px;           
}
}
@media (max-width: 1130px) {
    .introduce__list_wrapper {
       grid-template-columns: 1fr;
       
       row-gap: 30px;
       
    }
    .introduce__list {
        display: flex;
        justify-content: center;
    }
    
}
@media (max-width: 1000px) {
    .brightlights__content {
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .brightlights__text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 0px;
        margin-bottom: 50px;
        padding-left: 30px;
    }
    .brightlights__title {
        display: flex;
        justify-content: center;
        
    }
    .brightlights__volume {
        margin-right: 10px;
    }
    .text__title {
        font-size: 32px;
    }
    .brightlights__img {
        max-width: 320px;
    }
.brightlights__img::before {
    content: url(img/brightlights2.png);
    position: absolute ;
    top: 450px;
    right: 0;
    width: 150px;
    display: none;
    
    
    
    }
}
@media (max-width: 460px) {
    .brightlights__info {
        grid-template-columns: 1fr;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="null.css">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    

</head>
<body>
    <header class="header">
        <div class="container">
            <div class="header__wrapper">
              <div class="nav__wrapper">
                <div class="logo">
                <img class='header__logo'src="img/logo.png" alt="">
            </div>
            <div class="nav__menu">
                <ul class="nav__list">
                    <li class="nav__item">About</li>
                    <li class="nav__item">News</li>
                    <li class="nav__item">Music</li>
                    <li class="nav__item">Media</li>
                    <li class="nav__item">Tours</li>
                    <li class="nav__item">Contacts</li>
                </ul>
              </div>
              <div class="mob__nav__img">
                <img src="img/mobilemenu.png" alt="">
              </div>
                <div class="mob__nav__menu">
                  <ul class="mob__nav__list">
                  <li class="mob_nav__item">About</li>
                    <li class="mob_nav__item">News</li>
                    <li class="mob_nav__item">Music</li>
                    <li class="mob_nav__item">Media</li>
                    <li class="mob_nav__item">Tours</li>
                    <li class="mob_nav__item">Contacts</li>
                  </ul>
                  <img src="img/closebutton.png" class="closebutton" alt="">
                </div>
            </div>
              </div>
              <div class="new__song__section">
                <div class="new__song__title">New Single</div>
                <div class="new__song__subtitle">War For Love</div>
              </div>
              <div class="header__audio">
                <audio src="audio/sexfirsttime.mp3" class="audio"></audio>
                <img src="img/playbtn.png" alt="" class="playbtn">
                <div class="audiotrack__wrapper">
                   
                  <div class="audiotrack">
                  
                    </div>
                    
                    
                </div>
                <div class="audio__timer">
                  <div class="current__time"></div>
                  <p class="all__time"></p>
                </div>
              </div>
              <div class="introduce__list">
              <div class="introduce__list_wrapper">
                <div class="introduce__item">
                  <div class="introduce__text">
                    <p>Working on my upcoming full-lenth<br>
                      album that`s releasing later this year.</p>
                  </div>
                </div>
                <div class="introduce__item">
                  <div class="introduce__text">
                    <p>Halloween vibes.<br>
                      Listen my new track!</p>
                  </div>
                </div>
                <div class="introduce__item">
                 <div class="introduce__text">
                  <p>WarForLove is OUT NOW!!<br>
                  Stream it here!</p>
                </div>
                </div>
                </div>
              </div>
              </div>
            </div>
        </div>
        </header>
        <section class="brightlights">
          <div class="container">
          <div class="brightlights__wrapper">
            <div class="brightlights__title">
              <img src="img/brightlightsvolume.png" alt="" class="brightlights__volume">
              <p class="text__title">BrightLights</p>
            </div>
            <div class="brightlights__content">
            <div class="brightlights__text">
              <p style="margin-bottom:40px;">Bright Lights is a multi-Grammy nominated singer, songwriter, DJ and record producer. She has written for numerous 
              </p>
              <p style="margin-bottom:60px;">pop stars including Britney Spears, Justin Bieber, Usher and Beyoncé. Her catalog has amassed over 1 billion streams worldwide. More than 100 million of those streams can be attributed to her artist career and include such hits as Porter Robinson's "Language," 3LAU's "How You Love Me" and her own single "Runaway." She was also a featured vocalist on Zedd's #1 Clarity album. Her latest music video, "Put It Down," reached 1 million streams in the first week, releasing independently. Bright Lights is currently in the studio working on a self-produced album slated for release in 2020. </p>
              <div class="brightlights__info">
              <div class="brightlights__minicard">
                <div class="brightlights__square"></div>
                <p class="brightslights__info__text">Based in: Los Angeles</p>
              </div>
              <div class="brightlights__minicard"> 
                <div class="brightlights__square"></div>
              <p class="brightslights__info__text">Founded in 2011</p>
            </div>
              <div class="brightlights__minicard"> 
                <div class="brightlights__square"></div>
              <p class="brightslights__info__text">Genre: #DancePop</p>
            </div>
              <div class="brightlights__minicard"> 
                <div class="brightlights__square"></div>
              <p class="brightslights__info__text">Label: 333 Recordings</p>
            </div>
            </div>
          </div>
            <div class="brightlights__img">
              <img src="img/brightlights1.png" alt="" class="brightlights__main__img">
            </div>
          </div>
          
          </div>
        </div>
        </section>
       
        <section class="brightlights__review1">
          <div class="container">
          <div class="brightlights__review">
            <div class="brightlights__review__wrapper">
              <div class="brightlights__review__text"> “In an age where mainstream music is designed to be as
                easily consumed as possible, listening to Bright Lights is
                refreshing, to say the least. Her sound is perfect for radio
                but complex enough to separate her from other pop newcomers.”</div>
              <div class="brightlights__review__line"></div>
              <a href="" class="brightlights__review__link">PopULove.net</a>
            </div>
            
          </div>
        </div>
        </section>
        <section class="audioplayer">
          <div class="container">
            <div class="audioplayer__wrapper">
              <div class="audio__img">
                <img src="img/audioimg.png" class="player__img" alt="">
              </div>
              <div class="player">
                <div class="lasttracks">
                  <img src="img/brightlightsvolume.png" alt="" class="lasttracks__img">
                  <p>Last tracks</p>
                </div>
                <div class="audioplayer__section">
                  <img src="img/playbtn.png" style="margin-right:45px;" alt="">
                  <img src="img/pausebtn.png" style="max-width:30px; display:none;" alt="">
                  <div class="audiotrack__wrapper__section">
                    
                    <div class="audiotrack__section"></div>
                  </div>
</div>
                  <div class="track__list">
                    <audio src="audio/audio1.mp3" class="audio__section"></audio>
                    <div class="track__item">
                      <p class="song__number">01</p>
                      <p class="track__name song_1">3LAU, Bright Lights — How You Love Me</p>
                    </div>
                    <div class="track__item" id="2">
                      <p class="song__number">02</p>
                      <p class="track__name song_2">Bright Lights, Kaleena Zanders, Kandy — War For Love
                      </p>
                    </div>
                    <div class="track__item" id="3">
                      <p class="song__number">03</p>
                      <p class="track__name song_3">Pink Is Punk, Benny Benassi, Bright Lights — Ghost</p>
                    </div>
                    <div class="track__item" id="4">
                      <p class="song__number">04</p>
                      <p class="track__name song_4">Hardwell, Dyro, Bright Lights — Never Say Goodbye</p>
                    </div>
                    <div class="track__item" id="5">
                      <p class="song__number">05</p>
                      <p class="track__name song_5">Zeds Dead, Dirtyphonics, Bright Lights — Where Are You Now</p>
                    </div>
                    <div class="track__item" id="6">
                      <p class="song__number song_6">06</p>
                      <p class="track__name">Zedd, Bright Lights — Follow You Down
                      </p>
                    </div>
                  </div>
                  <div class="media__section">
                    <p>Follow me:</p>
                    <img src="img/Spotifysection.png" style="margin-right: 30px;" alt="">
                    <img src="img/Itunessection.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
   <script src="script.js"></script>
</body>
</html>

У меня есть список песен, мне нужно что б при клике на конкретный элемент цвет текста этого элемента становился фиолетовым, а в других элементах списка цвет был белым и так по кругу. Конечно можно просто добавить к каждому элементу ивент, что б при его срабатывании цвет конкретно этого элемента становился фиолетовым, а остальные белыми, но код будет очень большой и мне кажется можно сделать как-то по-другому, более динамично что-ли. Поэтому подумал, что можно сделать как на скрине, но оно не работает и мне кажется что я вообще не то делаю. Не пишите шо я глупый, я это знаю, поэтому я уже не глупый. Заранее спасибо <3

3
  • Покажи свой html и css...
    – ksa
    Commented 11 февр. 2023 в 16:48
  • закинул хтмлку и ксску
    – 100.1
    Commented 11 февр. 2023 в 16:52
  • Еще бы и код текстом, а не картинкой...
    – SwaD
    Commented 11 февр. 2023 в 16:58

2 ответа 2

0

Передаем в функцию индекс элемента, на котором сработало событие и пробегая по массиву красим в нужный цвет

function changeColor(id) {
    colorArray.forEach((item, index) => {
        item.style.color = index === id ? 'red' : 'black'
    })
}

colorArray.forEach((item, index) => {
    item.addEventListener('click', (e) => {
        changeColor(index)
    })
});
1
  • Спасибо большое <3
    – 100.1
    Commented 11 февр. 2023 в 17:21
0

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

Я не совсем понял фразу "и так по кругу"...

Но вот пример как при клике цвета меняются.

const ob = document.querySelector('.track__list')
ob.addEventListener('click', e => {
  const o = e.target.closest('.track__item')
  if (!o) return
  const ok = o.querySelector('.track__name').classList.contains('on')
  ob.querySelectorAll('.on, .off').forEach(o => {
    o.classList.remove('on', 'off')
  })
  if (ok) return
  o.querySelector('.track__name').classList.add('on')
  ob.querySelectorAll('.track__name:not(.on)').forEach(o => {
    o.classList.add('off')
  })
})
.on {
  color: SlateBlue;
}

.off {
  color: #fff;
}
<div class="track__list">
  <audio src="audio/audio1.mp3" class="audio__section"></audio>
  <div class="track__item">
    <p class="song__number">01</p>
    <p class="track__name song_1">3LAU, Bright Lights — How You Love Me</p>
  </div>
  <div class="track__item" id="2">
    <p class="song__number">02</p>
    <p class="track__name song_2">Bright Lights, Kaleena Zanders, Kandy — War For Love
    </p>
  </div>
  <div class="track__item" id="3">
    <p class="song__number">03</p>
    <p class="track__name song_3">Pink Is Punk, Benny Benassi, Bright Lights — Ghost</p>
  </div>
  <div class="track__item" id="4">
    <p class="song__number">04</p>
    <p class="track__name song_4">Hardwell, Dyro, Bright Lights — Never Say Goodbye</p>
  </div>
  <div class="track__item" id="5">
    <p class="song__number">05</p>
    <p class="track__name song_5">Zeds Dead, Dirtyphonics, Bright Lights — Where Are You Now</p>
  </div>
  <div class="track__item" id="6">
    <p class="song__number song_6">06</p>
    <p class="track__name">Zedd, Bright Lights — Follow You Down
    </p>
  </div>
</div>

4
  • Спасибо большое, я имел в виду, что бы при клике на другой элемент он так же менял цвет, а предыдущий снова становился белым
    – 100.1
    Commented 11 февр. 2023 в 17:13
  • @100.1, у меня так и работает... :)
    – ksa
    Commented 11 февр. 2023 в 17:15
  • Да это я про фразу "по кругу" имел в виду, ваш код полностью рабочий, правда есть детали, непонятные мне, щас буду гуглить) спасибо <3
    – 100.1
    Commented 11 февр. 2023 в 17:17
  • @100.1, что не понятно - спрашивай. Я допишу комментарии или добавлю ссылки на статьи и документацию...
    – ksa
    Commented 11 февр. 2023 в 17:18

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.