Javascript - изменение ширины изображений

Question

Я создаю сайт перетягивания каната в качестве небольшого проекта. Моя проблема в том, что мой javascript, похоже, не хочет работать.

<script> 
     function randomTeam(){ 
      var TeamV = Math.floor((Math.random() *2) + 1) 
      document.getElementById("TeamHeader").innerHTML = "Team: " + TeamV; 
      return TeamV; 
     } 

     function changeWidth(TeamV){ 
      var MetreLeftV = document.getElementById('MetreLeft'); 
      var MetreRightV = document.getElementById('MetreRight'); 
      if(TeamV == 1){ 
       MetreLeftV.style.width += '10px'; 
       MetreRightV.style.width -= '10px'; 
      } 
      else if(TeamV == 2){ 
       MetreRightV.style.width += '10px'; 
       MetreLeftV.style.width -= '10px'; 
      } 
     } 
    </script> 

В основном, когда страница загружена функция randomTeam называется, и при нажатии на кнопку, он увеличивает размер вашей команды стороны, и вычитает сторону команды противника. Проблема в том, что она вообще не работает. Может ли кто-нибудь помочь мне увидеть, где это происходит? Заранее спасибо: ')

Answer 1

Вы не можете просто добавить 10px к ширине. Преобразуйте ширину в число, добавьте 10, а затем добавьте px.

MetreLeftV.style.width = (parseFloat(MetreLeftV.style.width) + 10) + "px" 

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

function randomTeam() { 
 
    var TeamV = Math.floor((Math.random() * 2) + 1) 
 
    document.getElementById("TeamHeader").innerHTML = "Team: " + TeamV; 
 
    return TeamV; 
 
} 
 

 
function changeWidth(TeamV) { 
 
    var MetreLeftV = document.getElementById('MetreLeft'); 
 
    var MetreRightV = document.getElementById('MetreRight'); 
 
    console.log(parseFloat(MetreLeftV.style.width) + 10 + 'px') 
 
    if (TeamV == 1) { 
 
    MetreLeftV.style.width = parseFloat(MetreLeftV.style.width) + 10 + 'px'; 
 
    MetreRightV.style.width = parseFloat(MetreRightV.style.width) - 10 + 'px'; 
 
    } else if (TeamV == 2) { 
 
    MetreLeftV.style.width = parseFloat(MetreLeftV.style.width) - 10 + 'px'; 
 
    MetreRightV.style.width = parseFloat(MetreRightV.style.width) + 10 + 'px' 
 
    } 
 
} 
 

 
window.setInterval(function() { 
 
    var move = randomTeam(); 
 
    changeWidth(move); 
 
}, 1000);

#MetreLeft { 
 
    background-color: red 
 
} 
 
#MetreRight { 
 
    background-color: yellow 
 
}

<div id="TeamHeader"></div> 
 
<div id="MetreLeft" style="width:200px">Left</div> 
 
<div id="MetreRight" style="width:200px">Right</div>