javascript - 如何从下拉列表中选择并在另一个文件中使用它?
问题描述
我有一个下拉列表,我想用 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
<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>
解决方案
推荐阅读
- android - 触发多次TextEdit onTextChanged
- android - 找到多个文件,其独立于操作系统的路径为“lib/armeabi-v7a/libarcore_sdk_jni.so”
- android - Webview 没有加载特定的 URL
- wordpress - 在不影响 SEO、Google Analytics 的情况下将域永久移动到子目录
- angular - 单击时如何使用具有相应 ed_empid 的手风琴组?
- angular - NullInjectorError:没有 ViewportScroller 的提供者!” 角度 7
- python - 有没有办法在 FTP python 中设置最小块大小?
- c# - 在没有 NtSetTimerResolution 的情况下增加 Windows 上的计时器分辨率(高分辨率)
- vb.net - 当我运行代码、获取结果并重复时,之前的用户输入会显示在新用户输入之前。任何的想法?
- javascript - 如何在 daterangepicker.js 中仅指定启用日期?