Javascript code that DISPLAYS the radio button value in a text box that also checks for the drop down value and displays a certain array value depending on the radio value choosen for the drop down se
<!DOCTYPE html>
<head>
<script>
function Dropcity() {
var select = document.getElementById('dropcity');
var option = select.options[select.selectedIndex];
document.getElementById('displaycity').value = option.value;
document.getElementById('value').value = option.text;
}
function Popnums()
{
}
</script>
<style>
body{
background-color: #d9f2d9;
margin-top: 50px;
font-family: Arial, Helvetica, sans-serif
button{
margin-top: 20px;
margin-left: 210px;
border: 3px solid black;
background-color: antiquewhite;
.assign{
text-align: center;
border: 2px solid black;
width: 250px;
margin: auto;
background-color: #ffcc33;
font-size: 20px;
.cs{
text-align: center;
border: 2px solid black;
width: 250px;
margin: auto;
background-color: #ffeecc;
font-size: 18px;
.sc{
text-align: center;
border: 2px solid black;
width: 250px;
margin: auto;
border-bottom: none;
background-color: #ffccb3;
font-size: 20px;
.cp{
text-align: center;
border: 2px solid black;
width: 250px;
margin: auto;
border-top: none;
background-color: #ffccb3;
font-size: 20px;
.fpop{
margin: auto;
width: 450px;
.tCities{
border-spacing: 1em;
.cname{
background-color: lightblue;
border: 3px solid black;
width: 270px;
font-weight: normal;
font-size: 20px;
.popyr{
float: right;
margin-right: 200px;
border-collapse: collapse;
.popnum{
margin-top: 20px;
margin-left: 160px;
border-collapse: collapse;
width: 270px;
.city{
background-color: lightblue;
border: 3px solid black;
width: 75px;
font-size: 15px;
.cn{
border: 2px solid black;
background-color: #ffcc33;
padding: 2px;
option{
background-color: #d9f2d9;
border: 2px solid black;
border-color: black;
.yr{
border: 3px solid black;
background-color: red;
text-align: center;
width: 80px;
.pop, .popnumber{
border: 3px solid black;
text-align: center;
.pop{
background-color: #4d9900;
width: 140px;
font-size: 20px;
.popnumber{
background-color: #ffeecc;
width: 100px;
.rb{
padding-right: 15px;
.dcn{
border: none;
background-color: transparent;
appearance: none;
width: 75px;
outline: none;
#displaycity{
background-color: #ffdf80;
border: 3px solid black;
width: 270px;
text-align: center;
#rb_years{
text-align: center;
margin-top: 45px;
margin-left: 100px;
border-collapse: collapse;
#yr_00{
border: 3px solid black;
border-bottom: 2px solid black;
padding-top: 2px;
padding-left: 27px;
padding-right: 25px;
padding-bottom: 10px;
#yr_20{
border: 3px solid black;
border-top: 2px solid black;
border-bottom: 1px solid black;
background-color: #4d9900;
padding-top: 2px;
padding-left: 27px;
padding-right: 25px;
padding-bottom: 3px;
#yr_21{
border: 3px solid black;
border-top: 1px solid black;
padding-top: 2px;
padding-left: 27px;
padding-right: 25px;
padding-bottom: 3px;
#pop_num{
background-color: transparent;
text-align: center;
border: transparent;
</style>
</head>
<html>
<body>
<p class="assign">Assignment-03</p>
<br>
<p class="cs">Control Structures</p>
<br>
<br>
<p class="sc">State of California</p>
<p class="cp">Cities Population</p>
<br>
<!-- Table for Cities -->
<form class="fpop">
<table class="tCities">
<thead>
<tr>
<th class="city">Cities</th>
<th style="width: 73px;"></th>
<th class="cname">Name</th>
</tr>
<tr>
<td>
<div>
<label for="cityname" class="cn">
<select name="dropcity" id="dropcity" class="dcn" onchange="Dropcity()">
<option selected="selected" value=""></option>
<option id="cityn" value="San Diego">SD</option>
<option value="San Jose">SF</option>
<option value="San Francisco">SJ</option>
<option value="Sacramento">SAC</option>
<option value="San Bernardino">SB</option>
<option value="Los Angeles">LA</option>
</select>
</label>
</div>
</td>
<td></td>
<td><input name="displaycity" type="text" id="displaycity" readonly/></td>
</tr>
</thead>
</table>
<br>
<!-- Table for Population Years -->
<table class="popyr">
<tr>
<td></td>
<td class="yr">Year</td>
</tr>
<tr>
<td style="height: 15px;"></td>
</tr>
</table>
<!-- Radio Buttons -->
<table id="rb_years" >
<tr>
<th> <input type="radio" name="year" class="year" value="yr">Op</th>
<td cellspacing="0"><label id="yr_00">2000</label></td>
</tr>
<tr>
<th> <input type="radio" name="year" value="yr">Opt</th>
<td><label id="yr_20">2020</label></td>
</tr>
<tr>
<th> <input type="radio" name="year" value="yr">Op</th>
<td><label id="yr_21">2021</label></td>
</tr>
</table>
<!-- Table for Population Numbers -->
<table class="popnum">
<tr>
<td class="pop">Population</td>
<td class="popnumber"><input name="pop_num1" type="text" id="pop_num" onchange="Popnums()" readonly/></td>
</tr>
</table>
</form>
<!-- Submit Button -->
<button type="button">SUBMIT</button>
</body>
</html>
