I've encountered an issue I need help with. There are two lists of options in play here.
One list has names all starting with 'M', and the other with 'R'. The task is to select specific options, like 'A' and 'C', from both lists. For the selected options, an 'X' bonus should be added for 'X' options, and a 'Y' bonus ('B') for the rest.
The bonus comes in the form of a percentage.
The main challenge is how to accurately select these options and apply the bonuses. Can this be achieved? I've heard that class names may provide a solution, but I'm unsure how to implement them.
<form action="">
<fieldset>
<head>
<script type="text/javascript">
function myFunction() {
/*Left flank bonus*/
var MLef1 = document.getElementById("MeleeL").value;
var RLef1 = document.getElementById("RangedL").value;
var ML = MLef1 - 0;
var RL = RLef1 - 0;
/*Melee total*/
var MT1 = ML;
var MT2 = MT1 / 100;
var MT = MT2 - 0;
/*Ranged total*/
var RT1 = RL;
var RT2 = RT1 / 100;
var RT = RT2 - 0;
/*Left flank normal*/
/*Left flank melee*/
var x = document.getElementById("Melee").selectedIndex;
var y = (document.getElementsByTagName("option")[x].value);
var xy = document.getElementById("LM1").value;
/*Left flank Ranged*/
var p = document.getElementById("Ranged").selectedIndex;
var o = (document.getElementsByName("LR")[p].value);
var i = document.getElementById("LM1").value;
/*Ranged*/
var c1 = o * i;
var c = c1 - 0;
var RTZ = RT * c;
var RTz = RTZ - 0;
/*Melee*/
var z2 = y * xy;
var z = z2 - 0;
var MTZ = MT * z;
var MTz = MTZ - 0;
/*Zero function*/
if (MT <= 0) {
(document.getElementById("result").innerHTML = z);
}
else if (MT > 0) {
(document.getElementById("result").innerHTML = MTz);
}
if (RT <= 0) {
(document.getElementById("result1").innerHTML = c);
}
else if (RT > 0) {
(document.getElementById("result1").innerHTML = RTz);
}
}
</script>
<legend align="center" id="Defense">Defense</legend>
<table>
<tr>
<th>Left Flank</th>
<th>
<th>
<th>Center Flank</th>
<th>Right Flank</th>
</tr>
<tr>
<td>
<label>X Bonus</label>
<br>
<label>Y bonus</label>
<br>
</td>
<td>
<input type="number" id="MeleeL">%
<br>
<input type="number" id="RangedL">%
<br>
</tr>
</table>
<select id="Melee">
<option value="11">A</option>
<option value="9">B</option>
<option value="6">C</option>
</select>
<input type="number" style="width:50px" id="LM1">
<select id="Ranged">
<option name="LR" value="17">A</option>
<option name="LR" value="4">B</option>
<option name="LR" value="36">C</option>
</select><br>
<button type="button" id="buton" onclick="myFunction()">Calculate</button><br>
<p id="result">The Melee, </p><p id="result1">The R, </p>
</fieldset>
</form>The bonus amount can vary and will be entered via an input box. Once again, the goal is for users to have the ability to add a variable bonus to some, but not all, options on a given list.
Your assistance is greatly appreciated!