I have an issue with something. I have 2 lists of options.
Every option in one list has a name of M, every option in the other has a name of R. I need to select certain options, say 'A' and 'C' from both lists. I need to add an 'X' bonus to the 'X' options, and a 'Y' bonus to the 'Y' options ('B').
The bonus is in the form of a percentage
So the problem is, how do I select those options, and add the bonus? Can it be done? I have been told class names can solve it, but how do I do that?
<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>This amount varies, and will be inputed through a input box. Again, I need the user to be able to add a variable bonus to some, but not all, of the options in a list.
Thanks for all the help!
I found out, using trial, error, and a couple hours reading coding manuals, how to do this. I am now using "data-name1". It helps a lot.
<script>
document.getElementById("selectElement").selectedIndex = -1; // so that no option //is selected when the page is loaded
// Good!!!
function getData(){
var e = document.getElementById("qwert"); // get the <select> element
// Understood
var data_name1 = e.options[e.selectedIndex].dataset.name1; // get the selected //<option> and its name1 data attribute
// var data_name2 = e.options[e.selectedIndex].dataset.name2; get the selected //<option> and its name2 data attribute
var value = e.options[e.selectedIndex].value; // get the value of the selected <option>
//Result
document.getElementById("data1").innerHTML = data_name1;
document.getElementById("value").innerHTML = value;
}
</script>
<select id="qwert" onclick="getData ()">
<option value="135" data-name1="M">Halberdier</option>
<option value="150" data-name1="R">Lancer</option>
<option value="51" data-name1="R">Longbowman</option>
<option value="27" data-name1="M">Militia</option>
</select>
<p>
<label>data-name1 = </label>
<span>"</span><span id="data1"></span><span>"</span>
</p>
<p>
<label>value = </label>
<span>"</span><span id="value"></span><span>"</span>
</p>Thanks for all the help, sorry about being unclear. All the best