How to use class names?

Question

How to use class names?

116 Views Asked by mancestr At 04 April 2025 at 12:10

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!

Original Q&A

There are 1 best solutions below

**mancestr** · Accepted Answer

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

How to use class names?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CLASS

Related Questions in INPUT

Related Questions in NAMES

Related Questions in GETELEMENTSBYCLASSNAME

Trending Questions

Popular # Hahtags

Popular Questions