更改圖片框與切換按鈕

好吧，所以我們有一個簡單的用戶信息編輯頁面。我想創建一個切換按鈕，交換輪廓圖片邊界半徑從0到25和倒退。但第二部分does not work.I創建if檢查邊境半徑25已經如此它將使0，但它並不work.Here是我的代碼更改圖片框與切換按鈕

<!DOCTYPE html> 
<html> 
<head> 

</head> 
<body onload="buildImage();"> 
<div class="contents" id="content"></div> 
<button onclick="changeImage()">NextImage</button> 
<button onclick="changeShape()">ChangeShape</button> 
<button onclick="uploadImage()">Upload Image</button> 
</body> 

<script> 
var images = [ 'profile1.png', 'profile2.png','profile3.png']; 
var index = 0; 
var array_length = 3; 
function buildImage() { 
    var img = document.createElement('img') 
    img.src = images[index]; 
    document.getElementById('content').appendChild(img); 
} 

    function changeImage(){ 
    var img =  document.getElementById('content').getElementsByTagName('img')[0] 
    index++; 
    index = index % array_length; 
    img.src = images[index]; 
} 
function changeShape(){ 
    var shape = document.getElementById('content').getElementsByTagName('img')[0].style.borderRadius = "25px"; 
    if(shape.style.borderRadius == 25){ 
    var shape2 = document.getElementById('content').getElementsByTagName('img')[0].style.borderRadius = "0px"; 
    } 

} 
function uploadImage() { 
images.push("profile4.png"); 
array_length++; 

} 
</script> 
</html>

任何想法，爲什麼它不工作？

來源

2016-05-19 Aggelos Sfakianos

改變25爲「25像素」或「25」沒question.Can你給我如何在新增寄宿生的提示工作，要麼 –

你是無用地分配你的功能變量的外觀。

沒有必要聲明shape2。只需聲明一次形狀，然後用它來檢查。還要確保檢查shape.style.borderRadius對象像「25px」的字符串，因爲這將返回。

嘗試是這樣的：

function changeShape(){ 
    var shape = document.getElementById('content').getElementsByTagName('img')[0]; 
    if(shape.style.borderRadius == "25px"){ 
    shape.style.borderRadius = "0px"; 
    }else{ 
    shape.style.borderRadius = "25px"; 
    } 
}

來源

2016-05-19 19:27:17 Maantje

和一個額外的相同的圖片，並且在ChangeShape函數被調用時也可以進行修改。 –

@AggelosSfakianos你想要一個始終顯示並且相同的邊框嗎？如果是這種情況，只需在其中添加一些CSS即可。img {{0} {0} {0} {0} {border} 5px solid #ccc; }' – Maantje

是的，沒有。我想添加一個邊框，但是我希望邊框隨着圖片一起改變形狀，只要函數被調用 –

更改圖片框與切換按鈕

回答

相關問題