Javascript 从DOM输入元素动态创建现有类的新JS对象实例_Javascript_Html_Class_Object_Dom Events

Javascript 从DOM输入元素动态创建现有类的新JS对象实例

javascript html class object

Javascript 从DOM输入元素动态创建现有类的新JS对象实例,javascript,html,class,object,dom-events,Javascript,Html,Class,Object,Dom Events,在Javascript for HTML中，如果类中新对象的对象名/变量名来自输入元素的文本值，如何创建类的新对象实例在这个例子中。。。我有一个名为myClass的类，我创建了一个名为Chicks的myClass对象实例，其属性“myProperty”的值为100。假设我想在浏览器中使用name输入元素创建一个新的myClass对象实例，比如Dogs，并使用property输入元素将其myProperty值设置为49 以下是我的例子： <!DOCTYPE html> <ht

在Javascript for HTML中，如果类中新对象的对象名/变量名来自输入元素的文本值，如何创建类的新对象实例

在这个例子中。。。我有一个名为myClass的类，我创建了一个名为Chicks的myClass对象实例，其属性“myProperty”的值为100。假设我想在浏览器中使用name输入元素创建一个新的myClass对象实例，比如Dogs，并使用property输入元素将其myProperty值设置为49

以下是我的例子：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <input id="name" placeholder="name">
        <input id="property" placeholder="property">
        <button id="btn"></button>
    </body>
    <script src="rhythm-class.js"></script>
</html>

函数myClass（值）{
this.myProperty=值；
}
let Chicks=新myClass（“100”）；
控制台.日志（鸡）；
let form=document.querySelector（“表单”）；
让输入=form.elements；
表格.附录列表（“提交”、（e）=>{
e、 预防默认值（）；
让nameField=输入[“name”]；
让propField=输入[“属性”]；
//如果两个值都已设置，则可以在此处进行测试
窗口[nameField.value]=新的myClass（propField.value）；
log（窗口[nameField.value].myProperty）；
});

提交
dogs.myProperty=document.getElementById（“property”）。value应该为您检索一个值。如何通过在name输入元素中键入dogs来创建dogs？获取name输入所能做的最多就是创建一个具有该值的字符串变量的类。您无法动态创建变量名。实际上，您需要将类的实例放在一个对象或映射中，您可以在其中为每个实例指定自己的名称。不要从let dog=new myClass，cat=new myClass开始而是constanimals={dog:newmyclass，cat:newmyclass}这似乎是我想要的，只是我使用了一个本地数组，而不是窗口，它工作了！我已经应用了这个概念，并且想做一些与原型函数和类似的事情。这里的新问题是：如果使用本地数组，则只存储结果，以后将无法检索该结果。所以我建议您使用一个局部对象将变量名映射到结果。无论如何，如果答案对你有帮助，你可以选择它作为被接受的答案。
function myClass() {
        this.myProperty
}

let chickens = new myClass()

chickens.myProperty = '100'

console.log(chickens)

let currObj = null
let currProp = null

document.querySelector('#name').addEventListener('change', (e)=> {
        console.log(e.target.value)
        currObj = e.target.value
        let `${e.target.value}` = new myClass
})
document.querySelector('#property').addEventListener('change', (e)=> {
        console.log(e.target.value)
        currentProp = e.target.value
        let `${currentObj}`.testProperty = e.target.value
})
document.querySelector('#btn').addEventListener('click', ()=> {
        console.log(`${currentObj}`.testProperty)
})