0

estoy trabajando con un formulario que al ingresar un texto a los inputs, este cambia el sentido de una oración utilizando otros sustantivos, adverbios y adj calificativos.

El problema que me ocurre es que cuando ingreso el texto al input y este se refleja en un span, no muestra la palabra completa, la cual esta ingresada en el formulio, esto solo ocurre si yo escribo la palabra y luego presiono enter, ahi me muestra en pantalla la palabra completa.

Por ejemplo si en el primer input, yo coloco HOLA en pantalla se vera HOL y si presiono enter, podré ver el hola completo..

como puedo solucionar este lag.

 <div class="container" style="width: 800px;margin: 0 auto;">
    <h2>FRASE: </h2>

    <p style="font-size:2em"> <span id="sustantivo">Juan</span> se <span id="verbo_sentia">sentía</span> <span
            id="calificativo_solo">
            solo</span>, <span id="verbo_volvia">
            volvía</span> a su departamento, y el
        <span id="cambia_silencio">silencio </span> era el <span id="calificativo_unico">único </span> que lo <span
            id="verbo_esperaba">esperaba</span>.
        Juan <span id="verbo_estaba_1">estaba</span> <span id="calificativo_triste">triste</span> , Juan <span
            id="verbo_estaba_2">estaba</span> <span id="calificativo_solo2">solo</span> , muy <span
            id="calificativo_solo3">solo</span>. Y
        Juan <span id="verbo_tuvo">tuvo</span> una <span id="calificativo_brillante">brillante</span>
        idea:</p>

    <form id="frase" action="#" >
        <fieldset>
            <legend>Cambie su frase:</legend>
            <p>* Presione enter al completar cada campo</p>
            <!-- Cambia el sustantivo propio-->
            <label for="adjetivo">Cambia el Sustantivo propio:</label><br>
            <input type="text" id="ingresa_sustantivo" onkeydown=" return FunctionCambiar()" size=50><br>
            <br>
            <!-- Cambia el verbo volvía-->
            <label for="verbo">Cambia el verbo(volvía):</label><br>
            <input type="text" id="ingresa_verbo_volvia" onkeydown="return FunctionCambiar()" size=50><br>
            <br>
            <!-- Cambia el verbo sentía-->
            <label for="verbo">Cambia el verbo (Sentía):</label><br>
            <input type="text" id="ingresa_verbo_sentia" onkeydown="return FunctionCambiar()" size=50><br>
            <br>
            <!-- Cambia el verbo esperaba-->
            <label for="verbo">Cambia el verbo (Esperaba):</label><br>
            <input type="text" id="ingresa_verbo_esperaba" onkeydown="return FunctionCambiar()" size=50><br>
            <br>
            <!-- Cambia el verbo estaba-->
            <label for="verbo">Cambia el verbo (Estaba):</label><br>
            <input type="text" id="ingresa_verbo_estaba1" onkeydown="return FunctionCambiar()" size=50><br>
            <br>
            <!-- Cambia el verbo estaba 2-->
            <label for="verbo">Cambia el verbo (juan estaba):</label><br>
            <input type="text" id="ingresa_verbo_estaba2" onkeydown="return FunctionCambiar()" size=50><br>
            <br>
            <!-- Cambia el verbo tuvo-->
            <label for="verbo">Cambia el verbo (Tuvo):</label><br>
            <input type="text" id="ingresa_verbo_tuvo" onkeydown="return FunctionCambiar()" size=50><br>
            <br>

            <!-- Cambia el adjetivo calificativo solo-->
            <label for="verbo">Cambia el adjetivo calificativo (Solo):</label><br>
            <input type="text" id="ingresa_calificativo_solo" onkeydown="return FunctionCambiar()" size=50><br>
            <br>

            <!-- Cambia el adjetivo calificativo solo2-->
            <label for="verbo">Cambia el adjetivo calificativo (Solo 2):</label><br>
            <input type="text" id="ingresa_calificativo_solo2" onkeydown="return FunctionCambiar()" size=50><br>
            <br>

            <!-- Cambia el adjetivo calificativo solo3-->
            <label for="verbo">Cambia el adjetivo calificativo (Solo 3):</label><br>
            <input type="text" id="ingresa_calificativo_solo3" onkeydown="return FunctionCambiar()" size=50><br>
            <br>

            <!-- Cambia el adjetivo calificativo triste-->
            <label for="verbo">Cambia el adjetivo calificativo (Triste):</label><br>
            <input type="text" id="ingresa_calificativo_triste" onkeydown="return FunctionCambiar()" size=50><br>
            <br>
            <!-- Cambia el adjetivo calificativo brillante-->
            <label for="verbo">Cambia el adjetivo calificativo (Brillante):</label><br>
            <input type="text" id="ingresa_calificativo_brillante" onkeydown="return FunctionCambiar()" size=50><br>
            <br>
            <!-- Cambia el adjetivo calificativo unico-->
            <label for="verbo">Cambia el adjetivo calificativo (Único):</label><br>
            <input type="text" id="ingresa_calificativo_unico" onkeydown="return FunctionCambiar()" size=50><br>
            <br>

            <!-- Eligue el sustantivo de silencio-->
            <label for="silencio">Seleccione un sustantivo para (silencio):</label><br>
            <select name="silencio" id="silencio">
                <option disabled selected value="value1">-- Seleccione una opción -- </option>
                <option value="value2">secreto</option>
                <option value="value3">reserva</option>
                <option value="value4">disimulo</option>
            </select>


        </fieldset>
    </form>
    <br>

