I got the following code, and i want to have my i variable to be read by the select value and then every time i change the select value add the new value to the older one, but i dont know why it doesnt work 

```js
var tamany = document.getElementById('tam');
var i = document.getElementById('tam').value
var ancho = "300";
var largo = "300px";
var cc = parseInt(ancho) + parseInt(i);

function aa() {
document.getElementById("change").style.width = (cc + '+px+');
document.getElementById("change").style.height = (largo);
})
```

```css
ul {
  margin-top: -700px;
}
#man {
  z-index: 500;
}
#pantalon {
  position: absolute;
  margin-top: 400px;
  margin-left: -500px;
  z-index: -1;
}
#change {
  position: absolute;
  margin-top: 100px;
  z-index: -2;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="man" src="man.png" height="900">
<img id="pantalon" src="http://static.bershka.net/4/photos2/2015/I/0/2/p/5337/506/594/5337506594_1_2_4.jpg?t=ts" height="500">
<img id="change" src="http://static.pullandbear.net/2/photos/2015/I/0/2/p/9592/500/800/9592500800_2_1_1.jpg?timestamp=1437741171705" height="500" width="500">
<button onclick="aa()">Cambiar</button>

<select id="tam" name="tam1">
  <option value="none"></option>
  <option value="100">100</option>
  <option value="200">-100</option>
</select>
```