При нажатии на SVG с изменить значение числа другого блока

Рейтинг: 0Ответов: 2Опубликовано: 30.06.2023

Есть такой блок с одним + и одним - , нужно сделать так , чтобы при нажатии на эти блоки менялись значения в зависимости от нажатой кнопки. Соответственно + должен увеличивать число на 1 , а - должен уменьшать это число на 1. Пробовал делать через какой то incrementalval но не получилось

введите сюда описание изображения

   .cell-select p{
  color: #252835;
  text-align: center;
  font-size: 25px;
  font-family: Roboto;
  line-height: 23px;
  margin-right: 25px;
  margin-left: 25px;
}
.cell-select{
  padding: 14px 23px 16px 22px;
  border-radius: 3px;
  border: 0.5px solid #EBEBEB;
  width: 100px;
  display: flex;
  align-items: center;
}
.cell h3{
  color: #252835;
  font-size: 15px;
  font-family: Roboto;
  line-height: 23px;
  margin-bottom: 16px;
}
.cell-selects{
  display: flex;
  width: 100px;
  justify-content: space-between;
  flex-wrap: wrap;
}
<div class="cell">
    <h3>Количество ячееек</h3>
    <div class="cell-select">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="9" cy="9" r="9" fill="#00E1A9"/>
            <line x1="5.59766" y1="9.25" x2="12.3978" y2="9.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
            </svg>

            <p>2</p>

            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="9" cy="9" r="9" fill="#00E1A9"/>
                <path d="M12.4545 8.27274H9.72726V5.54546C9.72726 5.24436 9.4829 5 9.18181 5H8.81819C8.5171 5 8.27274 5.24436 8.27274 5.54546V8.27274H5.54546C5.24436 8.27274 5 8.5171 5 8.81819V9.18181C5 9.4829 5.24436 9.72726 5.54546 9.72726H8.27274V12.4545C8.27274 12.7556 8.5171 13 8.81819 13H9.18181C9.4829 13 9.72726 12.7556 9.72726 12.4545V9.72726H12.4545C12.7556 9.72726 13 9.4829 13 9.18181V8.81819C13 8.5171 12.7556 8.27274 12.4545 8.27274Z" fill="white"/>
                </svg>
                
            
    </div>
</div>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

const minus = document.querySelector('#count-minus');

const add = document.querySelector('#count-add');

const result = document.querySelector('.result');

add.addEventListener('click', () => {
  result.innerText = +result.innerText + 1;
})

minus.addEventListener('click', () => {
  result.innerText = +result.innerText - 1;
})
.cell-select p {
  color: #252835;
  text-align: center;
  font-size: 25px;
  font-family: Roboto;
  line-height: 23px;
  margin-right: 25px;
  margin-left: 25px;
}

.cell-select {
  padding: 14px 23px 16px 22px;
  border-radius: 3px;
  border: 0.5px solid #EBEBEB;
  width: 100px;
  display: flex;
  align-items: center;
}

.cell h3 {
  color: #252835;
  font-size: 15px;
  font-family: Roboto;
  line-height: 23px;
  margin-bottom: 16px;
}

.cell-selects {
  display: flex;
  width: 100px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.result {
  user-select: none;
}

#count-minus,
#count-add {
  cursor: pointer;
}
<div class="cell">
  <h3>Количество ячееек</h3>
  <div class="cell-select">
    <svg id="count-minus" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="9" cy="9" r="9" fill="#00E1A9"/>
            <line x1="5.59766" y1="9.25" x2="12.3978" y2="9.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
            </svg>

    <p class="result">2</p>

    <svg id="count-add" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="9" cy="9" r="9" fill="#00E1A9"/>
                <path d="M12.4545 8.27274H9.72726V5.54546C9.72726 5.24436 9.4829 5 9.18181 5H8.81819C8.5171 5 8.27274 5.24436 8.27274 5.54546V8.27274H5.54546C5.24436 8.27274 5 8.5171 5 8.81819V9.18181C5 9.4829 5.24436 9.72726 5.54546 9.72726H8.27274V12.4545C8.27274 12.7556 8.5171 13 8.81819 13H9.18181C9.4829 13 9.72726 12.7556 9.72726 12.4545V9.72726H12.4545C12.7556 9.72726 13 9.4829 13 9.18181V8.81819C13 8.5171 12.7556 8.27274 12.4545 8.27274Z" fill="white"/>
                </svg>


  </div>
