Javascript 如何从下拉列表中选择并在其他文件中使用它？_Javascript_Html_Svg_Dropdown

Javascript 如何从下拉列表中选择并在其他文件中使用它？

javascript html svg

Javascript 如何从下拉列表中选择并在其他文件中使用它？,javascript,html,svg,dropdown,Javascript,Html,Svg,Dropdown,我有一个下拉列表，我想用JS获取一个选项的值，然后从另一个JS文件导入一个SVG。我这样做了，但我想用下拉列表更改SVG。SVG是一个迷宫，我想改变变量的值，其中包含迷宫的内容这是我的代码： const kinveyUrl = "https://baas.kinvey.com/appdata/"; const kinveyHeaders = { "Content-Type": "application/json", Authorization: "----" }; docum

我有一个下拉列表，我想用JS获取一个选项的值，然后从另一个JS文件导入一个SVG。我这样做了，但我想用下拉列表更改SVG。SVG是一个迷宫，我想改变变量的值，其中包含迷宫的内容

这是我的代码：

const kinveyUrl = "https://baas.kinvey.com/appdata/";
const kinveyHeaders = {
  "Content-Type": "application/json",
  Authorization:
    "----"
};

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("buttonLoad").addEventListener("click", loadClick);
  document
    .getElementById("buttonSelect")
    .addEventListener("click", selectClick);

  document.getElementById("buttonAdd").addEventListener("click", addClick);
});

async function loadClick() {
  const url = kinveyUrl + "/mazes/" + "";
  const response = await fetch(url, {
    method: "GET",
    headers: kinveyHeaders
  });
  let mazes = await response.json();
  console.log(mazes);

  document.getElementById("listBoxMazes").options.length = 0;
  mazes.forEach(maze => {
    document
      .getElementById("listBoxMazes")
      .options.add(new Option(maze.name, maze.data));
  });
  document.getElementById("buttonSelect").innerHTML = "[Select]";
}

async function selectClick() {
  var mazeData = document.getElementById("listBoxMazes").value;
  if (mazeData != 0) {
    console.log(mazeData);
    maze = mazeData;
  } else {
    alert("Please select an option!");
  }
}

async function addClick() {
  let newMaze = {
    name: document.getElementById("textBoxMazeName").value,
    data: document.getElementById("textBoxMazeData").value
  };

  const url = kinveyUrl + "/mazes";
  const response = await fetch(url, {
    method: "POST",
    headers: kinveyHeaders,
    body: JSON.stringify(newMaze)
  });
  if (response.ok) {
    alert("added successfully");
  }
}

剧本

let template = document.getElementById("app");
let animations = document.createElement("animations");

let maze = [
  ["*", "*", "*", " ", "*", "*", "*"],
  ["*", "s", "*", " ", " ", "*", "*"],
  ["*", " ", "*", "*", " ", " ", " "],
  ["*", " ", " ", "*", " ", "*", "*"],
  ["*", " ", " ", " ", " ", "*", "*"],
  ["*", "*", "*", " ", "*", "*", "*"],
  ["*", " ", " ", " ", "*", "*", "*"],
  ["*", " ", "*", "*", "*", "*", "*"],
  ["*", " ", "*", "*", "*", "*", "*"]
];

let size = 70;
let height = maze[0].length;
let width = maze[0].length;

let canvas = document.createElementNS("http://www.w3.org/2000/svg", "svg");
canvas.setAttribute("width", width * size);
canvas.setAttribute("height", height * size);

let appendElement = (canvas, node, maze) => {
  let colors = {
    "*": "red",
    " ": "gray",
    s: "lime"
  };

  let blockRef = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  blockRef.setAttribute("height", size);
  blockRef.setAttribute("x", node.x * size);
  blockRef.setAttribute("y", node.y * size);
  blockRef.setAttribute("width", size);
  blockRef.setAttribute("fill", colors[maze[node.y][node.x]]);
  blockRef.setAttribute("stroke", "white");
  var svgElem = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  var useElem = document.createElementNS("http://www.w3.org/2000/svg", "use");
  useElem.setAttributeNS(
    "http://www.w3.org/1999/xlink",
    "xlink:href",
    "#circle"
  );
  svgElem.appendChild(useElem);
  canvas.appendChild(useElem);
  canvas.appendChild(blockRef);
};

maze.map((row, y, arr) => {
  row.map((col, x) => {
    appendElement(canvas, { x, y }, maze);
  });
});

template.appendChild(canvas);

html






迷宫1
迷宫2
迷宫3




姓名：
数据：

如果您能提供上述代码的工作演示，则会更容易提供帮助。此外，请确保从您的问题列表中删除身份验证密钥。它可以在本地计算机上工作，您可以用一些硬代码替换kinvey fetch

<html>
  <!DOCTYPE html>

  <html>
    <head>
      <meta charset="UTF-8" />
      <script src="kinvey-example.js"></script>
    </head>

    <body>
      <a id="buttonLoad" href="#">[Load]</a>
      <br />
      <br />
      <div>
        <select id="listBoxMazes" size="5">
          <option>Maze 1</option>
          <option>Maze 2</option>
          <option>Maze 3</option>
        </select>
      </div>

      <a id="buttonSelect" href="#"></a>
      <br />
      <br />
      <div>
        <div>Name: <input type="text" id="textBoxMazeName" /></div>
        <div>Data: <input type="text" id="textBoxMazeData" /></div>
        <a id="buttonAdd" href="#">[Add]</a>
      </div>
      <br />
      <br />
      <div id="maze">
        <div id="app"></div>
        <script src="index.js"></script>
        <defs>
          <g id="circle">
            <circle
              cx="50"
              cy="50"
              r="40"
              stroke="black"
              stroke-width="3"
              fill="red"
            />
          </g>
        </defs>
      </div>
    </body>
  </html>
</html>