Блог

Главная - Вопросы по программированию - Проблема с получением значения переключателя и использованием его для вычисления

Проблема с получением значения переключателя и использованием его для вычисления

#html #radio-button #calculator

#HTML #переключатель #калькулятор

Вопрос:

Я написал код на html. Я хочу написать калькулятор с использованием переключателя, содержащего семь вариантов. А также он принимает разные числа. Затем со всеми этими данными он вычисляет специальную вещь. Я не знаю, как работают переключатели, потому что я новичок, но я хочу использовать их в своем коде, если есть кто-то, кто мне поможет?

 <!DOCTYPE html>

<body>

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

<p style="font-family:calibri"><font size="6">محاسبه رنگ اکریلیک</font></p><br>


<p style="font-family:calibri">لطفا طول، عرض و ارتفاع اتاق را وارد کنید</p>

<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"> <font size="5">توجه: مقدار رنگ محاسبه شده در این سیستم برای پیاده سازی یک لایه رنگ است</font>
 </p>

<p style="font-family:calibri">لطفا تعداد در و پنجره های موجود در اتاق را وارد کرده و در صورت عدم وجود در یا پنجره عدد صفر را وارد کنید</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>

<p style="font-family:calibri">(به طور استاندارد ابعاد پنجره ها 1.5 متر در 1.5 متر و ابعاد درها 1 در 2 متر در نظر گرفته شده است)</p><br>


<p style="font-family:calibri">لطفا نوع رنگ اکریلیک مورد نظر خود را انتخاب کنید</p>
<p style="font-family:calibri">
  <input type="radio" id="one" name="paint" value="one">
  <label for="one">رنگ اکریلیک طلایی</label><br>
  <input type="radio" id="two" name="paint" value="two">
  <label for="two">رنگ اکریلیک متالیک صدفی</label><br>
  <input type="radio" id="three" name="paint" value="three">
  <label for="three">رنگ اکریلیک مات</label><br>
  <input type="radio" id="four" name="paint" value="four">
  <label for="four">رنگ اکریلیک نیم براق</label><br>
  <input type="radio" id="five" name="paint" value="five">
  <label for="five">رنگ اکریلیک براق</label><br>
  <input type="radio" id="six" name="paint" value="six">
  <label for="six">رنگ اکریلیک آستری</label><br>
  <input type="radio" id="seven" name="paint" value="seven">
  <label for="seven">مادر رنگ اکریلیک</label><br>
</p>
  <p>
    <button> <p style="font-family:calibri"> <font size="5"> محاسبه رنگ موردنیاز </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)  " "   " "  "لیتر";
  document.getElementById("total").style.fontSize = "xx-large";
  document.getElementById("total").style.fontFamily = "calibri";
  total.style.color = "red";
  document.getElementById("total").style.border = "thin solid red";


  return false;
}


function calculator() {
  var p = myPaint();
  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))/p ;
  return total;
}


function myPaint() {
  var grade7 = parseFloat(document.getElementById('paint').value * 1);
  var paint;
  if (grade7 == one) {
    paint = 8;
  } else if (grade7 == two) {
    paint = 8;
 else if (grade7 == three) {
    paint = 13;
  }  else if (grade7 == four) {
    paint = 14;
  } else if (grade7 == five) {
    paint = 13;
  } else if (grade7 == six) {
    paint = 10;
  }else {
    paint = 12;
  }
return paint;
}

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

Ответ №1:

здесь вы можете прочитать о переключателях — https://www.w3schools.com/jsref/prop_radio_checked.asp

Я думаю, проблема в том, что вы проверяете значение, но не проверяете

попробуйте if(document.querySelector(.someRadioButton).checked === true) или что-то еще idk

Комментарии:

1. Спасибо. Я не могу решить проблему, поэтому я прочитаю ссылку, которую вы упомянули