0

Verán, lo que pasa es que estoy haciendo una página que elige una opción aleatoria de una lista, tengo un botón que hace que lo que este en la caja de texto se agregue a la lista, pero quería que fuera más fácil para el usuario haciendo que al darle enter a la caja de texto se agregara, pero no lo logré y lo que hace es que se recarga la página entera, pensé que era el ".reset" pero lo probé sin esa parte y sigue sin funcionar, les dejo el código:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Listas Random</title>
</head>
<body>
    <h1>Elije una opcion Aleatoriamente</h1>
    <br />
    <form id="formContent">
        <input type="text" id="form" class="box" placeholder="Escribe una opción">
        <input type="button" value="+ Agregar a la Lista" id="newElement" class="button">
    </form>
    <p>Estos son los elementos de su lista:</p>
    <div id ="userList">
    </div>
    <br>
    <br>
    <input type="button" value="¡Elige una!" id="chooseOption" class="button">
    <div id="rellenar"></div>
    <script src="random_list.js"></script>
</body>
</html>

JavaScript:

let list = [] //Aquí van las opciones

//Agregar opciones a la Lista
let addToList = document.getElementById("newElement")
addToList.addEventListener("click", addOption)

let userList = document.getElementById("userList")

let option = document.getElementById("form")
option.addEventListener("keyup", enter)

function enter(evento)
{
    if(evento.keyCode == 13)
    {
        addOption()
    }
}

function addOption()
{
    list.push(option.value)
    userList.innerHTML += '<li>' + option.value + '</li><br />'
    document.getElementById("formContent").reset()
}

//Escoger solo una aleatoriamente
let chooseOption = document.getElementById("chooseOption")
chooseOption.addEventListener("click", randomElement)

let result = document.getElementById("rellenar")

//Escribirla
function randomElement()
{
    let finalElement = random(0, list.length - 1)
    rellenar.innerHTML += '<p>Opción Aleatoria: ' + list[finalElement] + '</p>'
}
//Elegir un entero random
function random(min, max)
{
    let resultado;
    resultado = Math.floor((Math.random() * (max - min + 1)) + min);
    return resultado;
}
2
  • Cuando das enter en un contexto de formulario, se realiza el submit del mismo, lo único que tienes que hacer es cancelar dicho evento. No lo he probado, pero debería ser suficiente poner en el tag del form: onsubmit="return false;" Si eso no lo soluciona, siempre puedes capturar el evento "form.addEventListener("submit", function(e) { y realizar el consiguiente e.preventDefault(); o probar a poner el atributo en el tag del form: onsubmit="event.preventDefault();"
    – track3r
    Commented el 30 nov. 2020 a las 22:19
  • También puedes eliminar el form si no lo vas a usar.
    – track3r
    Commented el 30 nov. 2020 a las 22:24

2 respuestas 2

0

yo le puse un return false al evento onsubmit del form, supongo que tambien puede funcionar con javascript:return=0 las opciones son muchas!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Elije una opcion Aleatoriamente</h1>
    <br />
    <form id="formContent" onsubmit="return false">
        <input type="text" id="form" class="box" placeholder="Escribe una opción">
        <button id="newElement" class="button">+ Agregar a la Lista</button>
    </form>
    <p>Estos son los elementos de su lista:</p>
    <div id ="userList">
    </div>
    <br>
    <br>
    <input type="button" value="¡Elige una!" id="chooseOption" class="button">
    <div id="rellenar"></div>
    <script src="random_list.js"></script>
    <script>    
        let list = [] //Aquí van las opciones

        //Agregar opciones a la Lista
        let addToList = document.getElementById("newElement")
        addToList.addEventListener("click", addOption)

        let userList = document.getElementById("userList")

        let option = document.getElementById("form")
        option.addEventListener("keyup", enter)

        function enter(evento)
        {
            if(evento.keyCode == 13)
            {
                addOption()
            }
        }

        function addOption()
        {
            list.push(option.value)
            userList.innerHTML += '<li>' + option.value + '</li><br />'
            document.getElementById("formContent").reset()
        }

        //Escoger solo una aleatoriamente
        let chooseOption = document.getElementById("chooseOption")
        chooseOption.addEventListener("click", randomElement)

        let result = document.getElementById("rellenar")

        //Escribirla
        function randomElement()
        {
            let finalElement = random(0, list.length - 1)
            rellenar.innerHTML += '<p>Opción Aleatoria: ' + list[finalElement] + '</p>'
        }
        //Elegir un entero random
        function random(min, max)
        {
            let resultado;
            resultado = Math.floor((Math.random() * (max - min + 1)) + min);
            return resultado;
        }
    </script>
</body>
</html>

0

Puedes usar la propiedad del evento del submit del form preventDefault(), esto cancelara la recarga de la pagina pagina y no afectara a las otras funciones que realices.

document.getElementById("formContent").addEventListener('submit', (event)=>{
    event.preventDefault();
});

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.