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;
}