在 VS Code 中使用 <div> 元素生成随机数组并可视化它时遇到问题？

Question

我是网络开发的初学者，正在尝试构建一个排序可视化工具。我无法使用 (div) 获取生成随机数组可视化的输出 html.

的元素

这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sorting visualizer</title>
    <style>
        /* *{
            margin: 0;
            padding: 0;
        } */
        #array_container{
            position: absolute;
            left: 100px;
            right: 100px;
            bottom: 100px;
            height: 100%;
            width: 100%;
            /* margin-left: 50px;
            margin-right: 50px; */
            background-color: turquoise;
        }
    </style>
</head>
<body>
    <script>
        
        function random_array(min, max){
            return Math.floor(Math.random() * (max - min)) + min;
        
        function generate_array(){
            var cont = document.getElementById("array_container");
            var bar;
            var arr = [];
            for ( var i = 0; i < 100; i++){
                arr.push(random_array(5, 1000));
                bar = document.createElement("div");
                bar.style = "height:"+arr[i]+";width:2px;margin:0 1px;background-color:pink;display:inline-block;";
                cont.appendChild(bar);

            }
        }
        }
    </script>
    <div id="array_container">
        
    </div>
    <button id="btn1" onclick="generate_array">generate</button>
</body>
</html>

请帮助我找到错误，并建议我使用其他一些方法以条形图格式可视化数组。

Answer 1

我发现了几个小语法错误：

将函数名称传递给生成按钮的 onclick

()

您的函数周围的括号被偏移，这导致了错误

您的代码并没有超出那些小的语法错误，您面临的问题是您生成的 div 不符合您传递它们的高度，因为您没有给他们一个高度单位。

您需要指定一个单位，例如px，否则高度将被丢弃并被忽略。

工作示例（如果您想让它们适合您的盒子，您需要调整一些其他样式）：

function random_array(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

function generate_array() {
  var cont = document.getElementById("array_container");
  var bar;
  var arr = [];
  for (var i = 0; i < 100; i++) {
    arr.push(random_array(5, 1000));
    bar = document.createElement("div");
    bar.style = "height:" + arr[i] + "px;width:2px;margin:0 1px;background-color:pink;display:inline-block;";
    cont.appendChild(bar);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>sorting visualizer</title>
  <style>
    #array_container {
      position: absolute;
      left: 100px;
      right: 100px;
      bottom: 100px;
      height: 100%;
      width: 100%;
      background-color: turquoise;
    }
  </style>
</head>
<body>
  <div id="array_container"></div>
  <button id="btn1" onclick="generate_array()">generate</button>
</body>
</html>

在 VS Code 中使用 <div> 元素生成随机数组并可视化它时遇到问题？

Having problems to generate a random array and visualize it using <div> elements in VS Code?

html

javascript

sorting

dom

visualization