每次运行后如何更改initialValue的值？

时间：2018-08-26 02:15:20

标签： javascript arrays oop

我想在每次运行后更改initialValue的值例如：如果我键入1000，则输出将为11,000（10000 + 1,000），如果我减去并键入2000，则将输出为9,000（11,000-2,000）。有人可以帮我解决我的问题吗？ 

function Compute(initialNum, numOne) {
this._initialNum = 10000;
this._numOne = numOne;

this.addNum = function() {
	this._initialNum = +this._initialNum + +this._numOne;
	return this._initialNum;
};

this.minusNum = function() {
	this._initialNum = +this._initialNum - +this._numOne;
	return this._initialNum;
};
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<input type="hidden" id="persistedResult" value="10000" /><br><br>
<input type="radio" id="rdoAdd" name="rdo">Add<br><br>
<input type="radio" id="rdoMinus" name="rdo">Minus<br><br>
<input type="text" id="txtNumOne"><br><br>
<button onclick="printResult()">Compute</button><br><br>

<table border="1px">
<th>Result</th>

<tbody id = "tblResult">

</tbody>
</table>
<script src="java.js"></script>
<script>

var tblResult = document.getElementById("tblResult");
var personList = [];

function printResult() {
        var display = "";
        var initialValue = parseInt(document.getElementById("persistedResult").value);
        //var objAccount = new Compute(initialValue, numOne);
        var rdoAdd = document.getElementById("rdoAdd");
        var rdoMinus = document.getElementById("rdoMinus");
        var numOne = parseInt(document.getElementById('txtNumOne').value);
        //var numTwo = parseInt(document.getElementById('txtNumTwo').value);
        var objCompute = new Compute(initialValue, numOne);
        personList.push(objCompute);

        console.log(personList);
        var newValue = 0;
        for(var i = 0; i < personList.length; i++) {
            if(rdoAdd.checked) {
                //display += objAccount.addNum(); 
                newValue = personList[i].addNum();
                display = "<tr>";
                display += "<td>" + (newValue) + "</td>";
                display += "<tr>";
                tblResult.innerHTML += display;
            resetx();

            } else if(rdoMinus.checked){
                //display += objAccount.minusNum();
                newValue = personList[i]. minusNum();
                display = "<tr>";
                display += "<td>" + (newValue) + "</td>"; 
                display += "<tr>";
                tblResult.innerHTML += display;
            resetx();
        }
    }
    document.getElementById("persistedResult").value = newValue;
}
	function resetx() {
		document.getElementById('txtNumOne').value = "";
		document.getElementById("rdoAdd").checked = false;
		document.getElementById("rdoMinus").checked = false;
	}
</script>

</body>
</html>

我想在每次运行后更改initialValue的值例如：如果我键入1000，则输出将为11,000（10000 + 1,000），如果我减去并键入2000，则将输出为9,000（11,000-2,000）。有人可以帮我解决我的问题吗？ 

//constructor function
function Compute(initialNum, numOne) {
this._initialNum = 10000;
this._numOne = numOne;

this.addNum = function() {
	this._initialNum = +this._initialNum + +this._numOne;
	return this._initialNum;
};

this.minusNum = function() {
	this._initialNum = +this._initialNum - +this._numOne;
	return this._initialNum;
};
}

//javascript in the body tag
var tblResult = document.getElementById("tblResult");
var personList = [];

function printResult() {
        var display = "";
        var initialValue = parseInt(document.getElementById("persistedResult").value);
        var rdoAdd = document.getElementById("rdoAdd");
        var rdoMinus = document.getElementById("rdoMinus");
        var numOne = parseInt(document.getElementById('txtNumOne').value);
        var objCompute = new Compute(initialValue, numOne);
        personList.push(objCompute);

        console.log(personList);
        var newValue = 0;
        for(var i = 0; i < personList.length; i++) {
            if(rdoAdd.checked) {
                newValue = personList[i].addNum();
                display = "<tr>";
                display += "<td>" + (newValue) + "</td>";
                display += "<tr>";
                tblResult.innerHTML += display;
            resetx();

            } else if(rdoMinus.checked){
                newValue = personList[i]. minusNum();
                display = "<tr>";
                display += "<td>" + (newValue) + "</td>"; 
                display += "<tr>";
                tblResult.innerHTML += display;
            resetx();
        }
    }
    document.getElementById("persistedResult").value = newValue;
}
	function resetx() {
		document.getElementById('txtNumOne').value = "";
		document.getElementById("rdoAdd").checked = false;
		document.getElementById("rdoMinus").checked = false;
	}
<!DOCTYPE html> 
<html>
<head>
<title></title>
</head>
<body>

<input type="hidden" id="persistedResult" value="10000" /><br><br>
<input type="radio" id="rdoAdd" name="rdo">Add<br><br> //rdo for Add
<input type="radio" id="rdoMinus" name="rdo">Minus<br><br> //rdo for Subs
<input type="text" id="txtNumOne"><br><br> 
<button onclick="printResult()">Compute</button><br><br>

<table border="1px">
<th>Result</th>

<tbody id = "tblResult">

</tbody>
</table>

</body>
</html>

我想在每次运行后更改initialValue的值例如：如果我键入1000，则输出将为11,000（10000 + 1,000），如果我减去并键入2000，则将输出为9,000（11,000-2,000）。有人可以帮我解决我的问题。 

function printResult() {
        var display = "";
        var initialValue = 10000;
        //var objAccount = new Compute(initialValue, numOne);
        var rdoAdd = document.getElementById("rdoAdd");
        var rdoMinus = document.getElementById("rdoMinus");
        var numOne = parseInt(document.getElementById('txtNumOne').value);
        //var numTwo = parseInt(document.getElementById('txtNumTwo').value);
        var objCompute = new Compute(initialValue, numOne);
        personList.push(objCompute);

        console.log(personList);

        for(var i = 0; i < personList.length; i++) {
            if(rdoAdd.checked) {
                //display += objAccount.addNum(); 
                display = "<tr>";
                display += "<td>" + (personList[i].addNum()) + "</td>";
                display += "<tr>";
                tblResult.innerHTML += display;
            resetx();

            } else if(rdoMinus.checked){
                //display += objAccount.minusNum();
                display = "<tr>";
                display += "<td>" + (personList[i].minusNum()) + "</td>"; 
                display += "<tr>";
                tblResult.innerHTML += display;
            resetx();
        }
    }
}

//Constructor Function
function Compute(initialNum, numOne) {
this._initialNum = initialNum;
this._numOne = numOne;


this.addNum = function() {
    this._initialNum += this._numOne;
    return this._initialNum;
};

this.minusNum = function() {
    this._initialNum -= this._numOne;
    return this._initialNum;
};
}

2 个答案:

答案 0 :(得分：0)

由于HTTP是无状态的，并且您想对2个不同的动作执行操作，因此您需要将每个动作的结果存储在某个位置。对于最简单的示例，您可以在HTML页面上创建隐藏字段。首次加载HTML时，该值可以为10000，并在执行每个操作后更新该值。

假设您在HTML上具有以下隐藏字段：

<input type=“hidden” id=“persistedResult” value=“10000” />

这是您更新的printResult方法：

function printResult() {
        var display = "";
        var initialValue = parseInt(document.getElementById(‘persistedResult’).value);
        //var objAccount = new Compute(initialValue, numOne);
        var rdoAdd = document.getElementById("rdoAdd");
        var rdoMinus = document.getElementById("rdoMinus");
        var numOne = parseInt(document.getElementById('txtNumOne').value);
        //var numTwo = parseInt(document.getElementById('txtNumTwo').value);
        var objCompute = new Compute(initialValue, numOne);
        personList.push(objCompute);

        console.log(personList);
        var newValue = 0;
        for(var i = 0; i < personList.length; i++) {
            if(rdoAdd.checked) {
                //display += objAccount.addNum(); 
                newValue = personList[i].addNum();
                display = "<tr>";
                display += "<td>" + (newValue) + "</td>";
                display += "<tr>";
                tblResult.innerHTML += display;
            resetx();

            } else if(rdoMinus.checked){
                //display += objAccount.minusNum();
                newValue = personList[i]. minusNum();
                display = "<tr>";
                display += "<td>" + (newValue) + "</td>"; 
                display += "<tr>";
                tblResult.innerHTML += display;
            resetx();
        }
    }
    document.getElementById(‘persistedResult’).value = newValue;
}
  

注意：这是一个原始示例，可指导您如何实现数据持久性。通常，数据将保留在服务器上。

     

此代码处理的情况是列表中只有一个人，这是您当前代码示例中的方法。如果您要在一组人员上进行此工作，则需要增强逻辑。

答案 1 :(得分：0)

  var valueEl = document.getElementById('value');
  var addEl = document.getElementById('add');
  var resultEl = document.getElementById('result');
  var calculateEl = document.getElementById('calculate');
  var initialValue = 1000;

  function appendResult(result) {
    var liEl = document.createElement("li");
    liEl.innerHTML = result;
        resultEl.appendChild(liEl);     
  }

  function handleClickCalculate() {
    var operand = addEl.checked ? 1 : -1;
    var value = +valueEl.value * operand;
    initialValue += value
    appendResult(initialValue);
  }

  calculateEl.addEventListener('click', handleClickCalculate)
  appendResult(initialValue);

jsFiddle

相关问题
最新问题