我正在尝试将我的函数调用存储在一个对象中答案

【问题标题】：i am trying to store my function call within an object我正在尝试将我的函数调用存储在一个对象中
【发布时间】：2019-12-13 05:30:09
【问题描述】：

我试图将我的函数调用存储在一个对象中，所以当我引用该属性时，它会运行该函数。这是我写的代码，但它不起作用。到目前为止，这是我的代码。 html:

<!DOCTYPE html> 
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tetris(test)</title> 
    <link rel="stylesheet" href="styleSheets/main.css">
    <script src = "https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src = "js/jquery.1.js"></script>
    <script src = "js/main.js"></script>
  </head>
  <body>
      <svg id="container" width= "500" height= "650" style= "background-color: black" position= "relative">
      </svg>

  </body>
</html>

JS：

var svgNS = "http://www.w3.org/2000/svg";
var htmlNS = "http://www.w3.org/1999/xhtml";

function createShape1() {
    var elem = document.getElementById("container");
    var shape = document.createElementNS(svgNS, "rect");
        shape.id = "shape1";
        shape.style.width = "150px";
        shape.style.height = "50px";
        shape.style.fill = "orange";
        shape.style.y = "50px";
        shape.style.x = "150px"
        shape.style.position = "absolute"
        elem.append(shape);
    var shape2 = document.createElementNS(svgNS, "rect");
        shape2.id = "shape2";
        shape2.style.fill = "orange";
        shape2.style.x = "200px";
        shape2.style.width = "50px";
        shape2.style.height  = "51px";
        elem.append(shape2);
};
window.onload = randShape;
function createShape2() {
    var elem = document.getElementById("container");
    var shape = document.createElementNS(svgNS, "rect");
    shape.id = "shape1";
        shape.style.width = "100px";
        shape.style.height = "100px";
        shape.style.fill = "red";
        shape.style.x = "200px"
        shape.style.position = "absolute"
        elem.append(shape);
};
var shapes = {
    "shape1": createShape1(),
    "shape2": createShape2()
};
function randShape() {
    var x = Math.floor(Math.random() * 2);
    shapes.x;
}

所以如果您有任何建议让我的代码生成形状的随机属性，每个属性都应该生成自己的形状。

【问题讨论】：

"shape1": createShape1() 这里是你调用函数...shapes.x 这里你指的是shapes[0] 或shapes[1] - 两者都不存在，

标签： javascript html function object properties

【解决方案1】：

问题是如何在访问要调用的函数之前访问该值并进行函数调用

var shapes = {
  "shape1": createShape1,
  "shape2": createShape2
};

function randShape() {
    var x = Math.floor(Math.random() * 2) + 1;
    (shapes["shape" + x]).call(shapes);
}

【讨论】：

不，我想调用该函数。 randShape() 函数假设调用两个 createShape 函数之一。它将在页面上显示 2 个形状之一。
我编辑了我的答案，只允许在访问其函数值后调用
这是我的错误：未捕获的类型错误：shapes[("shape" + x)] is not a function at randShape (file:///C:/Users/jmish/OneDrive/Desktop/projects /tetri(test)/js/main.js:41:24)
我进行了更改，这应该可以！需要为 shape 的调用添加上下文，并且随机索引应该从 1 开始，而不是 0

【解决方案2】：

JS：

var svgNS = "http://www.w3.org/2000/svg";
var htmlNS = "http://www.w3.org/1999/xhtml";

function createShape1() {
    var elem = document.getElementById("container");
    var shape = document.createElementNS(svgNS, "rect");
        shape.id = "shape1";
        shape.style.width = "150px";
        shape.style.height = "50px";
        shape.style.fill = "orange";
        shape.style.y = "50px";
        shape.style.x = "150px"
        shape.style.position = "absolute"
        elem.append(shape);
    var shape2 = document.createElementNS(svgNS, "rect");
        shape2.id = "shape2";
        shape2.style.fill = "orange";
        shape2.style.x = "200px";
        shape2.style.width = "50px";
        shape2.style.height  = "51px";
        elem.append(shape2);
};
window.onload = randShape;
function createShape2() {
    var elem = document.getElementById("container");
    var shape = document.createElementNS(svgNS, "rect");
    shape.id = "shape1";
        shape.style.width = "100px";
        shape.style.height = "100px";
        shape.style.fill = "red";
        shape.style.x = "200px"
        shape.style.position = "absolute"
        elem.append(shape);
};
var shapes = [createShape1, createShape2]
function randShape() {
    var x = Math.floor(Math.random() * 2);
    shapes[x]()
}

【讨论】：