Increasing numerical values within an array using JavaScript

Question

Increasing numerical values within an array using JavaScript

My goal is to enhance the functionality of this visualization by being able to increase or decrease the nodes in the hidden layers. I have attempted to achieve this by adding the following code:

I am facing difficulties in adjusting the number of hidden layers as intended. As a result, I am seeking assistance. Can anyone guide me on how to accomplish this task and whether my approach is correct?

for (var i = 0; i < vm.hiddenLayersDepths[hiddenLayerLoop]; i++) {
    function minus() {
        vm.hiddenLayersDepths.map(function(val){return --val;});
        //Arrays.fill(vm.hiddenLayersDepths, vm.hiddenLayersDepths[0] - 1);
    }

    function plus() {
        if (vm.hiddenLayersDepths[0] < 5) {
            vm.hiddenLayersDepths.map(function(val){return ++val;});
            //Arrays.fill(vm.hiddenLayersDepths, vm.hiddenLayersDepths[0] + 1);
        }
    }
}

EDIT: My aim is to apply the + or - operation independently to each hidden layer.

javascript angularjs d3.js

Answer 1

Answer №1

To implement this functionality, you can use event binding by incorporating ng-click with your button elements and assigning corresponding methods within your controller.

<input type="button" value="-" id="moins" ng-click="vm.decrementHiddenLayerCount()">
<input type="button" value="+" id="plus" ng-click="vm.incrementHiddenLayerCount()">

In your controller, include the appropriate event handlers. Within these handlers, simply modify the value of the ngModel. This ensures consistency between your view and model. Below is a snippet showcasing where to place the event handlers.

