Javascript - changing widths of images

Question

I'm creating a tug of war website as a small project. My problem is that my javascript doesn't seem to want to work.

    <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>

Basically, when the page is loaded the randomTeam function is called, and when the button is pressed, it increments the size of your teams side, and decrements the side of the enemy's team. The problem is, it doesn't work at all. Could anyone help me see where this is going wrong? Thank you in advance :')

You're adding and subtracting "10px" but that's a string - so this isn't going to work correctly. You need to do the calculation on the integer value and then append the "px" so that it's valid value for the style.width (see epascarello for example) — G.H
– G.H, Commented Oct 27, 2015 at 19:43

epascarello · Accepted Answer · 2015-10-27 20:27:38Z

1

You can not just add 10px to the width. Convert the width to a number, add 10, than add px to it.

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

Do the same for the others and you will need a check for negative numbers.

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>

edited Oct 27, 2015 at 20:27

answered Oct 27, 2015 at 19:42

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rayon Over a year ago

parseFloat for pixel manipulations ? Any advantages over parseInt ?

epascarello Over a year ago

Well widths can be decimal values. parseInt would work just fine also.

Collectives™ on Stack Overflow

Javascript - changing widths of images

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related