He creado 3 campos de entrada Comercio, Marcado y Precio. Me gustaría que el usuario ingrese una operación y luego manipule el precio ya sea mediante un margen de beneficio o ingresando el precio y el margen de beneficio mostrando un reflejo de ese precio.
Me gustaría que el cálculo sea en vivo y no tener que enviar un botón cada vez para ver los cambios.
Dividí el código en 2 scripts separados, pero eso no marcó la diferencia y también cambié addEventListeners para "cambiar", pero eso aún no funcionó. Tengo la sensación de que tendré que agregar una declaración IF entre los 2 resultados de alguna manera.
document.getElementById("trade").addEventListener("change", calculation); document.getElementById("price").addEventListener("change", calculation); document.getElementById("markup").addEventListener("change", calculation); function calculation() { var trade = parseFloat(document.getElementById("trade").value); var markup = parseFloat(document.getElementById("markup").value); var price = parseFloat(document.getElementById("price").value); var markupresult = price / trade; var priceresult = markup * trade; document.getElementById("markup").value = (markupresult).toFixed(2); document.getElementById("price").value = (priceresult).toFixed(2); } <div class="form-group"><label>Trade</label><input type="number" id="trade" name="trade"></div> <div class="form-group"><label>Price</label><input type="number" id="price" name="price"></div> <div class="form-group"><label>Markup</label><input type="number" id="markup" name="markup"></div>Verifique el fragmento a continuación.
Puede usar un interruptor para cambiar solo uno o viceversa.
En lugar de change , puede usar keyup que le proporcionará una salida en tiempo real (siempre que el usuario ingrese un número, el resultado se calculará y mostrará).
document.getElementById("trade").addEventListener("change", calculation); document.getElementById("price").addEventListener("change", calculation); document.getElementById("markup").addEventListener("change", calculation); function calculation(event) { var trade = parseFloat(document.getElementById("trade").value); var markup = parseFloat(document.getElementById("markup").value); var price = parseFloat(document.getElementById("price").value); var markupResult = price / trade; var priceResult = markup * trade; switch (event.target.getAttribute("id")) { case "markup": document.getElementById("price").value = priceResult.toFixed(2); break; case "price": document.getElementById("markup").value = markupResult.toFixed(2); break; } } <div class="form-group"> <label>Trade</label><input type="number" id="trade" name="trade" /> </div> <div class="form-group"> <label>Price</label><input type="number" id="price" name="price" /> </div> <div class="form-group"> <label>Markup</label><input type="number" id="markup" name="markup" /> </div>