javascript - 如何在网站上输出数组中的最小值

Question

我有输入值，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>

Answer 1

demo中有详细评论

// 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>