He escrito un código para dividir la entrada en dos variables, es decir, año y mes. Pero, soy incapaz de hacer que funcione. No devuelve el número total de meses en el campo de texto respectivo. Por favor, ayúdame a depurar mi código.
$(function() { $("#duration").keyup(function() { var input = document.getElementById('duration').value; var fields = input.split('.'); var years = fields[0]; var months = fields[1]; var result = years.val() * 12 + months.val(); document.getElementById("totalNumMonths").innerHTML = result; }); }); <html> <body> <table> <tr> <td>Calculate Months</td> <td> <label>Input Years in the format (year.month eg 11.6)</label> <input class="form-control" name="duration" id="duration" value="" type="number" /> <br/> <label>Total Months</label> <input class="form-control" name="totalNumMonths" id="totalNumMonths" value="" type="number" /> </td> </tr> </table> </body> </html>Problemas con el código que identifiqué y solucioné.
years.val() y months.val() porque los years y los months tienen un valor de cadena.months no estará definido, por lo que puede definir years y months como fields[0] || "0" y fields[1] || "0" respectivamente.totalNumMonths es una entrada. Debe establecer el value y no innerHTMLyears y los months produce una cadena, agregué un símbolo + delante de ellos al establecer el valor de #totalNumMonths para convertirlos en números, ya que estamos realizando una acción numérica. De lo contrario, el símbolo + en la cadena realizará la concatenación de cadenas.violín de trabajo
$(function () { $("#duration").keyup(function () { var input = document.getElementById('duration').value; var fields = input.split('.'); var years = fields[0] || "0"; var months = fields[1] || "0"; var result = +years * 12 + +months; document.getElementById("totalNumMonths").value = result; }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <table> <tr> <td>Calculate Months</td> <td> <label>Input Years in the format (year.month eg 11.6)</label> <input class="form-control" name="duration" id="duration" value="" type="number" /> <br /> <label>Total Months</label> <input class="form-control" name="totalNumMonths" id="totalNumMonths" value="" type="number" /> </td> </tr> </table>Estaba llamando a val en elementos de cadena, lo que provocó errores. Y el resultado fue agregar meses como valor de cadena.
$(function () { $("#duration").keyup(function () { var input = document.getElementById('duration').value; var fields = input.split('.'); var years = parseInt(fields[0]); var months = parseInt(fields[1]); var result = (years * 12) + months; document.getElementById("totalNumMonths").value = result; }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <table> <tr> <td>Calculate Months</td> <td> <label>Input Years in the format (year.month eg 11.6)</label> <input class="form-control" name="duration" id="duration" value="" type="number"/> <br/> <label>Total Months</label> <input class="form-control" name="totalNumMonths" id="totalNumMonths" value="" type="number"/> </td> </tr> </table> </body> </html>En el fragmento de código, tiene el valor de años y meses en las variables respectivas, por lo que no necesita usar years.val() para obtener ese valor.
¡¡Mira esto!!
$(function() { $("#duration").keyup(function() { var input = document.getElementById('duration').value; var fields = input.split('.'); var years = fields[0]; var months = fields[1] || 0; var result = years * 12 + months; document.getElementById("totalNumMonths").innerHTML = result; }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>Calculate Months</td> <td> <label>Input Years in the format (year.month eg 11.6)</label> <input class="form-control" name="duration" id="duration" value="" type="number" /> <br/> <label>Total Months :</label> <!-- <input class="form-control" name="totalNumMonths" id="totalNumMonths" value="" type="number" /> --> <span id="totalNumMonths">0</span> </td> </tr> </table>