I am a student of grade 11, I must create a calculator for 4 arithmetic operations in the form:

текст. поле | "radio" -сложение | текст. поле | = текст. поле | "radio" -вычитание| | "radio" -умножение| | "radio" -деление |

Why this program does not work: in the first text. field I enter a number, I enter a number into the second text field, I put the "checked" in addition, I click on the "result", but nothing appears in the third field.

 <html> <head> <title>jhgf</title> <body bgcolor=pink> <form name="form1"> <input type=text name=text1 size=5> <input type=r adio name=a rifm1>додавання <input type=text name=text2 size=5>= <input type=text name=text3 size=15> <br> <font color=pink>----------</font> <input type=r adio name=a rifm1>віднімання <br> <font color=pink>----------</font> <input type=r adio name=a rifm1>множення <br> <font color=pink>----------</font> <input type=r adio name=a rifm1>ділення <br> <input type=button value=результат onClick="getRadioValue()"> <!--<br><input type=button value="Вихід" `onClick= f()>--> </form> </body> <script language="javaScript"> function getRadioValue() { var num = document.form1.elements.length; var a = true; for (var i = 0; i < num; i++) { var x = Number(document.form1.text1.value); var y = Number(document.form1.text2.value); if (document.form1.elements[i].type == 'radio'.checked) { document.form1.text3.value = x + y; a = false; break; } } return a; } </script> </head> </html>
  • @ Oleg2012 Check what is not working. - Nicolas Chabanovsky ♦

2 answers 2

All the radio buttons are the same for you; it is quite difficult to distinguish one from the other. Of course, you can search by the text element following the button or by the order of the next, but this is unreliable, you can get confused as a result.

It is better to assign an id to each radio button and check the checked state of each of them and perform the appropriate action.

 <input type="radio" name="arifm1" id="plus"><label for="plus">додавання</label>

and use it like this (the cycle is no longer needed!):

 if (document.getElementById("plus").checked) { //здесь вычислять результат сложения }

similar for other actions.

     <html> <head> <title>Калькулятор</title> <script language="javaScript"> function getRadioValue() { txt1=document.getElementById("text1"); txt2=document.getElementById("text2"); txt3=document.getElementById("text3"); op1=document.getElementById("op1"); op2=document.getElementById("op1"); op3=document.getElementById("op1"); op4=document.getElementById("op1"); if(op1.checked){txt3.value=(parseFloat(txt1.value)+parseFloat(txt2.value));} if(op2.checked){txt3.value=(parseFloat(txt1.value)-parseFloat(txt2.value));} if(op1.checked){txt3.value=(parseFloat(txt1.value)*parseFloat(txt2.value));} if(op1.checked){txt3.value=(parseFloat(txt1.value)/parseFloat(txt2.value));} alert(text3.value); } </script> </head> <body bgcolor="#FF99FF"> <input type="text" id="text1"> <input type="text" id="text2"> <input type="text" id="text3"> <br> <input type="radio" id="op1" name="res"><label for="op1">Сложение</label> <br> <input type="radio" id="op2" name="res"><label for="op2">Вычитание</label> <br> <input type="radio" id="op3" name="res"><label for="op3">Умножение</label> <br> <input type="radio" id="op4" name="res"><label for="op4">Делениние</label> <br> <input type="button" value="результат" onClick="getRadioValue()"> </body> </html>