</div>

<script>

    function FunctionCambiar() {

        document.getElementById("frase").addEventListener("click", function (e) {
        e.preventDefault();
    });

        // cambia sustantivo propio
        var sustantivo = document.getElementById("ingresa_sustantivo").value;
        document.getElementById("sustantivo").textContent = sustantivo;
        document.getElementById("sustantivo").style.background = "#d1f0ff";


        // cambia verbo volvia
        var verbo = document.getElementById("ingresa_verbo_volvia").value;
        document.getElementById("verbo_volvia").textContent = verbo;
        document.getElementById("verbo_volvia").style.background = "#ebffdb";


        // cambia verbo sentia
        var verbo = document.getElementById("ingresa_verbo_sentia").value;
        document.getElementById("verbo_sentia").textContent = verbo;
        document.getElementById("verbo_sentia").style.background = "#ebffdb";


        // cambia verbo esperaba
        var verbo = document.getElementById("ingresa_verbo_esperaba").value;
        document.getElementById("verbo_esperaba").textContent = verbo;
        document.getElementById("verbo_esperaba").style.background = "#ebffdb";


        // cambia verbo estaba 1
        var verbo = document.getElementById("ingresa_verbo_estaba1").value;
        document.getElementById("verbo_estaba_1").textContent = verbo;
        document.getElementById("verbo_estaba_1").style.background = "#ebffdb";


        // cambia verbo estaba 2
        var verbo = document.getElementById("ingresa_verbo_estaba2").value;
        document.getElementById("verbo_estaba_2").textContent = verbo;
        document.getElementById("verbo_estaba_2").style.background = "#ebffdb";


        // cambia verbo tuvo
        var verbo = document.getElementById("ingresa_verbo_tuvo").value;
        document.getElementById("verbo_tuvo").textContent = verbo;
        document.getElementById("verbo_tuvo").style.background = "#ebffdb";


        // cambia abjetivos calificativos solo
        var calificativos = document.getElementById("ingresa_calificativo_solo").value;
        document.getElementById("calificativo_solo").textContent = calificativos;
        document.getElementById("calificativo_solo").style.background = "#e9d4ff";


        // cambia abjetivos calificativos solo2
        var calificativos = document.getElementById("ingresa_calificativo_solo2").value;
        document.getElementById("calificativo_solo2").textContent = calificativos;
        document.getElementById("calificativo_solo2").style.background = "#e9d4ff";

        // cambia abjetivos calificativos solo3
        var calificativos = document.getElementById("ingresa_calificativo_solo3").value;
        document.getElementById("calificativo_solo3").textContent = calificativos;
        document.getElementById("calificativo_solo3").style.background = "#e9d4ff";


        // cambia abjetivos calificativos triste
        var calificativos = document.getElementById("ingresa_calificativo_triste").value;
        document.getElementById("calificativo_triste").textContent = calificativos;
        document.getElementById("calificativo_triste").style.background = "#e9d4ff";

        // cambia abjetivos calificativos brillante
        var calificativos = document.getElementById("ingresa_calificativo_brillante").value;
        document.getElementById("calificativo_brillante").textContent = calificativos;
        document.getElementById("calificativo_brillante").style.background = "#e9d4ff";


        // cambia abjetivos calificativos único
        var calificativos = document.getElementById("ingresa_calificativo_unico").value;
        document.getElementById("calificativo_unico").textContent = calificativos;
        document.getElementById("calificativo_unico").style.background = "#e9d4ff";


        // Selecciona un sustantivo



    }
</script>

1 respuesta 1

4

Eso se debe al evento onkeydown, este evento se dispara al presionar la tecla antes que el caracter se inserte. Si lo cambias por onkeyup funcionará bien.

function leerInput(input){

   document.getElementById('label').innerHTML = input.value;

}
<input type="text" onkeydown="leerInput(this)" placeholder="keydown"/>
<br><br>

<input type="text" onkeyup="leerInput(this)" placeholder="keyup"/>
<br>
<label id="label"></label>

1
  • Toda la razon amigo. muchas gracias..
    – GhostCoder
    Commented el 6 oct. 2020 a las 19:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.