1

Me gustaría saber ¿Cómo imito el funcionamiento de un ComboBox de Visual Basic en HTML?

<!DOCTYPE html>
<head>
<html lang="ES" >
<meta charset="UTF-8" >
<meta name="author" content="Pol Flórez Viciana" >
<meta name="owner" content="Pol Flórez Viciana" >
<meta name="keywords" content="Perfecto,Números,Calcular" >
<title>App Cambios de Base</title>
<meta name="description" content="Cambia de Base Simbólica con unos Clics." >
<meta name="robots" content="index, dofollow" >
<style>
    body {
        background-color: rgb(0,0,0); text-align: center;
    } 
    h1 {
        color: rgb(128,128,255); text-align: center; text-shadow: 0px 0px 25px green; margin: 0px;
    }
    h2 {
        color: rgb(128,255,128); text-align: center; text-shadow: 0px 0px 25px white; margin: 0px;
    }
    h3 {
        color: rgb(255,127,0); text-align: center; text-shadow: 0px 0px 25px white; margin: 0px;
    }
    p {
        color: white; text-align: left;
    }
    a {
        cursor: pointer;
        background-color: rgb(64,64,255);
        padding: 5px 5px 5px 5px;
        border-radius: 25px;
        color: yellow;
        transition: all 0.8s linear;
        border: 1px double white;
    }
    a:link { color: rgb(255,255,0); } 
    a:visited { color: rgb(255,255,128); } 
    a:hover { color: rgb(255,0,0); }

    .MyInput {
        cursor: pointer;
        border-radius: 10px;
        text-align: center; margin: 2px;
    }
    section {
        vertical-align: text-top;
        width: 92%; min-width: 420px; max-width: 960px; padding: 10px; 
        background-color: rgb(32,32,32);
        border-radius: 25px;    
        position: absolute; 
        top: 50%; left: 50%; 
        transform: translate(-50%,-50%);
        color: white;
    }
    #FechaInicioFechaFin{
        position: fixed;
        right: 5px;
        bottom: 5px;
        color: white;
    }
    #Pantalla1 {
        display: inline-block;  
    }
    #Pantalla2 {
        display: none;
    }
    .Centrado{
        vertical-align: top;
        display: inline-block;
        text-align: center;
    }
    .Izquierda{
        vertical-align: top;
        display: inline-block;
        text-align: left;
    }
    .Derecha{
        vertical-align: top;
        display: inline-block;
        text-align: right;
    }
</style>
</head>
<body>
<center>
    <h1>App Cambios de Base</h1>
    <section id="Pantalla1">
        <div class="Izquierda" style="width: 72%;" >
            <input class="MyInput" type="button" id="BotonEjemplo" name="BotonEjemplo" onclick="Ir2()" value="Ejemplos" title="Ejemplos de Cambios de Base" />
        </div>
        <div class="Derecha" >
            <input class="MyInput" type="button" id="BotonF0" name="BotonF0" onclick="Ir2()" value="Ayuda" style="background-color: red; color: white;" title="¿Necesitas Ayuda?" />
        </div>
        <center>
            <h2>Introduzca el Número a Calcular</h2>
            <br>
            <label>Introduzca el valor para cambiarlo de base.</label>
            <input type="text" id="ElInput" value="10" style="width: 160px;" />
            <label>Introduzca el valor de base.</label>
            <input type="text" id="LaBase" value="2" style="width: 50px;" />
            <br><br>
            <input type="button" id="ElButton1" class="MyInput" value="Calcular de Decimal a Base" onclick="Calcular()" />
            <input type="button" id="ElButton2" class="MyInput" value="Calcular de Base a Decimal" onclick="CalcularInversa()" />
            <br><br>
            <label id="Resultado">Resultado.</label>
            <br><br>
        </center>
    </section>
    <section id="Pantalla2" class="Derecha" >
        <input type="button" onclick="Ir1()" style="background-color: red; color: white;" value="X" />
        <center>
            <h2>Ayuda Para Calculos de Cambios de Base</h2>
            <p>
                Introduzca los valores de número y de base para calcular el cambio de base con este pequeño ejemplo de programación.<br>
                <br>
                Haz números mayores a los que maneja este aplicativo con los proyectos de calculadoras de Pol Power Calculator:<br>
            </p>
            <a href="https://dos-a-la-tres.com/aplicaciones-online.php#Pol-Power-Calculator-Web" >Pol Power Calculator Web.</a><br>
            <br>
            <a href="https://dos-a-la-tres.com/aplicaciones.php#Pol-Power-Calculator" >Pol Power Calculator Para Windows</a><br>
            <br><br>    
        </center>
    </section>
    
    <footer id="FechaInicioFechaFin" ><a href="mailto:[email protected]">[email protected]</a> ~ 13/12/2024 - 13/12/2024</footer>
