My JavaScript skills are limited, but I have successfully created a form with 4 drop-down selection boxes on the left side for users to choose from (State, Car, Year, Condition).
After making their selections, users can click a 'calculate' button below, which triggers some simple functions based on their input and displays 4 different values on the right side of the form.
In the center of the form is an image named car1.png that I want to change depending on the value returned to Result 3. For example, if the result is 0.07 then show "car2.png", or if it's 0.06 show "car3.png". Despite reading tutorials on 'if' statements, I'm struggling to implement this feature.
I would greatly appreciate any suggestions on how to achieve this in a straightforward manner given my lack of expertise in this domain.
Here is what I have managed to create so far:
<HTML>
<body>
<script type="text/javascript">
function calcform()
{
with (document.form1)
{ result1.value = +number1.value * .75 * 50}
{ result2.value = +number2.value * 1}
{ result3.value = +number3.value * 1}
{ result4.value = +number2.value * +number1.value}
}
</script>
</div>
<div class="span17">
<table><form name="form1" action="">
<h4>State :<br/>
<select name="number" id="number1">
<option value="15">SA</option>
<option value="16">VIC</option>
<option value="17">NSW</option>
<option value="10">QLD</option>
<option value="19">NT</option>
<option value="14">WA</option>
</select></h4><br/>
<h4>Car :<br/>
<select name="number" id="number4">
<option value="1">Ford</option>
<option value="2">Nissan</option>
<option value="3">Toyota</option>
<option value="4">Holden</option>
</select></h4><br/>
<h4>Year :<br/>
<select name="number" id="number2">
<option value="0.1">1980</option>
<option value="0.2">1981</option>
<option value="0.3">1982</option>
<option value="0.4">1983</option>
<option value="0.5">1984</option>
<option value="0.6">1985</option>
</select></h4><br/>
<h4>Condition :<br/>
<select name="number3" id="number3">
<option value="0.08">New</option>
<option value="0.07">Used</option>
<option value="0.06">Defect</option>
<option value="0.05">Scrap</option>
</select></h4><br/>
<input type="button" id="Calculate" value="Calculate"
onclick="calcform()" /><input type="reset" id="reset" value=" Clear "/></tr>
</span>
<div class="span20">
<br>
<br>
<img src="car1.png">
</div>
<div class="span15">
<br/><tr><td><h4><strong></strong></h4><br/>
<h4>Result 1:<br />
<div class="span15">
<input type="text" id="result1" value="" size="40" /></h4><br/>
</div>
<h4>Result 2:<br />
<input type="text" id="result2" value="" size="40" /></h4><br/>
<h4>Result 3:<br />
<input type="text" id="result3" value="" size="40" /></h4><br/>
<h4>Result 4:<br />
<input type="text" id="result4" value="" size="40" /></h4><br/>
</form> </table> </div>
</div>
</div>
</div>
</div>
</body>
</html>