Home / Questions / 497938
Accepted
jano
Asked: 2022-04-18 18:37:57 +0800 CST 2022-04-18 18:37:57 +0800 CST

Fill an Input automatically depending on the value of another input

  • 772

How are you friends, I have a problem when trying to load a text in an input. I want that when I load the value of the indMasaCorp input in situationIMC, "Low weight" or "Normal weight" should appear. The value of indMasaCorp is filled in automatically when entering the height and weight with the calculateIMC function, that can be done, but it does not load the situationIMC value, the code I have is the following:

 function calcularIMC() {            
            var talla = document.getElementById("txttalla").value;
            var peso = document.getElementById("txtpeso").value;
            var result = peso / (talla * talla);
            if (result == NaN || result == Infinity) {
                document.getElementById("txtimc").value = "";
            } else {
                document.getElementById("txtimc").value = result.toFixed(5);
            }            
        }

        
        function tablaIMC() {
            var imc = document.getElementById("txtimc");
            var situacion = document.getElementById("txtsituacionIMC");                        
            if (imc.value < 18.5) {
                situacion.innerHTML = "Peso Bajo";
            } else {
                situacion.innerHTML = "Peso Normal";
            }
            
        }
<div class="form-row mt-4">
        <div class="col-1 pl-1 mr-4">
            <label asp-for="peso" class="control-label"></label>
            <input asp-for="peso" class="form-control" id="txtpeso" oninput="calcularIMC()" />
            <span asp-validation-for="peso" class="text-danger"></span>
        </div>
        <div class="col-1 pl-1 mr-4">
            <label asp-for="talla" class="control-label"></label>
            <input asp-for="talla" class="form-control" id="txttalla" oninput="calcularIMC()" />
            <span asp-validation-for="talla" class="text-danger"></span>
        </div>
        <div class="col-2 pl-1 mr-4">
            <label asp-for="indMasaCorp" class="control-label"></label>
            <input asp-for="indMasaCorp" class="form-control"  id="txtimc" oninput="tablaIMC()" disabled/>
            <span asp-validation-for="indMasaCorp" class="text-danger"></span>
        </div>
        <div class="col-4 pl-1">
            <label asp-for="situacionIMC" class="control-label"></label>
            <input asp-for="situacionIMC" class="form-control" id="txtsituacionIMC" disabled/>
            <span asp-validation-for="situacionIMC" class="text-danger"></span>
        </div>
    </div>

javascript

1 Answers

  1. Best Answer

    I made some changes to the code. Basically you must call tableIMC() within calculateBMI() and you had an error when placing the value of the input, you did it with innerHTML and it is with value. Then if you want to place it in a div, span, etc yes you can use innerHTML

    <script>
    function calcularIMC() {            
        var talla = document.getElementById("txttalla").value;
        var peso = document.getElementById("txtpeso").value;
        var result = peso / (talla * talla);
        if (result == NaN || result == Infinity) {
            document.getElementById("txtimc").value = "";
            tablaIMC();
        } else {
            document.getElementById("txtimc").value = result.toFixed(5);
            tablaIMC();
        }            
    }

    
    function tablaIMC() {
        var imc = document.getElementById("txtimc");
        var situacion = document.getElementById("txtsituacionIMC");  
        if(imc.value)
        {                      
            if (imc.value < 18.5) {
                situacion.value = "Peso Bajo";
            } else {
                situacion.value = "Peso Normal";
            }
        }else{
            situacion.value = "";
        }
        
    }
    </script>


    <div class="form-row mt-4">
    <div class="col-1 pl-1 mr-4">
        <label asp-for="peso" class="control-label"></label>
        <input asp-for="peso" class="form-control" id="txtpeso" oninput="calcularIMC()" />
        <span asp-validation-for="peso" class="text-danger"></span>
    </div>
    <div class="col-1 pl-1 mr-4">
        <label asp-for="talla" class="control-label"></label>
        <input asp-for="talla" class="form-control" id="txttalla" oninput="calcularIMC()" />
        <span asp-validation-for="talla" class="text-danger"></span>
    </div>
    <div class="col-2 pl-1 mr-4">
        <label asp-for="indMasaCorp" class="control-label"></label>
        <input asp-for="indMasaCorp" class="form-control"  id="txtimc" onchange="tablaIMC()" disabled/>
        <span asp-validation-for="indMasaCorp" class="text-danger"></span>
    </div>
    <div class="col-4 pl-1">
        <label asp-for="situacionIMC" class="control-label"></label>
        <input asp-for="situacionIMC" class="form-control" id="txtsituacionIMC" disabled/>
        <span asp-validation-for="situacionIMC" class="text-danger"></span>
    </div>
</div>
    • 0