</center>   
<script>
// Funciones Base de Todo Esto
function Calcular(){
    var ElDato = parseFloat(document.getElementById("ElInput").value);
    var LaBase = parseInt(document.getElementById("LaBase").value);
    var Numero = parseInt(ElDato);
    if (ElDato >= 0 && LaBase >= 0){
        document.getElementById("Resultado").innerHTML = Numero.toString(LaBase);   
    }       
}
function CalcularInversa(){
    var ElDato = parseFloat(document.getElementById("ElInput").value);
    var LaBase = parseInt(document.getElementById("LaBase").value);
    var Numero = parseInt(ElDato);
    if (ElDato >= 0 && LaBase >= 0){
        document.getElementById("Resultado").innerHTML = parseInt(Numero, LaBase);  
    }       
}
function Ir1(){
    document.getElementById("Pantalla1").style = "display: inline-block;";
    document.getElementById("Pantalla2").style = "display: none;";
}
function Ir2(){
    document.getElementById("Pantalla1").style = "display: none;";
    document.getElementById("Pantalla2").style = "display: inline-block;";
}
</script>
</body>
</html>

En este fragmento de código, me gustaría crearle un combobox en vez de un text en el que se pueda elegir entre diferentes opciones la Base de ese control ( LaBase ) que pueda ser de 2 3 4 5 6 8 10 16

2 respuestas 2

1

El elemento HTML más similar a un ComboBox es el select.

const select = document.querySelector("select");
select.addEventListener("change", () =>  console.log(select.value) )
<label for="color">Selecciona un color</la el>

<select name="color">
  <option value="a">Rojo</option>
  <option value="b">Verde</option>
  <option value="c">Azul</option>
</select>

0

Esto responde bien mi pregunta, ahora así tengo una lista desplegable.

<!DOCTYPE html>
<head>
<html lang="ES" >
<meta charset="UTF-8" >
<meta name="author" content="Pol Flórez Viciana" >
<meta name="owner" content="Pol Flórez Viciana" >
<meta name="keywords" content="Perfecto,Números,Calcular" >
<title>App Cambios de Base</title>
<meta name="description" content="Cambia de Base Simbólica con unos Clics." >
<meta name="robots" content="index, dofollow" >
<style>
    body {
        background-color: rgb(0,0,0); text-align: center;
    } 
    h1 {
        color: rgb(128,128,255); text-align: center; text-shadow: 0px 0px 25px green; margin: 0px;
    }
    h2 {
        color: rgb(128,255,128); text-align: center; text-shadow: 0px 0px 25px white; margin: 0px;
    }
    h3 {
        color: rgb(255,127,0); text-align: center; text-shadow: 0px 0px 25px white; margin: 0px;
    }
    p {
        color: white; text-align: left;
    }
    a {
        cursor: pointer;
        background-color: rgb(64,64,255);
        padding: 5px 5px 5px 5px;
        border-radius: 25px;
        color: yellow;
        transition: all 0.8s linear;
        border: 1px double white;
    }
    a:link { color: rgb(255,255,0); } 
    a:visited { color: rgb(255,255,128); } 
    a:hover { color: rgb(255,0,0); }

    .MyInput {
        cursor: pointer;
        border-radius: 10px;
        text-align: center; margin: 2px;
    }
    section {
        vertical-align: text-top;
        width: 92%; min-width: 420px; max-width: 960px; padding: 10px; 
        background-color: rgb(32,32,32);
        border-radius: 25px;    
        position: absolute; 
        top: 50%; left: 50%; 
        transform: translate(-50%,-50%);
        color: white;
    }
    #FechaInicioFechaFin{
        position: fixed;
        right: 5px;
        bottom: 5px;
        color: white;
    }
    #Pantalla1 {
        display: inline-block;  
    }
    #Pantalla2 {
        display: none;
    }
    .Centrado{
        vertical-align: top;
        display: inline-block;
        text-align: center;
    }
    .Izquierda{
        vertical-align: top;
        display: inline-block;
        text-align: left;
    }
    .Derecha{
        vertical-align: top;
        display: inline-block;
        text-align: right;
    }
