Как я могу избежать NaN и добавить и вычесть в ООП Javascript - PullRequest
Новая
       0

Как я могу избежать NaN и добавить и вычесть в ООП Javascript

0 голосов
/ 25 августа 2018

У меня есть начальное значение 10000, и я хочу добавить или вычесть начальное значение в зависимости от введенного значения. Например, я нажимаю переключатель с именем «Добавить». Я хочу отключить 2-й текстовый блок. Введите значение в 1-е текстовое поле. Добавьте начальное значение и значение textbox1. Когда я нажимаю 2-й переключатель с именем «Минус», я хочу отключить 1-й текстовый блок минус 2-й текстовый блок до начального значения. ООП стиль. Когда я нажимаю кнопку вычисления, он показывает ответ и возвращает его к нормальному состоянию, чтобы я мог выбрать и ввести другое число, добавив его в таблицу. 

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

1 Ответ

0 голосов
/ 26 августа 2018 
 <!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...