app.controller('MainCtrl', function( $scope, $interval, $window, $q ) {
    var vm = this;

vm.incrementHiddenLayerCount = function() {
  const hiddenValue = vm.hiddenLayerCountSlider.value;
  if (hiddenValue < vm.hiddenLayerCountSlider.options.ceil) {
    vm.hiddenLayerCountSlider.value += 1;
    vm.hiddenLayersCount = vm.hiddenLayerCountSlider.value;
    draw();
  }
  }

  vm.decrementHiddenLayerCount = function() {
    debugger;
    const hiddenValue = vm.hiddenLayerCountSlider.value;
    if (hiddenValue > vm.hiddenLayerCountSlider.options.floor) {
     vm.hiddenLayerCountSlider.value -= 1;
    vm.hiddenLayersCount = vm.hiddenLayerCountSlider.value;
    draw(); 
    }
  }

You can access the code in action at: https://codepen.io/jasdeep7991/pen/mdJayKg

Answer 2

To implement this functionality, you can use event binding by incorporating ng-click with your button elements and assigning corresponding methods within your controller.

<input type="button" value="-" id="moins" ng-click="vm.decrementHiddenLayerCount()">
<input type="button" value="+" id="plus" ng-click="vm.incrementHiddenLayerCount()">

In your controller, include the appropriate event handlers. Within these handlers, simply modify the value of the ngModel. This ensures consistency between your view and model. Below is a snippet showcasing where to place the event handlers.

app.controller('MainCtrl', function( $scope, $interval, $window, $q ) {
    var vm = this;

vm.incrementHiddenLayerCount = function() {
  const hiddenValue = vm.hiddenLayerCountSlider.value;
  if (hiddenValue < vm.hiddenLayerCountSlider.options.ceil) {
    vm.hiddenLayerCountSlider.value += 1;
    vm.hiddenLayersCount = vm.hiddenLayerCountSlider.value;
    draw();
  }
  }

  vm.decrementHiddenLayerCount = function() {
    debugger;
    const hiddenValue = vm.hiddenLayerCountSlider.value;
    if (hiddenValue > vm.hiddenLayerCountSlider.options.floor) {
     vm.hiddenLayerCountSlider.value -= 1;
    vm.hiddenLayersCount = vm.hiddenLayerCountSlider.value;
    draw(); 
    }
  }

You can access the code in action at: https://codepen.io/jasdeep7991/pen/mdJayKg

Answer 3

Answer №2

Utilizing Array.prototype.map()

By using the map() method, a new array is generated by applying a specified function to each element in the original array.

To update the values in the array as per the instructions provided for hiddenLayersDepths.

vm.minus = function() {
  vm.hiddenLayersDepths = vm.hiddenLayersDepths.map((i) => i - 1);
  draw();
};

vm.plus = function() {
  vm.hiddenLayersDepths = vm.hiddenLayersDepths.map((i) => i + 1);
  draw();
};

Experience how it works

https://codepen.io/aswinkumar863/pen/ZEGVYBp

Answer 4

Utilizing Array.prototype.map()

By using the map() method, a new array is generated by applying a specified function to each element in the original array.

To update the values in the array as per the instructions provided for hiddenLayersDepths.

vm.minus = function() {
  vm.hiddenLayersDepths = vm.hiddenLayersDepths.map((i) => i - 1);
  draw();
};

vm.plus = function() {
  vm.hiddenLayersDepths = vm.hiddenLayersDepths.map((i) => i + 1);
  draw();
};

Experience how it works

https://codepen.io/aswinkumar863/pen/ZEGVYBp

Answer 5

Answer №3

If you want to specifically include or exclude nodes from a SINGLE layer, each layer should have its own set of plus and minus buttons. To achieve this, when creating these buttons for each index in hiddenLayersCount, it would be beneficial to establish a 'dataset' connection between the set of plus and minus buttons and the corresponding layer. For example, if there are two hidden layers, you would generate buttons similar to the following HTML structure after inserting them with javascript:

<div class"plus-minus-container">
  <input data-id="0" type="button" value="-" class="minus-button">
  <input data-id="0" type="button" value="+" class="plus-button">
</div>

<div class"plus-minus-container">
  <input data-id="1" type="button" value="-" class="minus-button">
  <input data-id="1" type="button" value="+" class="plus-button">
</div>

When adding these buttons using javascript, you can attach click listeners to each button so that they trigger functions like addNodeToHiddenLayer() or removeNodeFromHiddenLayer() within the vm scope (or wherever the vm.hiddenLayersDepths array is accessible).

function addNodeToHiddenLayer(event){
  const layerIndex = parseInt(event.target.dataset.id,10);

  if (vm.hiddenLayersDepths[layerIndex] < 5) {
    vm.hiddenLayersDepths[layerIndex] += 1;
  }
}

function removeNodeToHiddenLayer(event){
  const layerIndex = parseInt(event.target.dataset.id,10);
  if (vm.hiddenLayersDepths[layerIndex] > 1) {
    vm.hiddenLayersDepths[layerIndex] -= 1;
  }
}

Answer 6

If you want to specifically include or exclude nodes from a SINGLE layer, each layer should have its own set of plus and minus buttons. To achieve this, when creating these buttons for each index in hiddenLayersCount, it would be beneficial to establish a 'dataset' connection between the set of plus and minus buttons and the corresponding layer. For example, if there are two hidden layers, you would generate buttons similar to the following HTML structure after inserting them with javascript:

<div class"plus-minus-container">
  <input data-id="0" type="button" value="-" class="minus-button">
  <input data-id="0" type="button" value="+" class="plus-button">
</div>

<div class"plus-minus-container">
  <input data-id="1" type="button" value="-" class="minus-button">
  <input data-id="1" type="button" value="+" class="plus-button">
</div>

When adding these buttons using javascript, you can attach click listeners to each button so that they trigger functions like addNodeToHiddenLayer() or removeNodeFromHiddenLayer() within the vm scope (or wherever the vm.hiddenLayersDepths array is accessible).

function addNodeToHiddenLayer(event){
  const layerIndex = parseInt(event.target.dataset.id,10);

  if (vm.hiddenLayersDepths[layerIndex] < 5) {
    vm.hiddenLayersDepths[layerIndex] += 1;
  }
}

function removeNodeToHiddenLayer(event){
  const layerIndex = parseInt(event.target.dataset.id,10);
  if (vm.hiddenLayersDepths[layerIndex] > 1) {
    vm.hiddenLayersDepths[layerIndex] -= 1;
  }
}

Increasing numerical values within an array using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

How to conditionally prevent event propagation to children in VueJs

Retrieving data from MongoDB and presenting it neatly in Bootstrap cards

Discovering a Match within a JavaScript Object and Array with the help of Jquery's Each

Setting the column width and border-top in Highcharts

Trouble accessing value in Vue.js

angular establish Header when an image is loaded

Managing multiple Sequelize DB connections in NestJS: A guide

Issues with zoom functionality not functioning properly within IE11

What is the best way to customize a component in a view?

Perform an AJAX request within a condition prior to executing the subsequent AJAX request

Creating a flowchart of a finite state machine within a browser-based software platform

If a condition is present, the checkbox in the list needs to be unchecked

Running two different versions of the same React-App concurrently: A step-by-step guide

Angular refuses to showcase the object

The md-autocomplete feature showcases search results in a list format rather than a dropdown menu

Accessing Stencil through a corporate proxy network

flatpickr allows you to synchronize the dates of two date pickers by setting the date of the second one to match the date

The seamless flow of web design

What is the best way to retrieve data from localStorage while using getServerSideProps?

Recognize when the DOM undergoes modifications