Estoy configurando una página para un generador de personajes, y estoy dando a los usuarios la opción de aleatorizar rasgos o ingresar los suyos propios. Tengo las opciones de "elección versus aleatoria" configuradas como interruptores para cada categoría de rasgo, y luego, si quieren elegir la suya, tengo menús de selección desplegables para cada categoría con todos los rasgos enumerados.
Aquí está mi HTML para los interruptores:
<div class="switch"> <p>Class</p> <label> My Choice <input type="checkbox" id="class-choice"> <span class="lever red darken-4"></span> Random </label> </div>Aquí está mi HTML para el menú de selección correspondiente:
<div class="input-field col s6"> <select id="classMenu" name="class"> <option value="barbarian">Barbarian</option> <option value="bard">Bard</option> <option value="cleric">Cleric</option> <option value="druid">Druid</option> <option value="fighter">Fighter</option> <option value="monk">Monk</option> <option value="paladin">Paladin</option> <option value="ranger">Ranger</option> <option value="rogue">Rogue</option> <option value="sorcerer">Sorcerer</option> <option value="warlock">Warlock</option> <option value="wizard">Wizard</option> </select> <label for="class">Class</label> </div>Lo que quiero que suceda es que cada vez que hagan clic en el interruptor de palanca a "aleatorio", el menú desplegable correspondiente mostrará una opción aleatoria de la lista. Tengo todos los nombres de opciones guardados como una matriz en mi JavaScript:
var charClasses = ["barbarian", "bard", "cleric", "druid", "fighter", "monk", "paladin", "ranger", "rogue", "sorcerer", "warlock", "wizard"];Sé que necesito usar algún tipo de detector de eventos y una función de aleatorización matemática y luego algo para mostrar el valor de esa opción, pero supongo que estoy confundido acerca de cómo hacerlo. Y luego creo que tendré que usar $('#save-btn').on("click", ... para guardarlo también en localStorage. Acabo de empezar a aprender JS y no es muy intuitivo para mí. sin embargo, por lo que cualquier orientación sería apreciada.
Para obtener un elemento aleatorio de uso de matriz:
var item = charClasses[Math.floor(Math.random()*charClasses.length)];Para seleccionar el elemento utilice:
$('#classMenu').val("item ");Puedes usar un evento de botón como este:
$('#btnRandom').click(function() { var item = charClasses[Math.floor(Math.random()*charClasses.length)]; $('#classMenu').val(item); });El código selecciona un valor aleatorio de la matriz y lo coloca en un elemento variable. A continuación, seleccione el elemento en el campo de selección.