change a td change all the column - javascript

I have to disable a input in a td, based in the selection in the td select, the td target is the next one, but when I select a option it changes all the next td in the column. I´m new in this u_u
<table id="tabla">
<!-- Cabecera de la tabla -->
thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Sexo</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="especial">
<select id="mySelect" onchange="funcSelect()" name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value="3" ></td>
<td></td>
</tr>
<tr>
<td class="especial">
<select id="mySelect2" onchange="funcSelect()"
name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value=""></td>
<td><input type="text" name="" value=""></td>
</tr>
</tbody>
</table>
this is the function I call for disable the next input, basically i am obtaining the id and the value and depending on that I disable the input, but apparently I disable or enable all the td's not just the one in the row I work
function funcSelect(){
var idSel = $("select").attr("id");
console.log(idSel);
var valSel = $("#"+idSel).val();
var id = "#"+idSel;
console.log(id);
console.log(valSel);
if(valSel === "4"){
$("td.especial").next("td").children().removeAttr("disabled");
}else{
$("td.especial").next("td").children().attr("disabled", "disabled");
}
}

Javascript doesn't work this way.Here is a working version of you code..... Plus you don't have to use any inline function to get this work.....
HTML:
<table id="tabla">
<!-- Cabecera de la tabla -->
<thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Sexo</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="especial">
<select id="mySelect" name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value="3" ></td>
<td></td>
</tr>
<tr>
<td class="especial">
<select id="mySelect2"
name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value=""></td>
<td><input type="text" name="" value=""></td>
</tr>
</tbody>
</table>
Javascript/Jquery:
$(document).on('change', 'select', function(event) {
var val = $(this).val();
if (val == 4) {
$(this).parent().next('td').children().removeAttr('disabled');
}else{
$(this).parent().next('td').children().attr('disabled', 'disabled');
}
});

