如何使用类名?

时间:2014-11-25 02:22:52

标签: javascript class input names getelementsbyclassname

我遇到了问题。我有2个选项列表。

一个列表中的每个选项都具有名称M,另一个选项中的每个选项都具有名称R. 我需要选择某些选项,从两个列表中选择“A”和“C”。我需要为'X'选项添加'X'加值,并为'Y'选项加'Y'加值('B')。

奖金是以百分比形式

所以问题是,如何选择这些选项,并添加奖金?可以吗?我被告知课程名称可以解决它,但我该怎么做?

            <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>

此金额各不相同,将通过输入框输入。同样,我需要用户能够为列表中的某些选项(但不是全部)添加可变奖励。

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

我发现,使用试用,错误和几个小时阅读编码手册,如何做到这一点。我现在正在使用“data-name1”。它有很大的帮助。

    <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>

感谢所有帮助,抱歉不清楚。 一切顺利