时间戳

首页 > 解决方案 > Javascript：调用函数onsubmit不拦截参数

javascript - Javascript：调用函数onsubmit不拦截参数

问题描述

我正在尝试在 Vanilla JS 中制作一个可以更改关卡的蛇游戏。每个级别都由一个函数生成的不同迷宫表示：

function createMaze(selected) {
  for (let y = 0; y < selected.length; y++) {
    for (let x = 0; x < selected[y].length; x++) {
      if (selected[y][x] === 1) {
        ctx.fillStyle = "black";
        ctx.fillRect(x*10, y*10, 10, 10);
      }
    }
  }
}

由于以下形式，级别会发生变化：

<form id="levelSelect">
  <select id="levels">
    <option value="gridLevel1">One</option>
    <option value="gridLevel2">Two</option>
    <option value="gridLevel3">Three</option>
    <option value="gridLevel4">Four</option>
    <option value="gridLevel5">Five</option>
  </select>
  <input type="submit">
</form>

这是在这里定义的：

const levelSelection = document.querySelector("#levelSelect");
const levelDropdown = document.querySelector("#levels");

然后在事件监听器中被调用：

levelSelection.addEventListener("submit", (event) => {
  event.preventDefault();
  selected = levelDropdown.options[levelDropdown.selectedIndex].value;
  createMaze(selected);
  console.log(selected);
});

因为一开始 createMaze 函数由于没有执行选择而没有特定参数，所以我包含了一个子句：

if (!selected) selected = gridLevel1;

随着游戏的开始，createMaze(selected) 函数被调用。

但是，即使在事件侦听器中，当我调用函数 createMaze(selected) 时，我能够注销作为级别名称的值（这也是表示每个级别的数组的名称），但它不会似乎工作。如果我在 creatMaze 中记录所选内容，它只会打印出数组的名称，而不是数组本身。

标签： javascriptarrays

解决方案

因为selected是一个字符串，例如"gridLevel1"但是你希望它是一个变量gridLevel1。这可以通过在 window 对象中查找来轻松完成：

 window["gridLevel1"] // gridLevel1

或者在您的一般情况下：

createMaze(window[selected]);

但是，尽管这可行，但您应该考虑将级别放入对象中：

const levels = {
  gridLevel1: [ /*..*/ ],
  //...
 };

所以你可以这样做：

createMaze(levels[selected])

推荐阅读