0

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>

1 respuesta 1

2

Tenías las instrucciones para manejar "silencio" dentro de la función y debe ser fuera, para que esté disponible desde la carga de la página y evitar que se asignen eventos cada que se aplican cambios en los input.

Luego, estabas asignando el nuevo contenido con base en el valor del radio, pero debería ser el texto de la etiqueta.

Recuerda que todo este código Javascript debe estar debajo del HTML o cargar dentro de una función que se ejecute después de cargar el DOM.

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";
        }
    }
    // ****** El manejo de "silencio" debe estar fuera de la función
    // seleciona para silencio
    let radios = document.querySelectorAll(".radio");
    // Obtener todos los elementos con clase campo_checkButton
    let campo_checkButton = document.querySelectorAll(".campo_checkButton");
        
    // Recorrer todos los radios con forEach y usando funciones flecha
    radios.forEach(radio => {
        // Agregar evento onclick
        radio.addEventListener('click', () => {
            if(radio.checked) {
                // Recorrer elementos para actualizar
                campo_checkButton.forEach(elemento => {
                    // Asignar texto
                    elemento.innerText = radio.closest('label').innerText;
                    // Cambiar color de fondo
                    elemento.style.background = "#b0fffb";
                });
            }
        });
    });
<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" class="campo_checkButton">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>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>

3
  • si yo esta clase campo_checkButton la coloco en varias etiquetas span solo repite el valor una sola vez, en las otras etiquetas que tienen la misma clase no lo muestra.. porque ocurre eso?
    – GhostCoder
    Commented el 8 oct. 2020 a las 18:36
  • Porque en la pregunta pusiste solo uno y no especificaste que eran varios donde debía aplicarse el cambio.
    – Triby
    Commented el 8 oct. 2020 a las 19:00
  • Listo, revisa la actualización, ahora debe aplicar a todos los que tengan la misma clase.
    – Triby
    Commented el 8 oct. 2020 a las 19:17

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.