Javascript按升序排列无法正常工作

时间:2017-08-07 17:49:44

标签: javascript html

我正在尝试使用javascript按升序排序数字,而且我被卡住了。 HTML:

<h2>JavaScript Array Sort</h2>

<p>Click the button to sort the array in ascending order.</p>

<button onclick="myFunction()">I will arrange</button>

<p id="demo"></p>

</body>

JS:

var points = [7, 1, 6, 3, 5, 2];
document.getElementById("demo").innerHTML = points;    

function myFunction() {
    points.sort(function(a, b){return a - b});
    document.getElementById("demo").innerHTML = points;
}

js小提琴链接:https://jsfiddle.net/djmayank/uef3xexk/
我没有弄错我的意思。任何形式的帮助都表示赞赏。

2 个答案:

答案 0 :(得分:3)

除非在JSFiddle中使用No wrap - in <body>选项,否则需要使用事件处理程序调用该函数。

JS

var submit = document.querySelector('#submit')
var output = document.getElementById('demo')

var points = [40, 100, 1, 5, 25, 10];

output.innerHTML = points;

function sortArray() {
  points.sort(function(a, b) {
    return a - b
  });

  output.innerHTML = points;
}

submit.addEventListener('click', function(event) {
  event.preventDefault()

  sortArray()
})

HTML

<h2>JavaScript Array Sort</h2>

<p>Click the button to sort the array in ascending order.</p>

<button id="submit">I will arrange</button>

<p id="demo"></p>

JSFiddle演示:Here's more info on the lib setting

答案 1 :(得分:1)

你是在jsfiddle开发这个吗?如果是这样,在javascript设置中,在代码加载到&#34;体内时更改&#34;。

否则,你想要

document.getElementById("demo").innerHTML = points;

在呈现文档正文时运行,因为您需要将#demo放在dom中以向其添加列表。

// example onload on body
<body onload="initalDemoInnerHtml()">

// js code
function initalDemoInnerHtml() {
  document.getElementById("demo").innerHTML = points;
 }

myFunction()应该在与上面代码相​​同的脚本标记中定义。

<script type="text/javascript">
  var points = [7, 1, 6, 3, 5, 2];
  function initalDemoInnerHtml() {
   document.getElementById("demo").innerHTML = points;
  }
  function myFunction() { 
   points.sort(function(a, b){return a - b});
   document.getElementById("demo").innerHTML = points; 
  }
</script>

此脚本应添加到head标记。