在 JS 中用 <select value="myFunction()"> 之类的东西调用函数 "dynamically"

Question

我正在尝试学习如何使用 JS 和 HTML 动态创建对象并将函数应用于它们。如何使用 <select> 下拉菜单的 text/value 尽可能直接地调用对象上的函数？过去我在数组、if then 语句或条件链中使用过函数，但这似乎是额外的工作。

我也乐于接受关于动态对象实例创建的建议，因为我不确定我在这个例子中的方法是最佳实践。

这是我的例子：

HTML

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <input id="name" placeholder="name">
        <button id="new">add new object</button>
        <br>
        <input id="property" placeholder="property value">
        <select id="functions">
            <option>apply a function</option>
            <option value="myFunction()">sum</option>
            <option value="myFunction2()">multiply</option>
        </select>
    </body>
    <script src="dynamic-objects.js"></script>
</html>

JS

// Class and its functions
function myClass() {
    this.existingProperty = 5 
}
myClass.prototype.myFunction = function () {
    this.resultProperty = this.newProperty + this.existingProperty
}
myClass.prototype.myFunction2 = function () {
    this.resultProperty = this.newProperty * this.existingProperty
}

// Memory
const locoParentis = []
let nameField = ''
let propField = 0

// Name of object instance of myClass (for example: type dogs into the brower/HTML "name" input)
document.querySelector('#name').addEventListener('change', (e)=>{
    nameField = e.target.value
})
// Add the new objeect instance to the array (for example: click add new object to create an object called dogs with an existingProperty of 5)
document.querySelector('#new').addEventListener('click', ()=>{
    locoParentis[nameField] = new myClass()
    console.log(locoParentis)
})
// Create/set new property in object instance (for example: typing 9 in the property value input sets dogs' newProperty to 9)
document.querySelector('#property').addEventListener('input', (e)=>{
    locoParentis[nameField].newProperty = Number(e.target.value)
    console.log(locoParentis)
})

// Apply prototypical functions on object instance (for example: chosing sum outputs 14 into the console.)
document.querySelector('#functions').addEventListener('change', (e)=>{
    console.log(e.target.value)
    //HOW CAN I CHANGE THIS INTO SOMETHING LIKE locoParentis[nameField].e.target.value() 
    e.target.value === "myFunction()" ? locoParentis[nameField].myFunction() : locoParentis[nameField].myFunction2()
    console.log(locoParentis[nameField].resultProperty)
})

说明：我可以通过在名称 <input> 中键入名称来动态创建 myClass 的新对象实例，但我想对 <select> 和myClass.

的原型函数

Answer 1

// Class and its functions
function myClass() {
    this.existingProperty = 5;
}
myClass.prototype.myFunction = function () {
    this.resultProperty = this.newProperty + this.existingProperty;
}
myClass.prototype.myFunction2 = function () {
    this.resultProperty = this.newProperty * this.existingProperty;
}

// Memory
const locoParentis = {};
let nameField;

// Name of object instance of myClass (for example: type dogs into the brower/HTML "name" input)
document.querySelector('#name').addEventListener('change', (e)=>{
    nameField = e.target.value;
})
// Add the new objeect instance to the array (for example: click add new object to create an object called dogs with an existingProperty of 5)
document.querySelector('#new').addEventListener('click', ()=>{
    locoParentis[nameField] = new myClass();
    console.log(locoParentis);
})
// Create/set new property in object instance (for example: typing 9 in the property value input sets dogs' newProperty to 9)
document.querySelector('#property').addEventListener('input', (e)=>{
    locoParentis[nameField].newProperty = Number(e.target.value);
    console.log(locoParentis);
})

document.querySelector('#functions').addEventListener('change', (e)=>{
    // you can check here for undefined 
    locoParentis[nameField][e.target.value]();
    console.log(locoParentis[nameField].resultProperty);
})

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <input id="name" placeholder="name">
        <button id="new">add new object</button>
        <br>
        <input id="property" placeholder="property value">
        <select id="functions">
            <option>apply a function</option>
            <option value="myFunction">sum</option>
            <option value="myFunction2">multiply</option>
        </select>
    </body>
</html>

试试这个。

但有一点需要考虑。您不需要添加单独的“添加新对象”按钮。当你select是否求和或乘法时，可以创建一个新实例。

在 JS 中用 <select value="myFunction()"> 之类的东西调用函数 "dynamically"

Call a function "dynamically" in JS with something like <select value="myFunction()">

javascript

prototype

dynamic

dom-events