Units mistakes in JavaScript

It is often easy to make a mistake and forget about measuring units. For example:

javascriptlet width = 100;
elem.style.width = width; // oops...

It would be correct to specify the value in pixels:

javascriptlet width = 100;
elem.style.width = width + 'px';

Let's imagine that we want to increase the width by some value. To do this, we first need to read the width, then extract the number, add the desired value to it, add 'px' and only then write it all back:

javascriptlet widthPx = elem.style.width;
let widthNm = parseInt(widthPx);
elem.style.width = (widthNm + 30) + 'px';

Задание 1

Explain what is wrong with the following code:

html<div style="font-size: 16px;">
  text
</div>

javascriptlet elem = document.querySelector('div');
elem.style.fontSize = elem.style.fontSize + 2;

Задание 2

Explain what is wrong with the following code:

html<div style="font-size: 16px;">
  text
</div>

javascriptlet elem = document.querySelector('div');
elem.style.fontSize = parseInt(elem.style.fontSize + 2) + 'px';

Задание 3

Explain what is wrong with the following code:

html<div style="font-size: 2.5em;">
  text
</div>

javascriptlet elem = document.querySelector('div');
elem.style.fontSize = parseInt(elem.style.fontSize) + 2 + 'em';

Задание 4

A div is given:

html<div id="elem" style="width: 300px; height: 200px; border: 1px solid red;">
  text
</div>

There is also a button. On button click increase the width and height of the div by 50px.

Задание 5

A div is given:

html<div id="elem" style="width: 300px; height: 200px; border: 1px solid red;">
  text
</div>

There is also a button. On button click increase the width and height of the div by 10%.