1

introducir la descripción de la imagen aquí

A la derecha del timeout... me gustaría que se mostrase el input que tengo debajo. Es un input que está escondido y que solo aparece cuando marco su correspondiente checkbox.

Adjunto código también:

<div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-3 input-group input-group-sm">
                <input class="form-check-input" id="node-input-sendFullArray" type="checkbox" name="checkeo"> <i class="fa fa-send"></i> Send full array
                <label class="form-check-label" for="sendFullArray"></label>
            </div>

            <div class="col-xs-12 col-md-3 input-group input-group-sm">
                <input class="form-check-input" id="node-input-sendRandomElement" type="checkbox" name="checkeo"> <i class="fa fa-random"></i> Send random element
                <label class="form-check-label" for="sendRandomElement"></label>
            </div>

            <div class="col-xs-12 col-md-3 input-group input-group-sm">
                <input class="form-check-input" id="node-input-sendWithTimeOut" type="checkbox" name="checkeo" onchange="showNumber()"> <i class="fa fa-clock-o" aria-hidden="true"></i> Send with timeout
                <label class="form-check-label" for="sendWithTimeOut"></label>
                <div id="content" style="display: none;">

                    <input class="form-check-input" id="node-input-seconds" type="number" min="1" max="99" name="checkeo" style="width: 15%;"> </i> seconds
                    <label class="form-check-label" for="seconds">
                    
                </label>
                </div>
            </div>
        </div>
    </div>

Código que muestra el contador:

<script type="text/javascript">
    function showNumber() {
        check = document.getElementById("node-input-sendWithTimeOut");
        element = document.getElementById("content");
        if (check.checked) {
            element.style.display = 'block';
        } else {
            element.style.display = 'none';
        }
    }
</script>

4
  • En vez de <div> usa una etiqueta en línea como <span>.
    – Triby
    Commented el 28 abr. 2021 a las 14:54
  • Adjunto un estracto más de código que quizás influye en el estilo, edito arriba. Gracias.
    – Andrés
    Commented el 28 abr. 2021 a las 15:01
  • 1
    Cuando asignas block a la propiedad display, automáticamente lo estás colocando abajo. Cambia por inline-block.
    – Triby
    Commented el 28 abr. 2021 a las 15:03
  • Igual, se sigue manteniendo abajo. Necesitas que te muestre algo más de código? Gracias de nuevo!
    – Andrés
    Commented el 28 abr. 2021 a las 15:06

1 respuesta 1

1

Como te dije en comentarios, con block haces que el elemento se coloque abajo y necesitas cambiar por inline-block. Prueba con este fragmento de código para ver que funciona correctamente:

function showNumber() {
    check = document.getElementById("node-input-sendWithTimeOut");
    element = document.getElementById("content");
    if (check.checked) {
        element.style.display = 'inline-block';
    } else {
        element.style.display = 'none';
    }
}
<div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-3 input-group input-group-sm">
                <input class="form-check-input" id="node-input-sendFullArray" type="checkbox" name="checkeo"> <i class="fa fa-send"></i> Send full array
                <label class="form-check-label" for="sendFullArray"></label>
            </div>

            <div class="col-xs-12 col-md-3 input-group input-group-sm">
                <input class="form-check-input" id="node-input-sendRandomElement" type="checkbox" name="checkeo"> <i class="fa fa-random"></i> Send random element
                <label class="form-check-label" for="sendRandomElement"></label>
            </div>

            <div class="col-xs-12 col-md-3 input-group input-group-sm">
                <input class="form-check-input" id="node-input-sendWithTimeOut" type="checkbox" name="checkeo" onchange="showNumber()"> <i class="fa fa-clock-o" aria-hidden="true"></i> Send with timeout
                <label class="form-check-label" for="sendWithTimeOut"></label>
                <div id="content" style="display: none;">

                    <input class="form-check-input" id="node-input-seconds" type="number" min="1" max="99" name="checkeo" style="width: 15%;"> </i> seconds
                    <label class="form-check-label" for="seconds">
                    
                </label>
                </div>
            </div>
        </div>
    </div>

Si aún se sigue manteniendo abajo, debes revisar los estilos CSS, probablemente tengas una regla que force el elemento (un hijo o un previo) a comportarse como bloque. Te sugiero checar #node-input-sendWithTimeOut, #content y #node-input-seconds.

Finalmente, algunas recomendaciones:

  • No uses estilos en línea: <div id="content" style="display: none;">, mejor usa una clase para ocultar <div id="content" class="oculto"> y con Javascript puedes quitar la clase para que se muestre y agregarla para volver a ocultar
  • No uses eventos en línea: <input ... name="checkeo" onclick="showNumber()">, es mejor obtener el elemento y asignar el evento desde Javascript
  • Las etiquetas <label> son útiles para ayudar a acceder al campo al que están relacionadas y, si están vacías, no tiene sentido que las uses. Además, el atributo for debe contener ID de elemento al que están asociadas

Aplicando estas recomendaciones. tu código quedaría más o menos así:

// Obtener checkbox
let check = document.querySelector('#node-input-sendWithTimeOut');
// Asignar evento
check.addEventListener('change', showNumber);

function showNumber() {
    element = document.getElementById("content");
    // Check se definió fuera de la función
    if (check.checked) {
        // Quitar clase para que se pueda mostrar
        element.classList.remove('oculto');
    } else {
        // Agregar clase para ocultar
        element.classList.add('oculto');
    }
}
#content {
    display: inline-block;
}
#content.oculto {
    display: none;
}
<div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-3 input-group input-group-sm">
                <input class="form-check-input" id="node-input-sendFullArray" type="checkbox" name="checkeo"> 
                <label class="form-check-label" for="node-input-sendFullArray">
                    <i class="fa fa-send"></i> Send full array
                </label>
            </div>

            <div class="col-xs-12 col-md-3 input-group input-group-sm">
                <input class="form-check-input" id="node-input-sendRandomElement" type="checkbox" name="checkeo"> 
                <label class="form-check-label" for="node-input-sendRandomElement">
                    <i class="fa fa-random"></i> Send random element
                </label>
            </div>

            <div class="col-xs-12 col-md-3 input-group input-group-sm">
                <input class="form-check-input" id="node-input-sendWithTimeOut" type="checkbox" name="checkeo"> 
                <label class="form-check-label" for="node-input-sendWithTimeOut">
                    <i class="fa fa-clock-o" aria-hidden="true"></i> Send with timeout
                </label>
                <div id="content" class="oculto">

                    <input class="form-check-input" id="node-input-seconds" type="number" min="1" max="99" name="checkeo" style="width: 15%;"> 
                    <label class="form-check-label" for="node-input-seconds">
                        <i class="fa fa-clock-o"></i> seconds
                </label>
                </div>
            </div>
        </div>
    </div>

2

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.