Change css property with javascript

Question

When I click on the button "Change/Add text to this picture" and input values in the two fields with id="top-distance" and id="left-distance" then click on the button "Done", those values should be set as the top and left css properties of the #img-text element. I tried to do that in the doneFunction() below but it doesn't work:

	var pics = [['https://www.planwallpaper.com/static/images/ziiQN6XE5_UCWiCRXMT0B3p.jpg', 'Изображение 1'], ['https://www.planwallpaper.com/static/images/nature-wallpapers-free-download-1.jpg', 'Изображение 2'], ['https://www.planwallpaper.com/static/images/Beautiful_Wallpaper_1080p_Full_HD.jpg', 'Изображение 3'], ['https://www.planwallpaper.com/static/images/1080p-wallpaper-14854-15513-hd-wallpapers.jpg', 'Изображение 4'], ['https://static.pexels.com/photos/20974/pexels-photo.jpg', 'Изображение 5']];
	var counter = 0;
function showImage() {
 document.getElementById('main-pic').src = pics[counter][0];
 document.getElementById('img-text').innerHTML = pics[counter][1];
 //или чрез задаване на таг img тук: document.getElementById(...).innerHTML = '<img alt="Природа" class="main-pic" title="Природа" src="' + pics[counter][0] + '" />';
}
showImage();
function previousImg() {
 if (counter == 0) {
 alert('Няма предишно изображение.');
 } else {
 counter--;
 }
 showImage();
}
function nextImg() {
 if (counter == pics.length - 1) {
 alert('Няма следващо изображение.');
 } else {
 counter++;
 }
 showImage();
}
function addImg() {
 var someURL = prompt('Посочете url на изображението, което желаете да добавите.', 'https://www.picwallz.com/wp-content/uploads/2017/02/desktop-natural-beauty-cave-with-nature-pics-high-quality-for-mobile-phones-v-898x505.jpg');
 if (someURL == null) {
 alert('Вие отказахте добавянето на ново изображение.');
 return;
 }
 function isValidURL(stringURL) {
 var pattern = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
 if (!pattern.test(stringURL)) {
 alert("Не сте въвели url адрес, опитайте пак!");
 return false;
 } else {
 return true;
 }
 }
 if (isValidURL(someURL)) {
 pics.push([someURL, 'Text']);
 }
}
function changeAddText() {
 document.getElementById('hidden-div').style.display = 'block';
}
function doneFunction() {
 document.getElementById('hidden-div').style.display = 'none';
 pics[counter][1] = document.getElementById('new-text').value;
 //document.getElementById('img-text').style.top.value = document.getElementById('top-distance').value;
 var pText = document.getElementById('img-text');
 var topText = document.getElementById('top-distance').value;
 if (!isNaN(topText) && (topText <= 200)) {
 pText.style.top = topText;
 } else {
 alert('Please insert a number <=200.');
 }
 var leftText = document.getElementById('left-distance').value;
 if (!isNaN(leftText) && (topText <= 100)) {
 pText.style.left = leftText;
 } else {
 alert('Please insert a number <=100.');
 }
 showImage();
}

#main-pic {
 position: relative;
 width: 500px;
 height: 350px;
}
#img-text {
 color: white;
 position: absolute;
 top: 5px;
 left: 20px;
}
.button {
 height: 40px;
 background-color: lightblue;
}
#hidden-div {
 display: none;
}

<img id="main-pic" alt="Природа" title="Природа" /><br />
<p id="img-text"></p>
<br />
<input class="button" type="button" name="previous" value="Prev" onclick="previousImg(); return false;" />
<input class="button" type="button" name="next" value="Next" onclick="nextImg(); return false;" />
<input class="button" type="button" name="next" value="Add picture" onclick="addImg(); return false;" />
<input class="button" type="button" name="change-add-text" value="Change/Add text to this picture" onclick="changeAddText(); return false;" />
<div id="hidden-div">
 <input id="new-text" type="text" name="new-text" placeholder="Your text" value="Picture" />
 <input type="number" id="top-distance" name="topText" min="0" max="200" step="5" placeholder="top" />
 <input type="number" id="left-distance" name="leftText" min="0" max="100" step="5" placeholder="left" />
 <input class="button" type="button" name="done-button" value="Done" onclick="doneFunction(); return false;" />
</div>

Answer 1

You need to include the units when setting the position.

Change these lines:

pText.style.top = topText;
pText.style.left = leftText;

to:

pText.style.top = topText + 'px';
pText.style.left = leftText + 'px';