-1

私は JavaScript にかなり慣れていないので、割り当てに問題があります。2 つのテキスト フィールドからユーザー入力を取得し、それらを加算、減算、乗算、または除算してから、答えを表示する必要があります。回答を表示する方法もわかりません。段落に表示しようとしましたが、うまくいかないようです。前もって感謝します！

JavaScript

<script>
    var number=new Object();
    number.Num1="";
    number.Num2="";
            function processData(Num1,Num2) {

        // get all the fields' values
        number.Num1 = document.getElementById(Num1).value;
        number.Num2 = document.getElementById(Num2).value;

        //Check which radio button is checked
         if (document.getElementById('Add').checked) 

         //Shoot out answer
return Num1+Num2;
        //Write answer
document.getElementById("Answer").innerHTML=processData(Num1,Num2)

            }
</script>

HTMLフォーム

<table><tr>
<td height="600" align="center"><form id="form1" name="form1" method="post" action="">
  <p>Input the two numbers that you wish to calculate!</p>
  <p>
    <label>First Number!
      <input type="text" name="Num1" id="Num1" />
    </label>
  </p>
  <p>
    <label>Second Number!
      <input type="text" name="Num2" id="Num2" />
    </label>
  </p>
  <p>Please choose what you wish to do with the numbers!</p>
  <p>
    <label>
      <input type="radio" name="Add" value="Add" id="Add" />
      Add</label>
    <br />
    <label>
      <input type="radio" name="Multiply" value="Multiply" id="Multiply" />
      Multiply</label>
    <br />
    <label>
      <input type="radio" name="Substract" value="Substract" id="Substract" />
      Substract</label>
    <br />
    <label>
      <input type="radio" name="Divide" value="Divide" id="Divide" />
      Divide</label>
  </p>
  <p>Click Submit to get your answer!</p>
  <p>
    <label>Click me!
       <input type="submit" name="Button" id="Button" value="Submit" onclick="processData('Num1','Num2')" />
    </label>
  </p>
  <p>Your answer is : </p> <p id="Answer"> </p><br />

</form></td>
</tr>
</table>
4

2 に答える 2

0

最初にラジオボタンに同じ名前を付けて、1つのラジオボタンのみがチェックされるようにするグループを示します。「操作」のように言ってみましょう

<p>
<label>
  <input type="radio" name="Operation" value="Add" id="Add" />
  Add</label>
<br />
<label>
  <input type="radio" name="Operation" value="Multiply" id="Multiply" />
  Multiply</label>
<br />
<label>
  <input type="radio" name="Operation" value="Substract" id="Substract" />
  Substract</label>
<br />
<label>
  <input type="radio" name="Operation" value="Divide" id="Divide" />
  Divide</label>
</p>

jsコードを次のように変更します

var number=new Object();
number.Num1= 0;
number.Num2= 0;

function processData(Num1,Num2) {

    // get all the fields' values
    // parse your fields value to number
    number.Num1 = Number(document.getElementById(Num1).value);
    number.Num2 = Number(document.getElementById(Num2).value);

    // a variable to hold the answer
    var answer = 0; 

    //Check which radio button is checked
    if (document.getElementById('Add').checked) {
        answer = number.Num1 + number.Num2;
    } else if (document.getElementById('Multiply').checked) {
        answer = number.Num1 * number.Num2;
    } else if (document.getElementById('Subtract').checked) {
        answer = number.Num1 - number.Num2;
    } else if (document.getElementById('Divide').checked) {
        // if number.Num2 =0 then it will product Divide by Zero error
        // So We are checking if number.Num2 === 0 then display 0 else perform the operation.

        answer = number.Num2 === 0 ? 0 : (number.Num1 / number.Num2);

        // You can also change this ternary operation to if..else condition like
        /*
         if(number.Num2 !== 0){
            answer = number.Num1 / number.Num2;
         }
        */

    }

    document.getElementById("Answer").innerHTML = answer;

    return false;
 }

フォームの送信を防ぐためにボタンのマークアップを変更する必要があります。変更することができます (フォームを送信しないようにタイプをボタンに変更します)。

<input type="button" name="Button" id="Button" value="Submit" onclick="processData('Num1','Num2')" />

または (return false を js 関数の最後に配置し、onclick を変更onclick="return processData('Num1','Num2')"してフォームを送信しないようにします。

<input type="submit" name="Button" id="Button" value="Submit" onclick="return processData('Num1','Num2')" />
于 2013-11-14T13:56:07.797 に答える