Estoy trabajando en un programa muy simple que me permite calcular mi presupuesto. Todavía estoy tratando de aprender JS y tengo algunos problemas para los que no puedo encontrar respuestas.
class Money { constructor(type, amount){ this.type = String(type); this.amount = Number(amount); } addItem(){ if(this.type !== null && this.amount !== null){ let new_li = document.createElement('li') new_li.innerHTML = (`${this.type + ' - ' + this.amount}`); document.getElementById('btn_income').addEventListener('click', this.addItem) document.getElementById('income_list').appendChild(new_li); new_li.setAttribute('id','new_item'); clearInput(); } else{ alert('Please fix your errors!'); } }Necesito obtener el valor de las entradas que tengo en html
<input name="typ" type="text" id="p_type" placeholder="Type of income"/> <input name="amount" type="text" id="p_amount" placeholder="Amount" /> <button id="btn_income">Add</button>La pregunta es, ¿cómo puedo hacer que el método addItem() tenga los valores de las entradas especificadas en html? Muchas gracias de antemano
Eso podría ayudarlo, debe agregar EventListener fuera de su clase, cuando ocurre un evento y pasar sus datos de las entradas. Aquí hay un ejemplo
class Money { addItem(type, amount) { if (amount && type) { let list = document.getElementById('list') let li = document.createElement('li') li.innerHTML = (`${type + ' - ' + amount}`); list.appendChild(li) } else { alert('Please fix your errors!'); } } } const type = document.getElementById('p_type') const amount = document.getElementById('p_amount') const btn = document.getElementById('btn_income') btn.addEventListener('click', () => { const myMoney = new Money() myMoney.addItem(type.value, amount.value) type.value = null amount.value = null }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input name="typ" type="text" id="p_type" placeholder="Type of income" /> <input name="amount" type="text" id="p_amount" placeholder="Amount" /> <button id="btn_income">Add</button> <ul id="list"> </ul> </body> </html>