stackoom
  简体   繁体   中英

How can I change the initial value on JavaScript

 原文  2018-08-25 14:35:05  7   4    javascript

Question

For example I have an initial value of 10,000 when I click the radio button which is "Minus" and I enter a value of 1000 the initial value will become 9000. And when I click the radio button "Add" and I enter a value of 2000 current initial which is 9000 + 2000 is equal to 11,000.

The problem is the initialValue back to it's original value which is 10,000. 

 //external script function Compute(initialNum, numOne) { this._initialNum = initialNum; this._numOne = numOne; this.addNum = function() { alert(this._initialNum = this._initialNum + this._numOne); return this._initialNum; }; this.minusNum = function() { alert(this._initialNum = this._initialNum - this._numOne); return this._initialNum; }; } //body script var rdoAdd = document.getElementById("rdoAdd"); var rdoMinus = document.getElementById("rdoMinus"); var tblResult = document.getElementById("tblResult"); function printResult() { var initialValue = 10000, deposit = 0, withdraws = 0; var rdoAdd = document.getElementById("rdoAdd"); var rdoMinus = document.getElementById("rdoMinus"); var numOne = parseInt(document.getElementById('txtNumOne').value); var objAccount = new Compute(initialValue, numOne); if (rdoAdd.checked) { deposit += objAccount.addNum(); display = "<tr>"; display += "<td>" + deposit + "</td>"; display += "<tr>"; tblResult.innerHTML += display; resetx(); } else { withdraws += objAccount.minusNum(); display = "<tr>"; display += "<td>" + withdraws + "</td>"; display += "<tr>"; tblResult.innerHTML += display; resetx(); } } function resetx() { document.getElementById('txtNumOne').value = ""; document.getElementById("rdoAdd").checked = false; document.getElementById("rdoMinus").checked = false; } 
 <input type="radio" id="rdoAdd" name="rdo" required>Add<br><br> <input type="radio" id="rdoMinus" name="rdo" reuired>Minus<br><br> <input type="text" id="txtNumOne"><br><br> <!-- Withdraw<br><br> <input type="text" id="txtNumTwo"> --> <button onclick="printResult()">Compute</button><br><br> <table border="1px"> <th>Result</th> <tbody id = "tblResult"> </tbody> </table>

4 answers

solution1
 0  2018-08-25 14:37:01

Just move 

 var initialValue = 10000;
 var objAccount = new Compute(initialValue);

outside of the printResult function.

solution2
 0  2018-08-25 14:48:36

This is just a scope related issue. If you use var inside the function, it'll redeclare or create a new instance of initialValue in local scope .

If you want to change the value of variable initialValue , then don't use var . This will only change the variable defined in the global scope ...

This works since the JavaScript interpreter firstly checks if there is an instance of the given variable in the local scope or not. If not, then it will check the existence of the variable in global scope.

EDIT :

As per your problem, you want the value of initialValue to persist after each calculation. In order to achieve this, you must first declare the object objAccount in the global scope outside the printResult() function; since in the code, every time the function printValue() is called, a new instance of Compute ( objAccount ) is being created. Secondly, you should remove the numOne attribute from Compute class and instead pass numOne as a parameter to addNum() and minusNum() .

You can modify the methods of Compute as: 

this.addNum = function(_numOne) {
    ...
}

this.minusNum = function(_numOne) {
    ...
}

And while calling the methods, 

objAccount.addNum(<some_number>);

and 

objAccount.minusNum(<some_number>);

After this, you need not even use deposit or withdraws ... 

if (rdoAdd.checked) {
    objAccount.minusNum(numOne);    // This will directly adjust `initialValue`
    display = "<tr>";
    display += "<td>" + objAccount._initialNum + "</td>";
    display += "<tr>";
    tblResult.innerHTML += display;

    resetx();
}

Similarly, do the same with the else statement...

Bonus: You seem to be using ES5 style, instead use ES6 (includes keywords like class & let : similar to var )

Here's a snippet (using ES6 classes ) 

 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <input type="radio" id="rdoAdd" name="rdo" required>Add<br><br> <input type="radio" id="rdoMinus" name="rdo" reuired>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> class Compute { constructor(initialNum) { this._initialNum = initialNum; } addNum(_numOne) { alert(this._initialNum += _numOne); return this._initialNum; }; minusNum(_numOne) { alert(this._initialNum -= _numOne); return this._initialNum; }; } var rdoAdd = document.getElementById("rdoAdd"); var rdoMinus = document.getElementById("rdoMinus"); var tblResult = document.getElementById("tblResult"); var initialValue = 10000; var objAccount = new Compute(initialValue); function printResult() { var display = ""; var rdoAdd = document.getElementById("rdoAdd"); var rdoMinus = document.getElementById("rdoMinus"); var numOne = parseInt(document.getElementById('txtNumOne').value); if (rdoAdd.checked) { objAccount.addNum(numOne); // This will directly adjust `initialValue` display = "<tr>"; display += "<td>" + objAccount._initialNum + "</td>"; display += "<tr>"; tblResult.innerHTML += display; resetx(); } else { objAccount.minusNum(numOne); // This will directly adjust `initialValue` display = "<tr>"; display += "<td>" + objAccount._initialNum + "</td>"; display += "<tr>"; tblResult.innerHTML += display; resetx(); } } function resetx() { document.getElementById('txtNumOne').value = ""; document.getElementById("rdoAdd").checked = false; document.getElementById("rdoMinus").checked = false; } </script> </body> </html>

solution3
 0  2018-08-26 10:14:23

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <input type="radio" id="rdoAdd" name="rdo" required>Add<br><br>
    <input type="radio" id="rdoMinus" name="rdo" reuired>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 rdoAdd = document.getElementById("rdoAdd");
    var rdoMinus = document.getElementById("rdoMinus");
    var tblResult = document.getElementById("tblResult");
    var initialValue = 10000;
    var objAccount = new Compute(initialValue);

function printResult() {
    var display = "";
    var rdoAdd = document.getElementById("rdoAdd");
    var rdoMinus = document.getElementById("rdoMinus");
    var numOne = parseInt(document.getElementById('txtNumOne').value);

    if (rdoAdd.checked) {
    objAccount.addNum(numOne);    // This will directly adjust `initialValue`
    display = "<tr>";
    display += "<td>" + objAccount._initialValue + "</td>";
    display += "<tr>";
    tblResult.innerHTML += display;

    resetx();
    } else {
    objAccount.minusNum(numOne);    // This will directly adjust `initialValue`
    display = "<tr>";
    display += "<td>" + objAccount._initialValue + "</td>";
    display += "<tr>";
    tblResult.innerHTML += display;

    resetx();
    }
}
function resetx() {
    document.getElementById('txtNumOne').value = "";
    document.getElementById("rdoAdd").checked = false;
    document.getElementById("rdoMinus").checked = false;
}

</script>
</body>
</html>

solution4
 0  2018-08-26 15:15:31

function Compute(initialNum) {
    this._initialNum = initialNum;

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

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can i change a value in javascript? Although I change the text of label it still returns initial value, how can I solve? How to set a initial value for a text field in a form? This value is generated from a javascript function. How can i define the event without botton? React - How can I change multiple initial states based on the props How can i change the PHP value in textbox through Javascript How can I change one value in style attribute with JavaScript? How can I change an XML element value from JavaScript? How can I use HTML and Javascript together to change the variable value? How can i change object's item value in a loop in javascript? How can I change the color in javascript depending of object value
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM