Question

当选择了Ok符号时，我的代码会生成一个数字矩阵。但是，我想添加一个排序功能，以便在结果＆＃34;按结果时按升序重新排列矩阵。按钮被选中。关于我怎么做的任何建议？

HTML代码

<div class="rightDiv">
<div id = "pastcalcblock"> 
    <h3> PAST CALCULATIONS </h3>
         <input type = "text" size = "1" id = "text1"/>
         <input type = "text" size = "1" id = "text2"/>
         <input type = "text" size = "1" id = "text3"/>
         <input type = "text" size = "1" id = "text4"/><br>
         <input type = "button" value = "Ok" id = "operation" onClick = "display()"/>
         <div id = "resultTab">
                SORT<br>
                    <input type = "button" value = "As Entered" id = "enteredBut">
                    <input type = "button" value = "By Result" id = "resultBut" onClick() = "sortDisplay()"><br><br>
                    <div id="expressions">
                    </div>                
            </div>
        </div>

Javascript代码

function display()
{
    var arrayOne =[document.getElementById('text1').value,document.getElementById('text2').value,document.getElementById('text3').value,document.getElementById('text4').value ];

    new_array=arrayOne.join(" ");
    var para = document.createElement("p");
    var t = document.createTextNode(new_array);
    para.appendChild(t)
    document.getElementById("expressions").appendChild(para);

}

function sortDisplay()
{
    function doSort() {
    var container = document.getElementById("expressions");
    var elements = container.childNodes;
    var sortMe = [];
    for (var i=0; i<elements.length; i++) {


    }

}

Answer 1

使用.textContent获取p元素中文本节点的内容。将其拆分为数组，对该数组进行排序，然后将其放回DIV中。

function sortDisplay()
{
    function doSort() {
    var container = document.getElementById("expressions");
    var sortMe = container.childNodes[0].textContent.split(' ');
    sort(sortMe);
    container.innerHTML = '';
    new_array=sortMe.join(" ");
    var para = document.createElement("p");
    var t = document.createTextNode(new_array);
    para.appendChild(t)
    document.getElementById("expressions").appendChild(para);
}

Answer 2

您可以缓存输入的值，而不是从文本内容中取回它们，如下所示：

＆＃13;

(function() {

  //Add event listeners.
  document.getElementById('operation').addEventListener('click', function() {
    display();
  });

  document.getElementById('resultBut').addEventListener('click', function() {
    sortDisplay();
  });

  document.getElementById('enteredBut').addEventListener('click', function() {
    display();
  });

  //Cache variables
  var container = document.getElementById("expressions"),
    inputs = document.querySelectorAll('#pastcalcblock input[type=text]'),
    result = null;

  function getInputValues() {
    return Array.prototype.map.call(inputs, function(el) {
      return el.value;
    });
  }

  function appendResult() {
    if (!result) return; //Handle Error
    var para = document.createElement("p"),
      t = document.createTextNode(result.join(" "));
    para.appendChild(t)
    container.appendChild(para);
  }

  function removeResult() {
    container.innerHTML = "";
  }

  function display() {
    removeResult();
    result = getInputValues();
    appendResult();
  }

  function sortDisplay() {
    if (!result) return; //Handle Error
    removeResult();
    //Sort Values Ascending
    result = result.sort((a, b) => Number(a) - Number(b));
    appendResult();
  }

})();

＆＃13;

<div class="rightDiv">
  <div id="pastcalcblock">
    <h3> PAST CALCULATIONS </h3>
    <input type="text" size="1" id="text1" />
    <input type="text" size="1" id="text2" />
    <input type="text" size="1" id="text3" />
    <input type="text" size="1" id="text4" /><br>
    <input type="button" value="Ok" id="operation" />
    <div id="resultTab">
      SORT<br>
      <input type="button" value="As Entered" id="enteredBut">
      <input type="button" value="By Result" id="resultBut"><br><br>
      <div id="expressions">
      </div>
    </div>
  </div>

＆＃13;

生成列表时，无法按升序打印数字数组

2 个答案: