JSFiddle - React, Tailwind, and code Playground

HTML

<form name="Viagens">
<table border="1" width=60%>
<tr>
	<td width="10%" align="center" ><b>Número de Adultos</b> </td>
	<td width="30%" align="left" ><b>Destino da Viagem</b> </td>
	<td width="15%" align="center"> <b>Custo Euros</b> </td>
	<td width="45%" align="center"> <b>Total</b> </td>
</tr>

<tr>
	<td width="10%" align="center">  <input type="text" name="qtd1" size="8"> </td>

	<td width="30%" align="left" ><select name="Destino"><option/>

		<option>Milão</option>
		<option>Roma</option>
		<option>Nova York</option>
		<option>xxxxx</option>
		<option>xxxxxx</option>
		<option>xxxxxxx</option>
	</select></td>
	
	<td width="15%" align="center" ><b> <input type="text" name="val2" size="20" readonly> </td>
	<td width="45%" align="center">  <input type="text" name="val1" size="20" readonly></td>
</tr>





<tr>
	<td width="10%" align="center"> </td>
	<td width="30%" align="left" > </td>
	<td width="15%" align="center" ><b> Total </b> </td>
	<td width="45%" align="center">  <input type="text" name="total" size="20" readonly></td>
</tr>

<tr>
	<td width="10%" align="center"> </td>
	<td width="30%" align="left" > </td>
	<td width="15%" align="center" > </td>

	<td width="45%" align="center">  
		<input type="button"  value="Calcular"
			onClick="simularCustos(); ">&nbsp;

		<input type="button"  value="Limpar"
			onClick="limpar(); ">
	</td>
</tr>
</table>
</form>

JavaScript

<SCRIPT>
	

	function simularCustos()
	{
		document.Viagens.val1.value = 300 * document.Viagens.qtd1.value;

		document.Viagens.total.value = parseInt(document.Viagens.val1.value)

				+ parseInt(document.Viagens.val2.value)

				+ parseInt(document.Viagens.val3.value);
	}
		
	
	function limpar()
	{
		document.Viagens.val1.value = "";


		document.Viagens.total.value = "";

		document.Viagens.qtd1.value = "";
	
	}

</SCRIPT>