I am having some trouble making specific fields in a form appear based on the selection made from a dropdown menu. Below is a simplified snippet of my code, which should change the display from 'none' to 'block'. Can you help me figure out what's wrong with it?
function selectTrain(trainType) {
document.getElementById("test").innerHTML = (trainType);
var elements = document.getElementsByClassName(trainType);
for (var i = 0, length = elements.length; i < length; i++) {
elements[i].style.display = 'inline-block';
}
};<select onchange="selectTrain(this.value)">
<option value="" disabled="disabled" selected="selected">Please choose a train type</option>
<option value="lhcs">Loco-hauled carriage set</option>
<option value="mu">Multiple Unit</option>
<option value="f">Freight</option>
</select>
<!-- Form -->
<form name="myForm">
<p>Formation Information:</p>
<ul>
<li class="lhcs f">Locomotive number: <input type="text" id="locoid1"></li>
<li class="lhcs">Locomotive number: <input type="text" id="locoid2"></li>
<li class="mu">Formation number: <input type="text" id="formationid">
</li>
</ul>
<p>Names:</p>
<ul>
<li class="lhcs f">Locomotive name: <input type="text" id="loconame1"></li>
<li class="lhcs">Locomotive name: <input type="text" id="loconame2"></li>
<li class="mu">Formation name: <input type="text" id="formationname"></li>
<li class="lhcs mu">Train name: <input type="text" id="trainname"></li>
</ul>
<p>Train Operating Company:</p>
<ul>
<li class="lhcs">Locomotive TOC: <input type="text" id="locotoc1"></li>
<li class="lhcs">Locomotive TOC: <input type="text" id="locotoc2"></li>
<li class="lhcs">Carriage TOC: <input type="text" id="cartoc"></li>
<li class="mu">Formation TOC: <input type="text" id="formationtoc"></li>
</ul>
<p>Places:</p>
<ul>
<li class="lhcs mu f">Spot or embark point: <input type="text" list="places" id="placeorigin"></li>
<li class="lhcs mu">Destination: <input type="text" list="places" id="placedest"></li>
</ul>
<p>Date and Time:</p>
<input type="date" id="dateandtime">
<p>Number of Carriages: </p>
<input type="number" id="carnum">
<ul>
<li class="lhcs mu">Carriage 1: <input type="text" id="carid1"></li>
</ul>
<button id='submission' type='button' onClick="goForIt()">Submit</button>
</form>