JavaScriptでCSSプロパティを変更する

Question

「この画像にテキストを変更/追加する」をクリックし、id = "top-distance"とid = "left-distance"の2つのフィールドに値を入力し、 「完了」ボタンをクリックすると、これらの値は#img-text要素のtopとleft CSSプロパティとして設定されます。私は以下のdoneFunction()であることを実行しようとしましたが、それは動作しません：

\t 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']]; 
 
\t 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

あなたが位置を設定するときに単位を含める必要があります。

変更し、これらの行：

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

へ：

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