Aggelos Sfakianos Aggelos Sfakianos - 6 months ago 20
HTML Question

Changing picture frame with toggle button

Ok so we have a simple user info editing page.I want to create a toggle button which swaps profile picture border-radius from 0 to 25 and backwards.But the 2nd part doesnt work.I created

if
to check if the boarder radius is 25 already so it will make it 0, but it does not work.Here is my code

<!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>


Any ideas why it doesnt work?

Answer

You are uselessly assigning variables in your function by the looks of it.

There is no need to declare shape2. Just declare shape once and then use that to check. Also make sure to check shape.style.borderRadius against a string like "25px" as that will be returned.

Try something like this:

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