Chame uma função “dinamicamente” em JS com algo como <select value = “myFunction ()”>

georgeluther 2020-08-15 10:51.

Estou tentando aprender como criar objetos dinamicamente e aplicar funções a eles com JS e HTML. Como posso usar <select>o texto / valor de um menu suspenso para chamar uma função em um objeto o mais diretamente possível? No passado, usei funções em uma matriz, instrução if then ou cadeia condicional, mas isso parece um trabalho extra.

Também estou aberto a sugestões sobre a criação de instâncias de objetos dinâmicos porque não tenho certeza se meu método neste exemplo é a prática recomendada.

Aqui está meu exemplo:

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>

// 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)
})

Descrição: posso criar uma nova instância de objeto de myClassdinamicamente digitando um nome no nome, <input>mas gostaria de fazer uma abordagem semelhante com as <select>funções prototípicas de myClass.

javascript dynamic dom-events prototype

1 answers

Ava 2020-08-15 20:56.

// 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>

Tente este.

Mas há algo a se considerar. Você não precisa adicionar um botão separado `adicionar novo objeto`. Uma nova instância pode ser criada quando você seleciona se deseja somar ou multiplicar.

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

Jana Duggar: tudo o que ela disse sobre o amor e sua janela de 5 anos para encontrar o 'escolhido'

Jana Duggar foi aberta sobre sua busca pelo amor. Aqui está tudo o que ela disse sobre o assunto e sua janela de cinco anos para o casamento.

2023-06-12.

Sam Heughan sabe exatamente o que vai tirar do set de 'Outlander' - 'Eu me sinto como Jamie quando os coloco'

O astro de 'Outlander', Sam Heughan, revelou recentemente o que vai levar do set para relembrar Jamie Fraser, o papel que o tornou uma estrela.

2023-06-12.

A música dos primeiros Beatles que foi uma das 'apresentações mais emocionantes' da banda, de acordo com um Fab Four Insider

'She Loves You' foi escrita em uma hora, gravada em um dia, e foi a música dos Beatles com uma de suas melhores apresentações de sua carreira.

2023-06-11.

Dolly Parton ajudou sua avó 'inválida' quando nenhum dos outros netos o faria - ela também pregaria uma peça nela

Dolly Parton e sua avó Bessie tiveram um relacionamento especial. Vovó Parton estava muito doente, mas isso não impediu Dolly de pregar uma peça nela.

2023-06-11.

10 das criaturas marinhas mais assustadoras que espreitam nas profundezas do oceano

O oceano é repleto de beleza, mas também esconde algumas das criaturas marinhas mais assustadoras do planeta. Muitos desses animais espreitam nas profundezas do oceano, no mundo escuro e de alta pressão do fundo do mar.

2025-10-29.

10 Melhores Encantamentos de Espada no Minecraft

Se você está enfrentando criaturas hostis ou se preparando para cenários PvP, conhecer os melhores encantamentos de espada no Minecraft pode te dar uma grande vantagem. Encantar espadas permite causar mais dano, aumentar a quantidade de itens obtidos de criaturas e prolongar a durabilidade da sua espada.

2025-10-29.

O programa dos Panteras Negras da Marvel será o programa de animação mais importante até agora

Eyes of Wakanda está diretamente relacionado ao MCU, além de atualizações sobre X-Men '97, What If..., Demolidor e muito mais.

2024-07-03 19:03.

Tudo sobre o deslumbrante anel de noivado de safira de Kate Middleton (e a herança real que o inspirou!)

O anel de noivado de Kate Middleton pertenceu à Princesa Diana antes do Príncipe William pedi-la em casamento. Descubra tudo o que há para saber sobre a peça histórica aqui.

2024-09-01.

3 maneiras comprovadas de melhorar sua habilidade de escrita

Os benefícios de escrever e estratégias para ajudá-lo a fazê-lo

Em 2022, com o lançamento do GPT-3, a habilidade de escrita parece se tornar menos importante. Com a IA, pessoas com redação ruim também podem gerar funcionários de qualidade.

A lenta erosão: revelando como as pessoas desperdiçam em suas carreiras

No mundo acelerado e competitivo de hoje, a carreira desempenha um papel significativo no crescimento pessoal, na estabilidade financeira e na satisfação geral com a vida. No entanto, muitos indivíduos encontram-se presos em um ciclo implacável de estagnação e insatisfação, definhando gradualmente em suas vidas profissionais.

O que torna um podcast influente?

Na semana passada, notei um comunicado de imprensa, enviado via PressGazette (um site de notícias da mídia britânica). O artigo anunciava que a Acast, a empresa de publicidade e hospedagem de podcast Scandi, lideraria um consórcio de "provavelmente os editores mais influentes" em podcasting.

Language

Japanese

Spanish

German

French

Thai

Portuguese

Russian

Vietnamese

Italian

Korean

Turkish

Indonesian

Polish

Hindi

Chame uma função “dinamicamente” em JS com algo como <select value = “myFunction ()”>

1 answers

Related questions

MORE COOL STUFF

Jana Duggar: tudo o que ela disse sobre o amor e sua janela de 5 anos para encontrar o 'escolhido'

Sam Heughan sabe exatamente o que vai tirar do set de 'Outlander' - 'Eu me sinto como Jamie quando os coloco'

A música dos primeiros Beatles que foi uma das 'apresentações mais emocionantes' da banda, de acordo com um Fab Four Insider

Dolly Parton ajudou sua avó 'inválida' quando nenhum dos outros netos o faria - ela também pregaria uma peça nela

Qual é a madeira mais dura do mundo?

10 das criaturas marinhas mais assustadoras que espreitam nas profundezas do oceano

10 Melhores Encantamentos de Espada no Minecraft

13 países socialistas muito diferentes entre si

Recapitulação do Urso: Marcus é o homem mais gentil, gentil e sincero de Chicago?

Por US $ 9.800, você os colocaria neste Toyota RAV4 2008 de sete lugares?

Van de entrega da Amazon pega fogo em explosão de fogo durante o calor do verão em Houston

O programa dos Panteras Negras da Marvel será o programa de animação mais importante até agora

Tudo sobre o deslumbrante anel de noivado de safira de Kate Middleton (e a herança real que o inspirou!)

Quem é a esposa de John Cleese? Tudo sobre Jennifer Wade

Quem é a esposa de Patton Oswalt? Tudo sobre Meredith Salenger

Quem é o marido de Mena Suvari? Tudo sobre Michael Hope

pronomes são super assustadores

3 maneiras comprovadas de melhorar sua habilidade de escrita

Os benefícios de escrever e estratégias para ajudá-lo a fazê-lo

A lenta erosão: revelando como as pessoas desperdiçam em suas carreiras

O que torna um podcast influente?

Language