| Both sides previous revision
Previous revision
Next revision
|
Previous revision
|
es:web_development:lists:javascript [2022/03/15 10:09]
mag [Declaraciones Condicionales] |
es:web_development:lists:javascript [2023/08/16 09:33] (current)
|
| * Si el usuario marca una casilla de verificación, pondremos gris el texto asociado. Si lo desmarcan, haremos que el texto vuelva a ser negro. | * Si el usuario marca una casilla de verificación, pondremos gris el texto asociado. Si lo desmarcan, haremos que el texto vuelva a ser negro. |
| * Agregue un atributo a cada uno de los elementos de la lista para llamar a una función de Javascript. | * Agregue un atributo a cada uno de los elementos de la lista para llamar a una función de Javascript. |
| <code> <li><input type="checkbox" name="harina" onchange="toggleCheckbox('harina')">100g harina</li> | <code> <li><input type="checkbox" name="harina" onchange="cambiarColor('harina')">100g harina</li> |
| <li><input type="checkbox" name="huevos" onchange="toggleCheckbox('huevos')">2 huevos</li> | <li><input type="checkbox" name="huevos" onchange="cambiarColor('huevos')">2 huevos</li> |
| <li><input type="checkbox" name="leche" onchange="toggleCheckbox('leche')">300ml leche</li></code> | <li><input type="checkbox" name="leche" onchange="cambiarColor('leche')">300ml leche</li></code> |
| * <html>onchange=""</html> se activará cada vez que haya un cambio en el elemento; en este caso, cuando la casilla de verificación esté marcada o desmarcada. Cuando se active, ejecutará el código Javascript entre <html>""</html>. | * <html>onchange=""</html> se activará cada vez que haya un cambio en el elemento; en este caso, cuando la casilla de verificación esté marcada o desmarcada. Cuando se active, ejecutará el código Javascript entre <html>""</html>. |
| * Llamaremos a nuestra función de Javascript 'toggleCheckbox' y le pasaremos a la función el nombre del elemento de la casilla de verificación para que la función sepa qué línea actualizar. | * Llamaremos a nuestra función de Javascript 'toggleCheckbox' y le pasaremos a la función el nombre del elemento de la casilla de verificación para que la función sepa qué línea actualizar. |
| * Ahora, guarde 'lists.html' y abra 'lists.js'. | * Ahora, guarde 'lists.html' y abra 'lists.js'. |
| * Agregue nuestra función debajo del código existente. | * Agregue nuestra función debajo del código existente. |
| <code>function toggleCheckbox(item) { | <code>function cambiarColor(item) { |
| }</code> | }</code> |
| * Primero, definimos el código como una 'función' usando <html>function</html> lo que significa que solo se ejecutará cuando se le llame específicamente. En este caso, lo llamaremos haciendo clic en la casilla de verificación, pero también podría llamarse desde otro código. | * Primero, definimos el código como una 'función' usando <html>function</html> lo que significa que solo se ejecutará cuando se le llame específicamente. En este caso, lo llamaremos haciendo clic en la casilla de verificación, pero también podría llamarse desde otro código. |
| * El texto no forma parte de nuestra casilla de verificación, por lo que debemos encontrar el elemento al que pertenece, que en este caso es el elemento principal (nuestro elemento <html><input></html> está directamente dentro de nuestro elemento <html><li></html>), por lo que usamos <html>.parentElement</html> | * El texto no forma parte de nuestra casilla de verificación, por lo que debemos encontrar el elemento al que pertenece, que en este caso es el elemento principal (nuestro elemento <html><input></html> está directamente dentro de nuestro elemento <html><li></html>), por lo que usamos <html>.parentElement</html> |
| * El código completo es entonces el siguiente. | * El código completo es entonces el siguiente. |
| <code>function toggleCheckbox (item) { | <code>function cambiarColor (item) { |
| cb = document.getElementsByName(item)[0]; | cb = document.getElementsByName(item)[0]; |
| if (cb.checked) { | if (cb.checked) { |
| |
| ==== Final Code ==== | ==== Final Code ==== |
| * [[https://jsfiddle.net/maganthro/t3bq247f/13/|jsfiddle]] | * [[https://jsfiddle.net/maganthro/t3bq247f/15/|jsfiddle]] |
| * [[https://techschool.murraygunn.id.au/webdev/classes/lists/4/es.php|lists.html]] | * [[https://techschool.murraygunn.id.au/webdev/classes/lists/4/es.php|lists.html]] |
| * [[https://techschool.murraygunn.id.au/webdev/classes/lists/4/listsjs.php|lists.js]] | * [[https://techschool.murraygunn.id.au/webdev/classes/lists/4/listsjs.php|lists.js]] |
