Is there a way to modify initialValue's value following every iteration?

Question

Is there a way to modify initialValue's value following every iteration?

I need assistance in changing the value of initialValue after each operation. For example, if I input 1000, the output should be 11,000 (10,000 + 1,000). Then, if I subtract and input 2000, the output should be 9,000 (11,000 - 2,000). Can anyone provide guidance on how to solve this issue?

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

// Body tag JavaScript
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> // Radio button for Add
<input type="radio" id="rdoMinus" name="rdo">Minus<br><br> // Radio button for Subtract
<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>

I want to change the value of initialValue after each run Ex: If I type 1000, this will give the output as 11,000 (10000 + 1,000), and I minus and I type 2000, this will give the output as 9,000 (11,000 - 2,000). Can somebody help me regarding to my problem.

function printResult() {
        var display = "";
        var initialValue = 10000;
        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);

        for(const person of personList) {
            if(rdoAdd.checked) {
                display = "<tr>";
                display += "<td>" + (person.addNum()) + "</td>";
                display += "<tr>";
                tblResult.innerHTML += display;
            resetx();

            } else if(rdoMinus.checked){
                display = "<tr>";
                display += "<td>" + (person.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;
};
}

javascript arrays oop

Answer 1

Answer №1

To handle the stateless nature of HTTP and perform operations on multiple actions, it is necessary to store the result of each action somewhere. One simple approach is to create a hidden field in the HTML page. This field can be initialized with a value of 10000 when the page loads and then update its value after each action.

Suppose you have a hidden field in your HTML like this:

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

Here's an updated version of your printResult method:

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;
    }

Note: This is a basic example demonstrating data persistence. In practice, data would typically be persisted on a server.

The provided code handles scenarios with only one person in the list. If you want to work with an array of persons, you will need to enhance the logic accordingly.

Answer 2

To handle the stateless nature of HTTP and perform operations on multiple actions, it is necessary to store the result of each action somewhere. One simple approach is to create a hidden field in the HTML page. This field can be initialized with a value of 10000 when the page loads and then update its value after each action.

Suppose you have a hidden field in your HTML like this:

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

Here's an updated version of your printResult method:

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;
    }

Note: This is a basic example demonstrating data persistence. In practice, data would typically be persisted on a server.

The provided code handles scenarios with only one person in the list. If you want to work with an array of persons, you will need to enhance the logic accordingly.

Answer 3

Answer №2

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

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

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

  calculateEl.addEventListener('click', handleCalculateClick)
  displayCalculation(initialValue);

Link to jsFiddle

Answer 4

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

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

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

  calculateEl.addEventListener('click', handleCalculateClick)
  displayCalculation(initialValue);

Link to jsFiddle

Is there a way to modify initialValue's value following every iteration?

Answer №1

Answer №2

Similar questions

Is there a way to automatically close one menu when another is opened by clicking?

Issues arise when attempting to manipulate the DOM with ng-view in AngularJS

Customize your payment with a PayPal button tailored to your desired price

Encountering the error message "Unable to access property 'addEventListener' of null while trying to manipulate innerHTML"

Obtaining an array element from mongoose at the corresponding index of the query

When a user hovers over an li element, jQuery will dynamically adjust the width of the element based

Creating operations in Angular using the Model View Controller (MVC)

Dealing with the hAxis number/string dilemma in Google Charts (Working with Jquery ajax JSON data)

PHP and MySQL with jQuery and AJAX combine to create a real-time news feed update system similar to Twitter

What is the best way to display only li elements that possess a specific class utilizing javascript / jquery?

How can we allocate array elements dynamically within div elements to ensure that each row contains no more than N items using only HTML and JavaScript?

Leveraging Vue 3 Composition API with accessors

Enhance jQuery event handling by adding a new event handler to an existing click event

Utilizing OpenLayers3 to create a global JavaScript variable

Utilize React without integrating a router component

Measuring the success of Vuejs app

Experiencing a problem with the JavaScript loading function

First experience with Django Bootstrap Modal Ajax was flawless, but on the second attempt, it was not as successful

Incorporate a CSS class name with a TypeScript property in Angular version 7

toggle back and forth between two div elements