</div>

▲ 2

При нажатии на SVG с изменить значение числа другого блока

Предложу такой вариант.

Он будет работать на всех однотипных элементах

document.addEventListener('click', e => {
  const o = e.target.closest('svg')
  const op = e.target.closest('.cell')
  if (!op) return
  const os = op.querySelectorAll('svg')
  const oi = op.querySelector('p')
  let i = +oi.textContent
  if (o == os[0]) --i
  if (o == os[1]) ++i
  oi.textContent = i
})
.cell-select p{
  color: #252835;
  text-align: center;
  font-size: 25px;
  font-family: Roboto;
  line-height: 23px;
  margin-right: 25px;
  margin-left: 25px;
}
.cell-select{
  padding: 14px 23px 16px 22px;
  border-radius: 3px;
  border: 0.5px solid #EBEBEB;
  width: 100px;
  display: flex;
  align-items: center;
}
.cell h3{
  color: #252835;
  font-size: 15px;
  font-family: Roboto;
  line-height: 23px;
  margin-bottom: 16px;
}
.cell-selects{
  display: flex;
  width: 100px;
  justify-content: space-between;
  flex-wrap: wrap;
}
<div class="cell">
    <h3>Количество ячееек 1</h3>
    <div class="cell-select">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="9" cy="9" r="9" fill="#00E1A9"/>
            <line x1="5.59766" y1="9.25" x2="12.3978" y2="9.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
            </svg>

            <p>2</p>

            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="9" cy="9" r="9" fill="#00E1A9"/>
                <path d="M12.4545 8.27274H9.72726V5.54546C9.72726 5.24436 9.4829 5 9.18181 5H8.81819C8.5171 5 8.27274 5.24436 8.27274 5.54546V8.27274H5.54546C5.24436 8.27274 5 8.5171 5 8.81819V9.18181C5 9.4829 5.24436 9.72726 5.54546 9.72726H8.27274V12.4545C8.27274 12.7556 8.5171 13 8.81819 13H9.18181C9.4829 13 9.72726 12.7556 9.72726 12.4545V9.72726H12.4545C12.7556 9.72726 13 9.4829 13 9.18181V8.81819C13 8.5171 12.7556 8.27274 12.4545 8.27274Z" fill="white"/>
                </svg>
                
            
    </div>
</div>
<div class="cell">
    <h3>Количество ячееек 2</h3>
    <div class="cell-select">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="9" cy="9" r="9" fill="#00E1A9"/>
            <line x1="5.59766" y1="9.25" x2="12.3978" y2="9.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
            </svg>

            <p>2</p>

            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="9" cy="9" r="9" fill="#00E1A9"/>
                <path d="M12.4545 8.27274H9.72726V5.54546C9.72726 5.24436 9.4829 5 9.18181 5H8.81819C8.5171 5 8.27274 5.24436 8.27274 5.54546V8.27274H5.54546C5.24436 8.27274 5 8.5171 5 8.81819V9.18181C5 9.4829 5.24436 9.72726 5.54546 9.72726H8.27274V12.4545C8.27274 12.7556 8.5171 13 8.81819 13H9.18181C9.4829 13 9.72726 12.7556 9.72726 12.4545V9.72726H12.4545C12.7556 9.72726 13 9.4829 13 9.18181V8.81819C13 8.5171 12.7556 8.27274 12.4545 8.27274Z" fill="white"/>
                </svg>
                
            
    </div>
</div>