调用一个函数“动态”在JS中使用< select value =''myFunction（）'' [英] Call a function "dynamically" in JS with something like <select value="myFunction()">
问题描述
我正在尝试学习如何动态创建对象以及使用JS和HTML向其应用函数。如何使用< select> 下拉菜单的文本/值直接在对象上调用函数？过去，我曾在数组中使用过函数（如果条件语句或条件链），但这似乎是多余的工作。
I'm trying to learn how to dynamically create objects and apply functions to them with JS and HTML. How can I use a <select> dropdown's text/value to call a function on an object as directly as possible? In the past I've used functions in an array, if then statement, or conditional chain but this seems like extra work.
我也对动态对象实例创建也持开放态度因为我不确定此示例中的方法是否是最佳实践。
I'm open to suggestions on dynamic object instance creation as well because I'm not sure my method in this example is best practice.
以下是我的示例：
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)
})
说明：我可以通过在名称< select> 和原型函数
Description: I can create a new object instance of myClass dynamically by typing a name into the name <input> but I would like to do a similar approach with the <select> and the prototypical functions of myClass.
推荐答案
// 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>
试试这个。
但是要考虑一些事情。您无需添加单独的添加新对象按钮。当您选择求和还是乘就可以创建一个新实例。
But there is something to consider. You don't need to add a seperate `add new object` button. A new instance can be created when you select whether to sum or multiply.
这篇关于调用一个函数“动态”在JS中使用< select value =''myFunction（）''的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
