tengo un input radio al final de mi codigo con el que al seleccionar cualquiera de ellos debería cambiar el textContent de la palabra (silencio) que tiene un span con un Id.
el problema esta en que solo el cambio se ejecuta si yo completo cualquiera de los otros inputs de texto, una vez ejecutado esos input y si vuelvo a presionar los (inputs radio) ahi si logra realizar el cambio..
mi proregunta es: como puedo hacer que al entrar en la pagina y presionar los radio inputs, estos realicen el cambio y coloquen en value asignado, que en este caso y a modo de ejemplo tiene unos numeros.
<div class="container" style="width: 800px;margin: 0 auto;">
<h2>FRASE ORIGINAL</h2>
<p style="font-size:2em">Juan se sentía solo, volvía a su departamento, y el silencio era el único que lo
esperaba. Juan estaba triste
, Juan estaba solo , muy solo. Y Juan tuvo una brillante idea:</p>
<h2>FRASE EDITADA: </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"> <span class="campo_checkButton">silencio</span> </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>Edita la frase:</legend>
<!-- Cambia el sustantivo propio-->
<label for="adjetivo">Cambia el Sustantivo propio:</label><br>
<input type="text" id="ingresa_sustantivo" onkeyup="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" onkeyup="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" onkeyup="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" onkeyup="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" onkeyup="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" onkeyup="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" onkeyup="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" onkeyup="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" onkeyup="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" onkeyup=" 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" onkeyup="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" onkeyup="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" onkeyup="FunctionCambiar()" size=50><br>
<br>
<!-- Eligue el sustantivo de silencio-->
<label for="silencio">Cambia (silencio):</label>
<br>
<label><input type="radio" name="sexo" class="radio" value="1">hola<label>
<label><input type="radio" name="sexo" class="radio" value="2">holas<label>
<label><input type="radio" name="sexo" class="radio" value="3">holitas<label>
</fieldset>
</form>
<br>
</div>
<script>
function FunctionCambiar() {
// cambia sustantivo propio
var sustantivo = document.getElementById("ingresa_sustantivo").value;
if (sustantivo.trim() != '') {
document.getElementById("sustantivo").textContent = sustantivo;
document.getElementById("sustantivo").style.background = "#d1f0ff";
}
// cambia verbo volvia
var verbo = document.getElementById("ingresa_verbo_volvia").value;
if (verbo.trim() != '') {
document.getElementById("verbo_volvia").textContent = verbo;
document.getElementById("verbo_volvia").style.background = "#ebffdb";
}
// cambia verbo sentia
var verbo = document.getElementById("ingresa_verbo_sentia").value;
if (verbo.trim() != '') {
document.getElementById("verbo_sentia").textContent = verbo;
document.getElementById("verbo_sentia").style.background = "#ebffdb";
}
// cambia verbo esperaba
var verbo = document.getElementById("ingresa_verbo_esperaba").value;
if (verbo.trim() != '') {
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;
if (verbo.trim() != '') {
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;
if (verbo.trim() != '') {
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;
if (verbo.trim() != '') {
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;
if (calificativos.trim() != '') {
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;
if (calificativos.trim() != '') {
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;
if (calificativos.trim() != '') {
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;
if (calificativos.trim() != '') {
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;
if (calificativos.trim() != '') {
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;
if (calificativos.trim() != '') {
document.getElementById("calificativo_unico").textContent = calificativos;
document.getElementById("calificativo_unico").style.background = "#e9d4ff";
}
// seleciona para silencio
let radio = document.querySelectorAll(".radio");
let campo_checkButton = document.querySelector(".campo_checkButton");
for (let i = 0; i < radio.length; i++) {
radio[i].addEventListener("click", function () {
campo_checkButton.textContent = radio[i].value;
document.querySelector(".campo_checkButton").style.background = "#b0fffb";
});
}
console.log(campo_checkButton)
}
</script>