0

Lo que pasa es que intento realizar una función que pueda seleccionar un elemento de una selectlist en html pero los datos de la select list son introducidos por el usuario y no sé como realizarlo o arreglarlo (la función es la que dice aleatorio). Ahí está el html por si ahí está el error en esa parte del código. No sabría cómo arreglarlo.

           function agregar(){
               if (document.frm.txtNombre.value.length==0){
                   alert("No se permiten textos vacios")    
               }else{
                   var nuevoitem = document.frm.txtNombre.value;
                   var list = document.getElementById("selNombre");
                   var option= document.createElement("option");
                   list.options.add(option,0);
                   list.options[0].value=nuevoitem;
                   list.options[0].innerText=nuevoitem;
                   document.frm.txtNombre.value= ""; 
               }
               function aleatorio(){
                   var select = document.getElementById('selNombre');
                   var items = select.getElementsByTagName('option');
                   var index = Math.floor(Math.random() * items.length);
                   items[index].setAttribute('selected',true);
               }
               
           }

Este es el código en Html

<body>
        <form name="frm" method="post">
            <table>
                <tr>
                    <td>Nombres:</td>
                    <td colspan="2">
                        <select name="selNombre" id="selNombre">
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="text" name="txtNombre"></td>

                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="Agregar Nombre" onclick="agregar()"></td>
                </tr>
                <tr><td></td>
                    <td><input type="button" value="Aleatorio" onclick="aleatorio()"></td>
                </tr>
            </table>
        </form>
        
        <div>
            <a href="index.html">Volver</a>
        </div>
    </body>

1 respuesta 1

0

Estas cerrando mal las funciones de javascript.

Te ha quedado la funcion aleatorio dentro de la función agregar.

El código correcto seria este:

function agregar() {
   if (document.frm.txtNombre.value.length == 0) {
     alert("No se permiten textos vacios")
   } else {
     var nuevoitem = document.frm.txtNombre.value;
     var list = document.getElementById("selNombre");
     var option = document.createElement("option");
     list.options.add(option, 0);
     list.options[0].value = nuevoitem;
     list.options[0].innerText = nuevoitem;
     document.frm.txtNombre.value = "";
   }
 }

 function aleatorio() {
   var select = document.getElementById('selNombre');
   var items = select.getElementsByTagName('option');
   var index = Math.floor(Math.random() * items.length);
   items[index].setAttribute('selected', true);
 }

Aquí tienes una muestra de tu codigo funcionando: enlace

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.