Tradicionalmente, los botones están diseñados para guardar solo UN único valor, por ejemplo:
<button type="button" value="Love" onclick="fetchValue(this)"> Primary </button> function fetchValue(_button){ alert(_button.value); } Por ejemplo, en el código HTML anterior, cuando un usuario hace clic en el botón Principal , ¡aparecerá una alerta con la palabra Amor !
Para fines de experiencia/interfaz de usuario (UI/UX), necesito diseñar un botón que pueda contener varios valores y NO solo un valor. Esto se debe a que planeo acoplar un evento de clic al botón para enviar/publicar todos los valores almacenados.
El código tan deseado sería algo como el siguiente código:
<button type="button" value="Love", value2="Love", value3="Love" onclick="fetchValue(this)"> Primary </button>¿Hay alguien que pueda saber cómo resolver esto o incluso una mejor solución a mi problema?
Gracias por adelantado
Puede almacenarlos como valores de conjunto de datos
<button value="love" data-value1="hate" data-value2="happy" onclick="fetchvalue(this)" >click me</button>Y acceder a ellos en js como
function fetchvalue(_button){ alert(_button.value) alert(_button.dataset.value1) alert(_button.dataset.value2) }O acceda a ellos en un formato similar a json
<button value={value1:"hate",value2:"happy" } onclick="fetchvalue(this)" >click me</button>Y acceder a ellos en js como
function fetchvalue(_button){ alert(_button.value.value1) alert(_button.value.value2) }Puede utilizar atributos de data para valores adicionales.
function fetchValue(_button){ alert(`${_button.value} ${_button.dataset.value2}`); } <button type="button" value="Love" data-value2="you" onclick="fetchValue(this)"> Primary </button>Puede usar una tabla de búsqueda para no saturar el HTML
Aquí delego también a los oyentes de eventos.
const values = { "Love": ["Adore", "Be fond of"], "Hate": ["Dislike", "Despise"] }; document.getElementById("buttons").addEventListener("click", function(e) { const button = e.target.closest("button"); if (button.matches(".fetchbutton")) console.log(values[button.value]); }) <div id="buttons"> <button type="button" value="Love" class="fetchbutton"> Love </button> <button type="button" value="Hate" class="fetchbutton"> Hate </button> </div>