Question

我的初始值为10000，我想根据输入的值添加或减去该初始值。例如，我单击单选按钮名称“添加我要禁用第二个文本框”。在第一个文本框中输入一个值。添加初始值和textbox1的值。当我单击第二个单选按钮名称减时，我想将第一文本框减第二文本框禁用为初始值。 OOP风格。当我单击计算按钮时，它将显示答案并将其恢复为正常值，因此我可以选择并输入另一个数字，将其添加到表格中。

//external script
function Compute(initialNum, numOne, numTwo) {
	this._initialNum = initialNum; // 10000
	this._numOne = numOne; //input by user
	this._numTwo = numTwo; //input by user

	this.addNum = function() {
			  
			  this._initialNum = this._initialNum + this._numOne;
			  return this._initialNum;
			};
	this.minusNum = function() {
			  
			  this._initialNum = this._initialNum - this._numTwo;
			  return this._initialNum;
			};
}
	//JavaScript in <body>
	var initialValue = 10000;
	var numOne = parseInt(document.getElementById('txtNumOne'));
	var numTwo = parseInt(document.getElementById('txtNumTwo'));
	var rdoAdd = document.getElementById("rdoAdd").value;
    var rdoMinus = document.getElementById("rdoMinus").value;
	var tblResult = document.getElementById("tblResult");

	function disableTxtAdd() {
       if(rdoAdd == "rdoAdd") {
            document.getElementById("txtNumTwo").disabled = true;
       }
       else{
       		document.getElementById("txtNumTwo").disabled = false;
       }
   }
    function disableTxtMinus() {
       if(rdoMinus == "rdoMinus") {
            document.getElementById("txtNumOne").disabled = true;
       }
       else{
       		document.getElementById("txtNumOne").disabled = false;
       }
   }
	function print() {
		var objAccount = new Compute(initialValue, numOne.value, numTwo.value);
		var display = "";

		if(rdoAdd.checked)
		{
			display += "<tr>";
			display += "<td>" + objAccount.addNum() + "</td>";
			display += "<tr>";
			tblResult.innerHTML = display;

		} else {
			display += "<tr>";
			display += "<td>" + objAccount.minusNum() + "</td>";
			display += "<tr>";
			tblResult.innerHTML = display;
		}
	}

<input name = "operation" type = "radio" id = "rdoAdd" value = "rdoAdd" onclick = "disableTxtAdd()">Add<br><br>
	<input name = "operation" type = "radio" id = "rdoMinus" value = "rdoMinus" onclick = "disableTxtMinus()">Minus<br><br>
	Deposit:<br><br>
	<input type = "text" id = "txtNumOne"><br><br>
	Withdraw<br><br>
	<input type = "text" id = "txtNumTwo">
	<button onclick = "print()">Compute</button><br><br>

	<table border = "1px">
		<th>Result</th>

		<tbody id = "tblResult">
			
		</tbody>
	</table>

Answer 1

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Angelica's calculator</title>

 <script>
 // When the Add button is clicked
 function disableTxtAdd() {

        document.getElementById("txtNumTwo").disabled = true;
        document.getElementById("txtNumOne").disabled = false;

 }

 // When the Minus button is clicked   
 function disableTxtMinus() {

        document.getElementById("txtNumOne").disabled = true;
        document.getElementById("txtNumTwo").disabled = false;

 }

 // When the Compute button is clicked
 function print(){

     var initialValue = 10000;
     var numOne = document.getElementById('txtNumOne').value;
     var numTwo = document.getElementById('txtNumTwo').value;   

     var tblResult = document.getElementById("tblResult");  

     var display;
     var result;


    if(document.getElementById("txtNumTwo").disabled){

     // Add input value to 10000
         if(Number.isInteger(parseInt(numOne))){

             result = initialValue + parseInt(numOne);

         }else{

             result = "Enter a number";

         }

        display = "<tr><td>" + result + "</td><tr>";

        tblResult.innerHTML = display;

         }else if(document.getElementById("txtNumOne").disabled){

             // Subtract input from 10000
             if(Number.isInteger(parseInt(numTwo))){

                 result = initialValue - parseInt(numTwo);

             }else{

                 result = "Enter a number";

             }

        display = "<tr><td>" + result + "</td><tr>";

        tblResult.innerHTML = display;
     }

     // Enable both inputs
     document.getElementById("txtNumTwo").disabled = false;
     document.getElementById("txtNumOne").disabled = false; 

     // Empty the inputs
     document.getElementById("txtNumTwo").value = "";
     document.getElementById("txtNumOne").value = "";           

 }
 </script>  

 </head>
 <body>

 <input name="operation" type="radio" id="rdoAdd" value="rdoAdd" onclick="disableTxtAdd()">Add<br><br>
 <input name="operation" type="radio" id="rdoMinus" value="rdoMinus" onclick="disableTxtMinus()">Minus<br><br>

 Deposit:<br />
 <input type="text" id="txtNumOne"><br /><br />

 Withdraw<br />
 <input type="text" id="txtNumTwo"><br /><br />

 <button onclick="print()">Compute</button><br /><br />

 <table border="1px" style="border-collapse:collapse";>
    <th>Result</th>

    <tbody id = "tblResult">

    </tbody>
 </table>


 </body>
 </html>

如何避免NaN并在OOP Javascript上添加和减去

1 个答案: