как вывести минимальное значение из массива на сайте - PullRequest
Новая
       2

как вывести минимальное значение из массива на сайте

1 голос
/ 06 февраля 2020

у меня есть входные значения, а js создает массив. Мне нужно, чтобы все значения были отсортированы по значениям и вывести минимальное значение на веб-странице. Пользователь должен увидеть что-то вроде этого: тема, которую вы получите (3 (например)), должна быть улучшена в ближайшие несколько дней. пожалуйста, ребята! 

document.querySelector('button').addEventListener('click', function(e) {
  var inputs = document.querySelectorAll('input');    

  var obj = [].reduce.call(inputs, (accumulator, currentValue, currentIndex) => {
    accumulator[`val${currentIndex}`] = currentValue.value
    return accumulator
  }, {})
  
  console.log(obj)
});
<form>
    <table id="tblSearchTally">
        <tr>
            <td>Biology:<input type= "text" ></td>     
        </tr>
        <tr>
            <td>Chemistry:<input type= "text" ></td>      </tr>
        <tr>
            <td>Physics:<input type= "text" ></td>      </tr>
        <tr>
            <td>Math:<input type= "text" ></td>     
        </tr>
  
    </table>
  <button type="button">Go</button>
</form>

Ответы [ 5 ]

0 голосов
/ 06 февраля 2020

Подробности прокомментированы в демоверсии 

// Reference the DOM elements
// Get the first <form> on page
const form = document.forms[0];
// Collect all form controls with [name=grade] into a NodeList
const inputs = form.elements.grade;
const minCell = document.querySelector('.MIN');
const maxCell = document.querySelector('.MAX');

// Register the <form> to the click event
form.onclick = calc;

// Event handler passes event object
function calc(e) {

  // if clicked tag (ie e.target) is a button tag... 
  if (e.target.tagName === "BUTTON") {

    /* 
    covert NodeList into an array
    create an array of input values 
    and convert them into Numbers
    then return the array of Numbers 
    in order from least to greatest
    */
    let ordered = [...inputs].map(input => Number(input.value)).sort((a, b) => a - b);
    console.log(ordered);
    // Display the first Number of the Number array
    minCell.textContent = ordered[0];
    // Display the last Number of the Number array
    maxCell.textContent = ordered[ordered.length - 1];
  }
}
:root,
body {
  font: 700 small-caps 2vw/1.45 Consolas;
}

table,
td {
  table-layout: fixed;
  border-collapse: collapse;
  width: 200px;
  border: 1px solid #000
}

td {
  padding: 2px;
  width: 50%;
  text-align: right;
}

tfoot tr:first-of-type td {
  text-align: left;
}

tfoot tr:first-of-type td::before {
  content: attr(class)': ';
}

caption {
  font-size: 1.25rem
}

input {
  font: inherit;
  text-align: right;
  display: block;
  width: 85px
}

button {
  font: inherit;
  text-align: right;
}

.as-console-wrapper {
  width: 350px;
  min-height: 100%;
  margin-left: 45%;
}
<form>
  <table>
    <caption>Grades</caption>
    <tbody>
      <tr>
        <td>Biology: </td>
        <td><input name='grade' type="number" min='0' max='100' value='0'></td>
      </tr>
      <tr>
        <td>Chemistry: </td>
        <td><input name='grade' type="number" min='0' max='100' value='0'></td>
      </tr>
      <tr>
        <td>Physics: </td>
        <td><input name='grade' type="number" min='0' max='100' value='0'></td>
      </tr>
      <tr>
        <td>Math: </td>
        <td><input name='grade' type="number" min='0' max='100' value='0'></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td class='MIN'></td>
        <td class='MAX'></td>
      </tr>
      <tr>
        <td colspan='2'><button type="button">GO</button></td>
      </tr>
    </tfoot>

  </table>

</form>
0 голосов
/ 06 февраля 2020

Вы можете сделать это, используя jquery

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
</head>

<body>
<form>
    <table id="tblSearchTally">
        <tr>
            <td>Biology:<input type="text" /></td>
        </tr>
        <tr>
            <td>Chemistry:<input type="text" /></td>
        </tr>
        <tr>
            <td>Physics:<input type="text" /></td>
        </tr>
        <tr>
            <td>Math:<input type="text" /></td>
        </tr>
    </table>

    <input type="button" onclick="MinValue('input')" value="Go" />
</form>

<script>
    function MinValue(selector) {
        var min = null;
        $(selector).each(function () {
            var value = parseInt(this.value, 0);
            if (min === null || value < min) {
                min = value;
            }
        });
        console.log(min);
    }
</script>

0 голосов
/ 06 февраля 2020

создать массив баллов, а затем вычислить минимальное значение: 

const scores = [...inputs].map( x => Number(x.value) );
const min = Math.min( ...scores );
0 голосов
/ 06 февраля 2020

Вместо reduce вы можете использовать map для сохранения входных значений в массив и их сортировки. 

document.querySelector('button').addEventListener('click', function(e) {
  var inputs = document.querySelectorAll('input');    

  var values = [].map.call(inputs, inputEl => inputEl.value);
  values.sort();

  console.log(values);
});

Минимальное значение: values[0]

0 голосов
/ 06 февраля 2020

Поместите все значения в массив и используйте это: Math.min(...name_of_array) ;

Пример: 

var arr = [4,1,2,0,9,5];
Math.min(...arr) ;

Вывод будет: 0

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...