Search code examples
javascripthtmldropdown

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

I wrote a code which is getting users 5 different numbers (assign1 to assing5). It works really well. I want to add a drop-down button to make my code better. I want to consider the value of drop-down choices as grade6 and put it in my formula(I mean, I want to change the formula "total" to "total/grade6"). I feel really confused because I don't know what should I do, If it is possible, please help me. I should mentioned that I wrote the code in Farsi.

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

Drop-down button which I want to add to my above code:

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

  • I don't know what you want to calculate so I took out the result as a console.log so you can use the value where needed.

    (I have also indicated the new things in the code with a comment)

    I have added an empty field to your select sheet that returns "0" if nothing is selected. But if you don't need this field, you can remove it.

    I hope I've been helpful

    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>