When one of the radio buttons is clicked, it should give an outer border with color. When the other radio button is clicked, it should give an inner border that surrounds the image.
<!DOCTYPE html>
<html>
<head>
<script>src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<style>
.container1{
float:left;
width:33%;
height:456px;
display:inline-block;
}
#h{
color:black;
font-style:none;
}
.grid{
padding:10px;
width:93%;
border:1px solid white;
height:310px;
}
img{
margin:5px;
}
.right1{
padding-left:80px;
display:inline-block;
width:20%;
height:300px;
border:1px solid black;
}
#tele1{
border:1px solid white;
}
#tele2{
border:1px solid white;
}
#tele3{
border:1px solid white;
}
#tele4{
border:1px solid white;
}
#button1{
width:100px;
margin-top:40px;
}
#button2{
width:100px;
margin-top:20px;
}
.right2{
float:right;
width:30%;
height:300px;
}
</style>
<script>
$(document).ready(function(){
$("#kar1").click(function(){
var thik=$("#kar1").attr('src');
$("#tele1").attr('src',thik)
$("#tele1").fadeToggle();
});
$("#kar2").click(function(){
var thik1=$("#kar2").attr('src');
$("#tele2").attr('src',thik1)
$("#tele2").fadeToggle();
});
$("#kar3").click(function(){
var thik2=$("#kar3").attr('src');
$("#tele3").attr('src',thik2)
$("#tele3").fadeToggle();
});
$("#kar4").click(function(){
var thik3=$("#kar4").attr('src');
$("#tele4").attr('src',thik3)
$("#tele4").fadeToggle();
});
$("#list").change(function(){
var selectedValue=$(this).val();
$("#h").css("color",selectedValue);
});
$("#fonts").change(function(){
var selecteValue=$(this).val();
$("#h").css("font-size",selecteValue);
});
$('input[type="radio"]').click(function(){
$("#h").css("font-style",$(this).val());
});
$("#img1").click(function(){
$("#button1").click(function(){
var lk=$(this).val();
$(".grid").css("border-Color",lk);
});
$("#button2").click(function(){
var k=$(this).val();
$(".grid").css("border-Color",k);
});
});
$("#grid1").click(function(){
$("#button1").click(function(){
var llk=$(this).val();
$("img").css("border-Color",llk);
});
$("#button2").click(function(){
var kl=$(this).val();
$("img").css("border-Color",kl);
});
});
});
</script>
</head>
<body>
<h3 id="h" >Album tittle</h3>
<div class="container1">
<div class="grid">
<img id="tele1" src="original.jpg"width="45%"height="120px">
<img id="tele2" src="original.jpg"width="45%"height="120px">
<img id="tele3" src="original.jpg"width="45%"height="120px">
<img id="tele4" src="original.jpg"width="45%"height="120px">
</div>
<div class="addimg">
<img id="kar1" src="bike.jpg"width="20.2%"height="100px" >
<img id="kar2" src="purple-curves-circles- 271580.jpg"width="22.4%"height="100px">
<img id="kar3" src="fail.jpg"width="22.2%"height="100px">
<img id="kar4" src="download.jpg"width="22.4%"height="100px">
</div>
</div>
<div class="right1">
<form id="my form">
<input id="img1" type="radio" name="bcolor"value="U">image
<input id="grid1" type="radio" name="bcolor"value="B">grid
</form>
<br>
<button id="button1" value="red"> red</button><br>
<button id="button2" value="yellow" >yellow</button>
<div class="right2">
<P>
Color :
<select id="list">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="#ff00ff">pink</option>
<option value="#ff9900">orange</option>
<option value="#0088cc">light blue</option>
</select>
</p>
font-size:
<select id="fonts">
<option value="1px">1
<option>
<option value="10px">10
<option>
<option value="20px">20
<option>
<option value="30px">30
<option>
<option value="40px">40
<option>
<option value="50px">50
<option>
<option value="60px">60
<option>
</select>
<br><br>
<input id="family1" type="radio" name="k" value="italic">I
<input id="family1" type="radio" name="k" value="normal">N
<input id="family1"type="radio" name="k" value="Courier New">I
</div>
</body>
</html>
Unfortunately, my code is not functioning properly as clicking the second radio button also changes the color of the outer border instead of changing only the color of the inner border.