Change border of image on onClick

[Tenaciousmug]

I am trying to add a border around the base they select and then when they select another one, I want the previous one to go away and then high light that one.

This is my PHP code that outputs the bases:

$gender = $_GET['gender'];
// SQL Injection here?
$sql = "SELECT * FROM habases WHERE gender='".$gender."'";
$result = mysqli_query($cxn, $sql) or die(mysqli_error($cxn));
$baseCount = 0;
while ($row = mysqli_fetch_assoc($result))
{
$baseimage = $row['image'];
                                                                                    
$basesOutput .= "<input type=\"image\" id=\"".$baseCount."\" src=\"http://www.elvonica.com/".$baseimage."\" onclick=\"baseBorder(".$baseCount.");return false;\" value=\"".$baseimage."\" name=\"base\">";
$baseCount++;
}

I have a baseCount so each image ID is unique. The baseBorder() is the function that will change the border.

 

Here is the baseBorder() function:

var prevId;
function baseBorder(count)
{
if (prevId)
{
	$("#prevId").style.border="none";
}
else
{
	$("#count").style.border="2px solid #E8272C";
	prevId = count;
}
}

 

Can anyone help me out since it's not working?

[Tenaciousmug]

Ok sorry got it to work. Just can't get the unhighlight and highlight the other one now.

Here is my code:

var prevId;
function baseBorder(count)
{
if (prevId)
{
	document.getElementById(count).style.border="none";
}
else
{
	document.getElementById(count).style.border="2px solid #E8272C";
	prevId = count;
}
}

[Adam]

You're not actually making use of the prevId variable anywhere. Plus, you're only updating the new 'base' if there hasn't been a previous one.

 

Try this:

 

function baseBorder(count)
{
    if (prevId)
    {
        document.getElementById(prevId).style.border="none";
    }

    document.getElementById(count).style.border="2px solid #E8272C";
    prevId = count;
}