select change event

select change event

by rainiscool

HTML

<div class="inner">
  <table>
    <caption>Список оценок</caption>
    <tr>
      <th>Фамилия</th>
      <th>Оценка</th>
      <tr/>
      <tr>
        <td>Иванов</td>
        <td>
          <select id="student1">
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Петров</td>
        <td>
          <select id="student2">
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Сидоров</td>
        <td>
          <select id="student3">
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Петрова</td>
        <td>
          <select id="student4">
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Иванова</td>
        <td>
          <select id="student5">
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </td>
      </tr>
  </table>
  <button value="Рассчитать" id="btn1">Рассчитать</button>
</div>

CSS

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
}

table caption {
  text-align: center;
  font-size: 25px;
  padding: 5px;
}

body {
  background: black;
  color: white;
  font-family: 'Open Sans', sans-serif;
}

select {
  cursor: pointer;
  border: none;
  color: white;
  background: black;
}

table {
  text-align: center;
}

table tr {
  border: 2px solid black;
}

table tr:hover {
  background: white;
  transition: .2s linear;
  color: black;
}

table th {
  border: 2px solid black;
  padding: 5px 40px;
  background: red;
}

table td {
  border: 2px solid black;
  padding: 3px;
}

button {
  width 140px;
  height 140px;
}

JavaScript

$('button').on('click', function() {
  var array = [];
  var mark1 = $("#student1 :selected").val();
  array[0] = Number(mark1);
  var mark2 = $("#student2 :selected").val();
  array[1] = Number(mark2);
  var mark3 = $("#student3 :selected").val();
  array[2] = Number(mark3);
  var mark4 = $("#student4 :selected").val();
  array[3] = Number(mark4)
  var mark5 = $("#student5 :selected").val();
  array[4] = Number(mark5);

  //средний балл до
  var sum = 0,
    middle = 0;
  for (var i = 0; i < 5; i++) {
    sum += array[i];
  };
  middleBefore = sum / array.length;

  //замена двоек на тройки
  var count = 0; //счетчик 
  for (var i = 0; i < array.length; i++) {
    if (array[i] == 2) {
      array[i] = 3;
      count++;
    };
  };
  //средний балл после
  var sum = 0,
    middle = 0;
  for (var i = 0; i < array.length; i++) {
    sum += array[i];
  };
  middleAfter = sum / array.length;
  $('.inner').append("<p>Средний балл до замены: " + middleBefore).addClass('animated flash'); 
  $('.inner').append("<p>Двоек заменено: " + count);
  $('.inner').append("<p>Средний балл после замены: " + middleAfter);
});