如何解决用<select value =“ myFunction”>之类的方法在JS中“动态”调用函数
我正在尝试学习如何动态创建对象以及使用JS和HTML将函数应用到它们。如何使用<select>
下拉菜单的文本/值尽可能直接在对象上调用函数?过去,我曾在数组中使用过函数,if语句或条件链,但这似乎是多余的工作。
我也愿意就动态对象实例创建提出建议,因为我不确定本示例中的方法是否是最佳实践。
这是我的例子:
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)
})
说明:我可以通过在名称myClass
中键入名称来动态创建<input>
的新对象实例,但是我想对<select>
和原型使用类似的方法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>
尝试这个。
但是要考虑一些事情。您无需添加单独的“添加新对象”按钮。当您选择相加或相乘时,可以创建一个新实例。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。