You should use $("#"+idSel).closest("td.especial") instead of $("td.especial") to find just the first ancestor matching td.especial selector.
Your current code is just matching everything existing in DOM matching given selector `td.especial.

Related

how to change all rows for a column value in js?

i have this table
and i would like to change all the EDW column value for all rows by the value selected on the top , hoe can i do that with javascript ?
this is my table html :
<table id="example1" class="table table-bordered">
<thead>
<th>Employee ID</th>
<th>Full Name</th>
<th>Salary</th>
<th>EDW <select type="number" class="edw" name="edw1">
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select></th>
<th>TDW</th>
<th>Deduction</th>
<th>Net Pay</th>
</thead>
<tbody>
#foreach( $employees as $employee)
<tr>
<td>{{$employee->id}}</td>
<td>{{$employee->firstname}} {{$employee->lastname}}</td>
<td><input type="number" class="salary" value="{{$employee->salary}}" name="salary"></td>
<td><input type="number" class="edw" value="30" name="edw"></td>
<td><input type="number" class="tdw" value="30" name="tdw"></td>
<td><input type="number" class="deduction" value="0" name="deduction"></td>
<td><span class="result"></span> AED</td>
</tr>
#endforeach
Solution based on jQuery
<!DOCTYPE html>
<html>
<head>
<title>Salary Table</title>
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1"></meta>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<table id="example1" class="table table-bordered">
<thead>
<th>Employee ID</th>
<th>Full Name</th>
<th>Salary</th>
<th>EDW <select id="edw_selection" type="number" class="edw" name="edw1">
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select></th>
<th>TDW</th>
<th>Deduction</th>
<th>Net Pay</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Smith</td>
<td><input type="number" class="salary" value=1000000 name="salary"></td>
<td><input type="number" class="edw" value="30" name="edw"></td>
<td><input type="number" class="tdw" value="30" name="tdw"></td>
<td><input type="number" class="deduction" value="0" name="deduction"></td>
<td><span class="result"></span> AED</td>
</tr>
<tr>
<td>2</td>
<td>Ivan Petrov</td>
<td><input type="number" class="salary" value=3000 name="salary"></td>
<td><input type="number" class="edw" value="30" name="edw"></td>
<td><input type="number" class="tdw" value="30" name="tdw"></td>
<td><input type="number" class="deduction" value="0" name="deduction"></td>
<td><span class="result"></span> AED</td>
</tbody>
<script>
$('#example1').on('change','select', () => {
var selected_value = document.getElementById("edw_selection").value;
$('input[name="edw"]').each( (key,value) => {
value.value = selected_value;
});
});
</script>
</body>
</html>
What you can do is add a change event listener on the dropdown selector. This will allow you to perform an action every time the value changes.
On this action callback, you can retrieve all the fields having the name edw1 using document.querySelector. Then, you can retrieve the value of the edw1 field using the e argument that is passed to the callback. This variable will contain information about the event, including the clicked element inside e.target. All there is to do now is looping through all selects of name edw using querySelectorAll and pass the value : el.value = e.target.value
document.querySelector('select[name=edw1]').addEventListener('change', e => {
document.querySelectorAll('input[name=edw]').forEach(el => {
el.value = e.target.value
})
})

I need some help to make a dynamic input

I´m making an inventory control program for a veterinary, but in one of the windows to control the stock provider I have a select input and the idea is, when I select that the purchase is for credit, a new input will appear (type date) to select when the invoice payment term expires. I've tried whit jQuery and javaScript, but it still not working, any idea?
This is the form:
<form method="post" action="guardaArt.php">
<tr> <td>Codigo</td> <td><input type=text name="codigo"></td> </tr>
<tr> <td>Nombre</td> <td><input type=text name="nombre"></td> </tr>
<tr> <td>Gravado o Exento</td> <td><select name="select">
<option value="1" selected>Gravado</option>
<option value="2">Exento</option>
</select></td> </tr>
<tr> <td>Precio de Compra</td> <td><input type=text name="precioComp"></td> </tr>
<tr> <td>Precio de Venta</td> <td><input type=text name="precioVent"></td> </tr>
<tr> <td>Precio de Venta por Unidad</td> <td><input type=text name="precioUni"></td> </tr>
<tr> <td>Contenido</td> <td><input type=text name="cont"></td> </tr>
<tr> <td>Codigo del Proveedor</td> <td><input type=text name="codProv"></td> </tr>
<tr> <td>Usos</td> <td><input type=text name="usos"></td> </tr>
<tr> <td>A Crédito</td>
<td>
<select name="tipo" id="mylist">
<option value="0" selected>No</option>
<option value="1">Sí</option>
</select>
</td>
</tr>
<tr> <td>Vencimiento</td><td></td>
</tr>
<tr> <td align= "center"><input type='submit' name='articulo' value='Guardar Artículo' formaction='guardaArt.php'/></td><tr> <td align= "center"><input type='submit' name='articulos' value='Guardar Artículo a Crédito' formaction='ing_art.php'/></td> </tr>
</form>}
and the jQuery
<script>
$('#mylist').change(function(){
if( $(this).val() == '1'){
$('body').append('<input id="myInput" name="vence" type="date" />');
}
else{
$('#myInput').remove();
}
});
</script>

How can I make my drop down selections change my total by they're values but not be calculated unless selected

How can I make my drop down selections change my total by they're values but not be calculated unless selected?
Here is what I got. Any help will be much appreciated.
I would like the dropdown for 4PC to do no change
6PC would add 2.00 to the price and 12PC would add 4.00
I'm not sure what I'm doing wrong, can someone please point it out to me thanks.
Here is my code for the table
function multiply() {
a = Number(document.getElementById('QTY').value);
b = Number(document.getElementById('PPRICE').value);
c = Number(document.getElementById('4PC').value);
d = Number(document.getElementById('4PCM').value);
e = Number(document.getElementById('6PC').value);
f = Number(document.getElementById('6PCM').value);
g = Number(document.getElementById('12PC').value);
h = Number(document.getElementById('12PCM').value);
i = a * b + c * d + e * f + g * h;
j = Number(document.getElementById('SALESTAX').value);
k = i * j;
l = Number(document.getElementById('TAXDIV').value);
m = k / l;
n = i + m;
document.getElementById('SUBTOTAL').value = i;
document.getElementById('TAX').value = m;
document.getElementById('TOTAL').value = n;
}
<table>
<tr style="background-color:black; color:white" >
<th>Menu Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Preferance</th>
</tr>
<tr>
<td>Boneless Chicken Wings</td>
<td><input type="text" value="" name="QTY" id="QTY" onKeyUp="multiply()" /></td>
<td><input type="text" name="PPRICE" id="PPRICE" value="5.99" disabled="disabled" readonly/></td>
</td>
<td>
<form action="/action_page.php">
<select id="BONELESS_COUNT">
<option value="0.00" name="4PC" id="4PC">4 Piece $5.99</option>
<option value="2.00" name="6PC" id="6PC">6 Piece $7.99</option>
<option value="4.00" name="12PC" id="12PC">12 Piece $9.99</option>
</select>
<select name="Preparation">
<option value="Baked">Baked</option>
<option value="Fried">Fried</option>
</select>
<select name="Flavor">
<option>Original</option>
<option>Buffalo</option>
<option>Parmesian</option>
<option>Lemon Pepper</option>
<option>BBQ</option>
</select>
</form>
</td>
</tr>
<tr>
<td></td>
<td><input type="text" name="4PCM" id="4PCM" value="1" disabled="disabled" style="display:none"readonly/></td>
<td><input type="text" name="6PCM" id="6PCM" value="1" disabled="disabled" style="display:none"readonly/></td>
<td><input type="text" name="12PCM" id="12PCM" value="1" disabled="disabled" style="display:none"readonly/></td>
<td><input type="text" name="TAXDIV" id="TAXDIV" value="100" disabled="disabled" style="display:none"readonly/></td>
</tr>
<tr>
<td></td>
<td align="right"><strong>Subtotal $</strong></td>
<td><input type="text" name="SUBTOTAL" id="SUBTOTAL"></td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right" style="display:none"><strong>Salestax</strong></td>
<td><input type="text"name="SALESTAX" id="SALESTAX" value="11" disabled="disabled" style="display:none" readonly/></td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right"><strong>Tax $</strong></td>
<td><input type="text" name="TAX" id="TAX" /></td>
<td></td>
</tr>
<td></td>
<td></td>
<tr>
<td></td>
<td align="right"><strong>Total $</strong></td>
<td><input type="text" name="TOTAL" id="TOTAL"></td>
<td></td>
</tr>
</table>
It is not entirely clear from your question and your code what you are asking for (it is generally advised to provide a Minimal, Complete, and Verifiable example to elicit good answers on stackoverflow).
It appears that you want to know how to make your program respond to changes in a dropdown, so I will try to answer that with a simpler example than your code.
First, changes to <select> dropdowns trigger the onchange event, so you want to attach an event listener that responds to this.
Second, getting the selected value from a <select> dropdown is somewhat more involved than getting the current value from an <input> element: You need to access the .selectedIndex attribute to get the index number of the currently selected option, then access the correct index from the .options attribute of the dropdown.
The code snippet below demonstrates a simpler example of this in action. If you make changes to the 'Quantity' input or make a choice in the dropdown, this triggers the update() function, which updates the total.
function update() {
var total = document.getElementById('TOTAL'),
qty = document.getElementById('QTY'),
choice = document.getElementById('ITEM');
total.value = (choice.options[choice.selectedIndex].value * qty.value)
.toFixed(2);
}
th{text-align: left;}
<table>
<tr>
<th>Choose item</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>
<select id="ITEM" onkeyup="update()" onchange="update()">
<option value="5.99" name="4PC" id="4PC">4 Piece $5.99</option>
<option value="7.99" name="6PC" id="6PC">6 Piece $7.99</option>
<option value="9.99" name="12PC" id="12PC">12 Piece $9.99</option>
</select>
</td>
<td>
<input type="text" id="QTY" onkeyup="update()" />
</td>
<td>
<input type="text"id="TOTAL">
</td>
</tr>
</table>

how can i clone and erase a row in every row

i can clone the first and the last row but i cant clone the 2, 3, 4 and so on rows, so how can i target this rows to clone and erase them respectively.
now i have to write trash so i can post cause my whatever have too mucho code, really men come on this is not esayflow is it XD
demo
$('button[name=add]').on('click', function() {
var cloned = $('#table1 tr:last').clone(true);
$('#table1').append(cloned);
})
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tbody>
<tr id="2">
<td>2</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
<tr>
<td>3</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
</tbody>
</table>
If clone does not work properly use "outerHTML" and append it to nearest "tbody".
as follows:
$('button[name=add]').on('click', function() {
var cloned = $(this).closest('tr')[0].outerHTML;
$(this).closest('tbody').append(cloned);
});
For removing row:
$('button[name=minus]').on('click', function() {
$(this).closest('tr').remove();
});
You need to clone the tr that has the button you clicked.
In your code, you are specifying only the last row to be cloned.
So, to clone any other row, target the row containing the button that has been clicked using jQuery .closest()
$('button[name=add]').on('click', function() {
// this will select the first tr parent that contain the button
var cloned = $(this).closest('tr').clone(true);
$('#table1').append(cloned);
})
Use remove() function to remove your target.
$('button[name=add]').on('click', function() {
var cloned = $(this).closest('tr').clone(true);
$('#table1').append(cloned);
})
$('button[name=erase]').on('click', function() {
$(this).closest('tr').remove();
});
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr id="2">
<td>2</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
<tr>
<td>3</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
</tbody>
</table>
Use closest() to clone and remove closest tr.
$('button[name=add]').on('click', function() {
var cloned = $(this).closest('tr').clone(true);
$('#table1 tbody tr:last').after(cloned);
})
$('button[name=erase]').on('click', function() {
$(this).closest("tr").remove();
})
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tbody>
<tr id="2">
<td class="count">1</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
</tbody>
</table>

Use javascript to show tables via select

I want to display a certain table when it's selected from the select drop down. This is so far I have got, but it's not working
javascript;
var opt = document.getElementById('select');
opt.onchange = function() {
document.getElementById('t1').style.display = 'none';
document.getElementById('t2').style.display = 'none';
document.getElementById('t3').style.display = 'none';
document.getElementById('t4').style.display = 'none';
document.getElementById('t' + this.value).style.display = '';
html
<select name="select" id="select">
<option selected="selected" disabled="disabled">Please Select</option>
<option value="1">CAT Requests</option>
<option value="2">Stop Bulk Messages</option>
<option value="3">PO - Deposit Transfer</option>
<option value="4">PO - Address Change</option>
</select>
<table id="t1">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>CAT Name</td>
<td><input type="text" name="cat_name"/> </td>
</tr>
<tr>
<td>Artist Name</td>
<td><input type="text" name="art_name"/> </td>
</tr>
<tr>
<td>Language</td>
<td><input type="text" name="lang"/> </td>
</tr>
</table>
<table id="t2">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
<table id="t3">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Amount</td>
<td><input type="text" name="amt"/> </td>
</tr>
<tr>
<td>Reason to Transfer</td>
<td><input type="text" name="reason_to_transfer"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
<table id="t4">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Customer Name</td>
<td><input type="text" name="cus_name"/> </td>
</tr>
<tr>
<td>Correct Address</td>
<td><input type="text" name="corr_name"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
I don't get why the tables are hidden on pageload and shown when the relevant option is selected.
Here you go!
http:/http://jsfiddle.net/tjC59/1/
<body>
<select name="select" id="select" onchange="changeSelection()"><!--Added the onchange Function -->
<option value="0">Please Select</option>
<option value="1">CAT Requests</option>
<option value="2">Stop Bulk Messages</option>
<option value="3">PO - Deposit Transfer</option>
<option value="4">PO - Address Change</option>
</select>
<table id="t1">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>CAT Name</td>
<td><input type="text" name="cat_name"/> </td>
</tr>
<tr>
<td>Artist Name</td>
<td><input type="text" name="art_name"/> </td>
</tr>
<tr>
<td>Language</td>
<td><input type="text" name="lang"/> </td>
</tr>
</table>
<table id="t2">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
<table id="t3">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Amount</td>
<td><input type="text" name="amt"/> </td>
</tr>
<tr>
<td>Reason to Transfer</td>
<td><input type="text" name="reason_to_transfer"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
<table id="t4">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Customer Name</td>
<td><input type="text" name="cus_name"/> </td>
</tr>
<tr>
<td>Correct Address</td>
<td><input type="text" name="corr_name"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
<!-- Good Practice - Always put your scripts at the end of the Html Body -->
<script>
//When the option is changed
var changeSelection = function () {
//Hide all of the elements
hideAll();
//If the select value is > 0 (is valid)
if (document.getElementById("select").value > 0) {
//Set the element display to "block" (block is typically the default display type)
document.getElementById("t" + document.getElementById("select").value).style.display = "block";
}
};
//Function to hide all of the elements
var hideAll = function () {
//Loop through the elements
for (var i = 1; i <= 4; i++) {
//Hide each one
document.getElementById("t" + i).style.display = "none";
}
};
//This function automaticaly executes when the page is loaded
(function () {
//Hide all of the elements
hideAll();
})()
</script>
The problem here is that the default option is selected on pageload. So your onchange handler is fired with the value "Please Select" on pageload. What this does is that it hides all the tables and document.getElementById('tPleaseSelect') is not found, and hence no table is shown.
I have a fiddle working that displays the tables on page load. Then when one of the tables is selected it shows just that table. Your above code works fine besides the fact that you were missing a close };.
Fiddle Here
You can display by the below code slight modification on your code:
<select name="select" id="select" onchange="displayTable();">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function displayTable() {
var opt = document.getElementById('select');
opt.onchange = function () {
document.getElementById('t1').style.display = 'none';
document.getElementById('t2').style.display = 'none';
document.getElementById('t3').style.display = 'none';
document.getElementById('t4').style.display = 'none';
document.getElementById('t' + this.value).style.display = '';
};
}
</script></head>

Categories

Resources