0
230
Vistas¿Cómo puedo hacer que esta función javascript permita ingresar más de 1 valor en un cuadro de entrada separado por un espacio?
Tengo este código html y javascript
<!doctype html> <html lang="en" data-id="0101"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> * { font-family: arial, helvetica, san-serif; box-sizing: border-box; font-size: 16px; } body { padding: 1rem; margin: 0; } .fb { display: flex; justify-content: space-between; margin: 0 0 1em 0; } div>button { width: 9%; border: 2px solid black; text-align: center; padding: 0.5rem; background: lightgray; } </style> </head> <body> <div class="fb"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>7</button> <button>8</button> <button>9</button> <button>10</button> </div> <p><input> <input></p> <p><button class="action-button">Colour by numbers</button></p> </body> </html>JavaScript:
function colourByNumbers() { inputs = document.getElementsByTagName('input')[0].value colour = document.getElementsByTagName('input')[1].value buttons = document.getElementsByTagName('button')[inputs - 1] buttons.style.background = document.getElementsByTagName('input')[1].value } document.getElementsByClassName('action-button')[0].addEventListener("click", colourByNumbers);lo que hace ingresas un número e ingresas un color. el cuadro con el número ingresado cambiará su fondo al color ingresado así:
Estoy atascado en cómo hacer que la función tome más de 1 entrada, por ejemplo:
así que ingreso 2 números separados por un espacio (4 y 7) y sus casillas se vuelven rojas
He incluido un jsfiddle en caso de que alguien quiera probar el código por sí mismo. ¡Cualquier ayuda apreciada! https://jsfiddle.net/waxhtekj/2/
2 Respuestas
Responde la pregunta0
recuerda que la entrada es solo una cadena. Simplemente use la función de división para obtener cada valor
function colourByNumbers() { input = document.getElementsByTagName('input')[0].value inputs = input.split(" ") colour = document.getElementsByTagName('input')[1].value for (let i = 0; i < inputs.length; i++){ buttons = document.getElementsByTagName('button')[inputs[i] - 1] buttons.style.background = document.getElementsByTagName('input')[1].value } } document.getElementsByClassName('action-button')[0].addEventListener("click", colourByNumbers); <!doctype html> <html lang="en" data-id="0101"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> * { font-family: arial, helvetica, san-serif; box-sizing: border-box; font-size: 16px; } body { padding: 1rem; margin: 0; } .fb { display: flex; justify-content: space-between; margin: 0 0 1em 0; } div>button { width: 9%; border: 2px solid black; text-align: center; padding: 0.5rem; background: lightgray; } </style> </head> <body> <div class="fb"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>7</button> <button>8</button> <button>9</button> <button>10</button> </div> <p><input> <input></p> <p><button class="action-button">Colour by numbers</button></p> </body> </html>0
Lo que desea hacer es cambiar su función para que, en lugar de simplemente tomar el valor de la entrada de buttons y usarlo, ejecute un String.prototype.split en él y use un bucle. Tu JavaScript se vería así:
function colourByNumbers() { inputs = document.getElementsByTagName('input')[0].value.split(" ") colours = document.getElementsByTagName('input')[1].value for (const input of inputs) { document.getElementsByTagName('button')[input - 1].style.background = document.getElementsByTagName('input')[1].value } } document.getElementsByClassName('action-button')[0].addEventListener("click", colourByNumbers); Su JavaScript y HTML también están ligeramente mal formados. Para su HTML, no debe usar un <input> simple. En su lugar, especifique los atributos requeridos para su etiqueta de entrada de la siguiente manera: <input type="text" /> . También tenga en cuenta el /> , que significa cerrar la etiqueta sin contenido.
Para su JavaScript, tiene algunos problemas. Lo primero es cómo estás seleccionando tus elementos. Dado que solo obtiene un elemento, use document.getElementByClassName , con Element en lugar de Elements para obtener solo un elemento. Eso también elimina la necesidad del [0] .
A continuación tienes las variables de función. No está declarando variables adecuadas, use una const delante de la definición. Para configurar el fondo, ya ha seleccionado el valor, por lo que no necesita volver a hacerlo.
Código JS refactorizado:
function colourByNumbers() { const inputs = document.getElementByTagName('input')[0].value.split(" ") const colour = document.getElementByTagName('input').value for (const input of inputs) { document.getElementsByTagName('button')[input - 1].style.background = colour; } } document.getElementByClassName('action-button').addEventListener("click", colourByNumbers);