CSS/HTML/JS - GetElementByID 和 html/js 元素间距问题

问题描述 投票：0回答：1

我是 javascript/html/css 编程的业余爱好者。我开发了一个 java 后端，我正在为它开发一个方便的前端 webui。我想以树格式显示按钮。一切都已成功接受两件事：1）我无法使按钮上的间距起作用。我试图尝试在每行上的按钮之间均匀间隔。 2) 即使使用 onload，我也无法通过属性 ID 获取元素。检查页面会显示元素和 ID。如果我的代码草率，我深表歉意。

图像被删除，因为每个人似乎都出于错误的原因关注它。

getTree();
addButtons();
window.onload = function() {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext('2d');
  ctx.beginPath();
  canvas_arrow(ctx, document.getElementById("rank1").x,
    document.getElementById("rank1").y,
    document.getElementById("rank2").x,
    document.getElementById("rank2").y);
  ctx.strokeStyle = '#ffffff';
  ctx.stroke();
};

function addButtons() {
  fetch('/api/tree').then(async(response) => {
    await response.json().then(result => {
      let i = 0;
      result.forEach(function(item) {
        let section = document.getElementById("rankButtons");
        let element = document.createElement("button");
        if (i !== item["tier"]) {
          section.appendChild(document.createElement("br"));
          section.appendChild(document.createElement("br"));
          i = item["tier"];
        }
        element.id = item["rankID"];
        element.value = item["rankName"];
        element.name = "rankButton";
        element.textContent = item["rankName"];
        section.appendChild(element);
      });
    })
  }).catch(error => {
    console.log(error)
  })
}
function canvas_arrow(context, fromX, fromY, toX, toY) {
let headLength = 10; // length of head in pixels
let dx = toX - fromX;
let dy = toY - fromY;
let angle = Math.atan2(dy, dx);
context.moveTo(fromX, fromY);
context.lineTo(toX, toY);
context.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
context.moveTo(toX, toY);
context.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
}
.header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}

body {
  color: white;
  opacity: 1;
}

table,
th,
td {
  border: 2px solid white;
  opacity: 1;
  margin: auto;
  text-align: center;
  width: 80%;
  table-layout: fixed;
}

td {
  white-space: pre;
  padding: 5px;
}

button {
  background: linear-gradient(to bottom right, #CC0033, #3300CC);
  padding: 5px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  resize: none;
  border: 1px solid #30273a;
  box-shadow: 0 0 10px #8d78a5;
  border-radius: 15px 15px 15px 15px;
  z-index: 2;
  position: relative;
}

#content {
  margin: 100px auto 0;
  width: 750px;
  max-width: 80%;
  padding: 0 0 40px;
  text-align: center;
  position: relative;
}

#viewport {
  height: 100%;
  width: 100%;
  position: relative;
}

tree.html
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<details>
  <summary style="text-align: center; font-size: 20px">Available Ranks</summary>
  <pre v-pre="true" class="prismjs line-numbers" style="text-align: center">
        <table id="ranks" class="table table-striped" style="font-size:12px"></table>
    </pre>
</details>
<canvas id="canvas" width="400" height="500" style="border:1px solid #000000;">
<div id="content">
  <div id="rankButtons"></div>
</div>

又来了，因为另一个人把它删掉了……

<!DOCTYPE html>
<html lang="en" style="background-color: black">
<head>
    <div class="header">
        <img src="./RDQ-512-Logo.jpg" alt="logo">
    </div>
    <meta charset="UTF-8">
    <title id="title">Rank Up Tree</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="tree.css">
</head>
<body>

<details>
    <summary style="text-align: center; font-size: 20px">Available Ranks</summary>
    <pre v-pre="true" class="prismjs line-numbers" style="text-align: center">
        <table id="ranks" class="table table-striped" style="font-size:12px"></table>
    </pre>
</details>
<canvas id="canvas" width="400" height="500" style="border:1px solid #000000;">
</canvas>
<div id="content">
    <div id="rankButtons"></div>
</div>
<script src="tree.js"></script>
</body>
</html>
javascript html css getelementbyid
1个回答
1
投票

你的函数过于复杂了

function addButtons() {
  fetch('/api/tree').then(async(response) => {
    await response.json().then(result => {
      let i = 0;
      result.forEach(function(item) {
        let section = document.getElementById("rankButtons");
        let element = document.createElement("button");
        if (i !== item["tier"]) {
          section.appendChild(document.createElement("br"));
          section.appendChild(document.createElement("br"));
          i = item["tier"];
        }
        element.id = item["rankID"];
        element.value = item["rankName"];
        element.name = "rankButton";
        element.textContent = item["rankName"];
        section.appendChild(element);
      });
    })
    return true
  }).catch(error => {
    console.log(error)
  })
}

异步函数旨在易于阅读。

当然top只需要是：

async function addButtons(){
    const response = await fetch('/api/tree');
    const result = await response.json();

    let i=0;
    // ... etc

}

你不是在任何地方打电话
addButtons

你说这是你整个前端代码。好吧，这不会调用 addButtons。

我怀疑你想先创建按钮

你似乎在你的

onLoad
中尝试访问ID=
rank1
等的元素，这些元素似乎是由
addButtons
创建的。

所以你想先跑

addButtons
吗？

如果是这样，因为 

addButtons
是异步的，你应该 
await
它。 （我在函数中添加了一个
return true
，以提醒它会返回一个承诺。）

window.onload = async function() {
  await addButtons()
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext('2d');
  ctx.beginPath();
  canvas_arrow(ctx, document.getElementById("rank1").x,
    document.getElementById("rank1").y,
    document.getElementById("rank2").x,
    document.getElementById("rank2").y);
  ctx.strokeStyle = '#ffffff';
  ctx.stroke();
};
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.