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>