JavaScript解决问题

要求js代码实现： 1. 在div节点中生成包含10个随机数的有序列表 2. 点击列表中数值，该数值显示在上面的p节点内

该回答引用chatgpt:

<!DOCTYPE html>
<html>
<head>
    <title>Random Numbers List</title>
    <script>
        // 生成随机数的函数
        function generateRandomNum() {
            return Math.floor(Math.random() * 100) + 1;
        }

        // 生成有序列表的函数
        function generateOrderedList() {
            // 获取包含列表的div元素
            var listDiv = document.getElementById("listDiv");

            // 创建有序列表
            var ol = document.createElement("ol");

            // 生成10个随机数并添加到列表中
            for (var i = 1; i <= 10; i++) {
                var li = document.createElement("li");
                var num = generateRandomNum();
                li.appendChild(document.createTextNode(num));
                li.addEventListener("click", function() {
                    // 点击数值后将数值显示在p节点中
                    var numClicked = this.innerText;
                    var p = document.getElementById("resultP");
                    p.innerText = "You clicked: " + numClicked;
                });
                ol.appendChild(li);
            }

            // 将有序列表添加到div中
            listDiv.appendChild(ol);
        }
    </script>
</head>
<body onload="generateOrderedList()">
    <div id="listDiv"></div>
    <p id="resultP"></p>
</body>
</html>

这段代码中，generateRandomNum()函数用于生成随机数，generateOrderedList()函数用于生成有序列表。在生成列表时，我们首先获取包含列表的div元素，然后创建有序列表，并向其中添加10个随机数，同时为每个数值添加一个点击事件监听器，当该数值被点击时，将数值显示在上方的p节点中。

最后，在body元素的onload事件中调用generateOrderedList()函数，以生成页面所需的有序列表。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="init()">
    <div id="list"></div>
    <p id="value"></p>
</body>
<script>
    function init(){
        // 获取div节点
        const listDiv = document.getElementById('list');

        // 生成包含10个随机数的数组
        const numbers = [];
        for (let i = 1; i <= 10; i++) {
          numbers.push(Math.floor(Math.random() * 100));
        }

        // 对数组进行排序
        numbers.sort((a, b) => a - b);

        // 生成有序列表元素
        const ul = document.createElement('ul');
        for (let i = 0; i < numbers.length; i++) {
          const li = document.createElement('li');
          li.innerText = numbers[i];
          li.addEventListener('click', () => {
            const valueP = document.getElementById('value');
            valueP.innerText = numbers[i];
          });
          ul.appendChild(li);
        }

        // 将有序列表添加到div节点中
        listDiv.appendChild(ul);
    }
</script>
</html>

解释：

  1. 首先获取div节点，并声明一个空数组用于存储随机数。
  2. 利用for循环生成10个随机数，并将它们存储到数组中。
  3. 排序数组（这里使用了Array的sort方法，注意sort方法会修改原数组）。
  4. 通过创建元素的方法，生成一个包含10个有序列表项的有序列表，并将每个列表项的数值赋值为数组中对应位置的数值。
  5. 为每个列表项添加点击事件监听器，当被点击时，获取该列表项的数值，并将它赋值给p节点的innerText属性。
  6. 将生成的有序列表添加到div节点中，呈现在页面上。