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

Clear session data when logging out from a dropdown list

Can I use npm's jQuery in an old-school HTML format?

employing a directive to call upon a controller function triggering a straightforward alert display

Guide on inputting information into a dual-column table where one column is linked to the other

Searching for a document using the $eq operator in MongoDB within the context of Next.js - what is

Should the page.js in a Next.js App router be a server component?

The object returns true when the specified condition matches the key within the object

ReactJS is struggling to showcase an image stored in the backend folder with the help of node

Leveraging oEmbed - JSON data (within client-side JavaScript)

What could be causing the "AJAX data not defined" error

Issue with FullPageJS: scrollOverflow feature not functioning upon click event

What is the best way to display a 404 error page for a nonexistent child page on a WordPress site?

trigger a p:ajax event by employing a right-click action

The Autocomplete feature in Material-UI is not rendering any output

AngularJS: Compile a particular template

asp.net website fully compressed using GZip

XSRF Cookies are failing to attach to the request header when an https iframe is being loaded on an http site

Using TypeScript with React: Initializing State in the Constructor

What is the best way to incorporate and organize the templateHyper folder within an established web project directory?

The Shopify storefront API's create cart mutation generates an HTML response when called