Aggelos Sfakianos Aggelos Sfakianos - 1 year ago 60
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

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>

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

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];

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

function uploadImage() {


Any ideas why it doesnt work?


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 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( == "25px"){ = "0px";
  }else{ = "25px";