我写的代码有效，但我无法在其中添加下拉按钮

Question

我写了一个代码，让用户获得 5 个不同的数字（assign1 到 assing5）。它真的很好用。我想添加一个下拉按钮以使我的代码更好。我想将下拉选项的值视为 grade6 并将其放入我的公式中（我的意思是，我想将公式“总计”更改为“total/grade6”）。我真的很困惑，因为我不知道该怎么办，如果可能的话，请帮助我。我应该提到我用波斯语编写代码。

   <!DOCTYPE html>
<body>

<form name="form1" onsubmit="event.preventDefault();return displayResult();">

<p style="font-family:calibri">T<b></b><input type="decimal" id="assign1"  value="" name="onlynumbers" required><span class="required">*</span></p>

<p style="font-family:calibri">A<b></b><input type="decimal" id="assign2" value="" name="onlynumbers"  required><span class="required">*</span></p>

<p style="font-family:calibri">E <b></b><input type="decimal" id="assign3"  value="" name="onlynumbers" required><span class="required">*</span></p>

<p style="font-family:calibri">W <b></b><input type="number" id="assign4"  value="" name="onlynumbers"  required><span class="required">*</span></p>

<p style="font-family:calibri">D <b></b><input type="number" id="assign5"  value="" name="onlynumbers"  required><span class="required">*</span></p>


  <p>
    <button> <p style="font-family:calibri"> <font size="5"> Calculate </font> </p></button>
    <input type="reset" value="↺">

  </p>
</form>

<div id="total"></div>

<script>

function displayResult() {
  var result = calculator();
  document.getElementById('total').innerHTML =Math.round(result);
  return false;
}

function calculator() {
  var grade1 = parseFloat(document.getElementById('assign1').value * 1);
  var grade2 = parseFloat(document.getElementById('assign2').value * 1);
  var grade3 = parseFloat(document.getElementById('assign3').value * 1);
  var grade4 = parseFloat(document.getElementById('assign4').value * 1);
  var grade5 = parseFloat(document.getElementById('assign5').value * 1);
  var total = ((2*((grade1 * grade3)+(grade2 * grade3)))+(grade1 * grade2)-(grade4*1.5*1.5)-(grade5*1*2.0)) ;
  return total;
}

</script>
</div>
</body>

我想添加到上面代码中的下拉按钮：

<select id="SelectPaint">
  <option value="8">1</option>
  <option value="8">2</option>
  <option value="13">3  </option>
  <option value="14">4 </option>
  <option value="13">5</option>
  <option value="10">6</option>
  <option value="12">7</option>
 </select>

Answer 1

我不知道你想计算什么，所以我把结果作为 console.log 取出来，这样你就可以在需要的地方使用这个值。

（代码中的新东西我也已经在注释中指出了）

我已经在您的 select sheet 中添加了一个空字段，如果没有 selected，returns 为“0”。但如果你不需要这个字段，你可以删除它。

希望对您有所帮助

function displayResult() {
    var result = calculator();
    document.getElementById('total_1').innerHTML = Math.round(result[0]);
    document.getElementById('total_2').innerHTML = Math.round(result[1]);
}

function calculator() {
    var grade1 = parseFloat(document.getElementById('assign1').value * 1);
    var grade2 = parseFloat(document.getElementById('assign2').value * 1);
    var grade3 = parseFloat(document.getElementById('assign3').value * 1);
    var grade4 = parseFloat(document.getElementById('assign4').value * 1);
    var grade5 = parseFloat(document.getElementById('assign5').value * 1);
    var grade6 = parseFloat(document.getElementById('SelectPaint').value * 1); // <--- NEW LINE

    // In the HTML code, the values must be consecutive numbers...
    // The true values of "grade6" are described here!!!
    // At the moment I have entered 0.2 for everyone for a second value. Change with the correct values
    var valForG6 = [
        [1,  1],    // if value 0
        [8,  0.2],  // if value 1
        [8,  0.2],  // if value 2
        [13, 0.2],  // if value 3
        [14, 0.2],  // if value 4
        [13, 0.2],  // if value 5
        [10, 0.2],  // if value 6
        [12, 0.2],  // if value 7
    ];

    var calc = ((2 * ((grade1 * grade3) + (grade2 * grade3))) + (grade1 * grade2) - (grade4 * 1.5 * 1.5) - (grade5 * 1 * 2.0));

    var total_1 = calc / valForG6[grade6][0]; // Calculation of total 1 
    var total_2 = calc / valForG6[grade6][1]; // Calculation of total 2
    
    var res = [total_1, total_2];

    return res;
}

//------------------------------------------------
var opt = document.getElementById('SelectPaint');
var optList = opt.getElementsByTagName('option');

for (var i = 0; i < optList.length; i++) {
    optList[i].addEventListener("click", function () {
        var g = this.value;
        opt.setAttribute("value", g);
    });
}

<form name="form1" onsubmit="event.preventDefault();return displayResult();">

    <p style="font-family:calibri">طول اتاق<b></b><input type="decimal" id="assign1" placeholder="متر" value=""
            name="onlynumbers" required><span class="required">*</span></p>

    <p style="font-family:calibri">عرض اتاق<b></b><input type="decimal" id="assign2" placeholder=" متر" value=""
            name="onlynumbers" required><span class="required">*</span></p>

    <p style="font-family:calibri">ارتفاع اتاق <b></b><input type="decimal" id="assign3" placeholder="متر" value=""
            name="onlynumbers" required><span class="required">*</span></p>

    <p style="font-family:calibri">تعداد پنجره ها <b></b><input type="number" id="assign4" value=""
            name="onlynumbers" required><span class="required">*</span></p>

    <p style="font-family:calibri">تعداد درها <b></b><input type="number" id="assign5" value="" name="onlynumbers"
            required><span class="required">*</span></p>


    <select id="SelectPaint">
        <option value="0"> </option>
        <option value="1">رنگ اکریلیک طلایی</option>
        <option value="2">رنگ اکریلیک متالیک صدفی</option>
        <option value="3">رنگ اکریلیک مات </option>
        <option value="4">رنگ اکریلیک نیم براق </option>
        <option value="5">رنگ اکریلیک براق</option>
        <option value="6">رنگ اکریلیک آستری</option>
        <option value="7">مادر رنگ اکریلیک</option>
    </select>



    <p>
        <button>
            <p style="font-family:calibri">
                <font size="5"> محاسبه رنگ موردنیاز </font>
            </p>
        </button>
        <input type="reset" value="↺">

    </p>
</form>

<div id="total_1"></div>
<div id="total_2"></div>

我写的代码有效，但我无法在其中添加下拉按钮

I write a code works but I can't add drop-down button in it

html

javascript

dropdown