</style>
</head>
<body>
<center>
    <h1>App Cambios de Base</h1>
    <section id="Pantalla1">
        <div class="Izquierda" style="width: 72%;" >
            <input class="MyInput" type="button" id="BotonEjemplo" name="BotonEjemplo" onclick="Ir2()" value="Ejemplos" title="Ejemplos de Cambios de Base" />
        </div>
        <div class="Derecha" >
            <input class="MyInput" type="button" id="BotonF0" name="BotonF0" onclick="Ir2()" value="Ayuda" style="background-color: red; color: white;" title="¿Necesitas Ayuda?" />
        </div>
        <center>
            <h2>Introduzca el Número a Calcular</h2>
            <br>
            <label>Introduzca el valor para cambiarlo de base.</label>
            <input type="text" id="ElInput" value="10" style="width: 160px;" />
            
            <!--
                <label>Introduzca el valor de base.</label>
                <input type="text" id="LaBase" value="2" style="width: 50px;" />
            -->
            <label for="LaBase">Selecciona la base:</label>
                <select id="LaBase" name="LaBase">
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="8">8</option>
                  <option value="16">16</option>
                </select>
            <br><br>
            <input type="button" id="ElButton1" class="MyInput" value="Calcular de Decimal a Base" onclick="Calcular()" />
            <input type="button" id="ElButton2" class="MyInput" value="Calcular de Base a Decimal" onclick="CalcularInversa()" />
            <br><br>
            <label id="Resultado">Resultado.</label>
            <br><br>
        </center>
    </section>
    <section id="Pantalla2" class="Derecha" >
        <input type="button" onclick="Ir1()" style="background-color: red; color: white;" value="X" />
        <center>
            <h2>Ayuda Para Calculos de Cambios de Base</h2>
            <p>
                Introduzca los valores de número y de base para calcular el cambio de base con este pequeño ejemplo de programación.<br>
                <br>
                Haz números mayores a los que maneja este aplicativo con los proyectos de calculadoras de Pol Power Calculator:<br>
            </p>
            <a href="https://dos-a-la-tres.com/aplicaciones-online.php#Pol-Power-Calculator-Web" >Pol Power Calculator Web.</a><br>
            <br>
            <a href="https://dos-a-la-tres.com/aplicaciones.php#Pol-Power-Calculator" >Pol Power Calculator Para Windows</a><br>
            <br><br>    
        </center>
    </section>
    
    <footer id="FechaInicioFechaFin" ><a href="mailto:[email protected]">[email protected]</a> ~ 13/12/2024 - 13/12/2024</footer>
</center>   
<script>
// Funciones Base de Todo Esto
function Calcular(){
    var ElDato = parseFloat(document.getElementById("ElInput").value);
    var LaBase = parseInt(document.getElementById("LaBase").value);
    var Numero = parseInt(ElDato);
    if (ElDato >= 0 && LaBase >= 0){
        document.getElementById("Resultado").innerHTML = Numero.toString(LaBase);   
    }       
}
function CalcularInversa(){
    var ElDato = parseFloat(document.getElementById("ElInput").value);
    var LaBase = parseInt(document.getElementById("LaBase").value);
    var Numero = parseInt(ElDato);
    if (ElDato >= 0 && LaBase >= 0){
        document.getElementById("Resultado").innerHTML = parseInt(Numero, LaBase);  
    }       
}
function Ir1(){
    document.getElementById("Pantalla1").style = "display: inline-block;";
    document.getElementById("Pantalla2").style = "display: none;";
}
function Ir2(){
    document.getElementById("Pantalla1").style = "display: none;";
    document.getElementById("Pantalla2").style = "display: inline-block;";
}
</script>
</body>
</html>

Gracias por el aporte.

2
  • Creo que no es necesario que crees una publicación mostrando cómo aplicaste lo dicho en otras respuesta. Me alegro que te haya servido
    – Mateo
    Commented hace 17 horas
  • Gracias. Lo he puesto para denotar que lo que me has contestado es lo más útil y correcto que se podía hacer y que soluciona mi problema de esa forma. Commented hace 3 horas

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.