Javascript Multiple Functions At Once

As I needed help here @ryanpcmcquen offered great help, but as a 'noob' at javascript I would like to know 2 more things When I want to create another function how do I make it? do

Solution 1:

No need to add a new event, besides change1 is not a valid event, you can find a list of events here:

https://developer.mozilla.org/en-US/docs/Web/Events

Just put that conditional inside the original event handler:

document.addEventListener('DOMContentLoaded', function () {
  'use strict';

  var unitBlock = document.querySelector('select#unit_block');
  var unitRowBig = document.querySelector('select#unit_row_big');
  var unitRow = document.querySelector('select#unit_row');
  var unitColumn = document.querySelector('select#unit_column');
  var unitSize = document.querySelector('select#unit_size');

  unitBlock.addEventListener('change', function () {

    // You may want to comment out all of this section:if (unitBlock.value === 'A') {
      unitRowBig.disabled = false;
      unitRowBig[4].disabled = false;
    } else {
      unitRowBig.disabled = false;
      unitRowBig[4].disabled = true;
    }
    // Down to here.// Here's your code!if ((unitRowBig.value === '1') && (unitBlock.value === 'A')) {
      unitRow.disabled = false;
      unitRow[8].disabled = true;
      unitRow[9].disabled = true;
      unitRow[10].disabled = true;
      unitRow[11].disabled = true;
      unitRow[12].disabled = true;
    // Including an antithetical clause,// to account for the user changing their mind.
    } else {
      unitRow.disabled = true;
      unitRow[8].disabled = false;
      unitRow[9].disabled = false;
      unitRow[10].disabled = false;
      unitRow[11].disabled = false;
      unitRow[12].disabled = false;
    }
  });
});

Note that I also included the opposite disabled conditions in an else clause, in case the user makes one choice, and then changes to another.

Solution 2:

In case you really need two separate functions (what is not the case here), just do it like this:

unitBlock.addEventListener('change', function () {
   console.log('First event listener')
});


unitBlock.addEventListener('change', function () {
    console.log('Second event listener')
});

document.addEventListener stores all the functions you sent to him, so when the change event will be fired, it will execute all of them, in the order you passed them to it.

In short, when the change event is fired, you will have:

> "First event listener"> "Second event listener"

I hope this helped you!