[ Foro de Javascript ]

ayuda no lo comprendo bien

02-May-2020 04:02
Invitado (Mike)
1 Respuestas

<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <title>Sustituir & Eliminar Elementos Del DOM</title>
 </head>

 <style>
   .titulo {
     color: blue;
     font-size: 1.5em;
     text-align: center;
   }
   .labels {
     color: blue;
     font-size: 1.6em;
   }
   .forms {
     color: green;
     font-size: 1.5em;
   }
   .inputs {
     color: red;
     font-size: 1.5em;
   }
   .fieldset {
     width: 24%;
     height: 29%;
   }
 </style>

 <body>
   <p id="titulo" class="titulo">SUSTITUYE & ELIMINA ELEMENTOS DEL DOM</p>
   <p class="labels"><img src="https://premiumcreditbureau.com/wp-content/uploads/2017/02/service-agreement-2.png" width="20" height="20">
   Formulario De Registro</p>
   <form action="" name="form">  
     <label for="nombre" class="forms">Nombre Completo. </label>
     <input type="text" name="nombre" class="inputs" size="45"><br>

     <label for="apellido" class="forms">Apellido Del Usuario. </label>
     <input type="text" name="apellido" class="inputs" size="41.5"><br>

     <label for="telefono" class="forms">Número De Telefono. </label>
     <input type="number" name="telefono" class="inputs" size="45"><br>

     <label for="curp" class="forms">Curp Del Usuario. </label>
     <input type="text" name="curp" class="inputs" size="45"><br>
   </form>

   <form action="" name="radio">
     <fieldset class="fieldset">
       <p id="parrafo">Nivel De Estudio</p>
       <label for="primaria"><input type="radio" value="primaria">Primaria</label><br>
       <label for="secundaria"><input type="radio" value="secundaria">Secundaria</label><br>
       <label for="preparatoria"><input type="radio" value="preparatoria">Preparatoria</label><br>
       <label for="universidad"><input type="radio" value="universidad">Universidad</label><br>
     </fieldset>
     <br>
     <label for="genero" id="labelGenero">Genero Del Usuario</label><br>
     <select name="genero" id="genero">
       <option value="Indistinto">Indistinto:</option>
       <option value="Elegir" selected>Elegir:</option>
       <option value="Femenino">Femenino</option>
       <option value="Masculino">Masculino</option>
     </select>
   </form>

   <form action="" name="botones">
     <table>
       <tr>
         <tr><input type="button" id="A1" value="A1 Eliminar Apellido"></td>
         <tr><input type="button" id="A2" value="A2 Sustituir Parrafo"></td>
         <tr><input type="button" id="A3" value="A3 Eliminar Opción"></td>
       </tr>
       <tr>
         <td><input type="button" id="A4" value="A4 Información Alumno"></td>
         <td><input type="button" id="A5" value="A5 Sustituir Imagen"></td>
         <td><input type="button" id="A6" value="A6 Eliminar Botón A6"></td>
       </tr>
       
     </table>
   </form>

   <script>


   // RESUELVE LAS SIGUIENTES ACTIVIDADES QUE SE INDICAN A CONTINUACIÓN, EMPLEA FUNCIONES PARA SU ACTIVACIÓN ASOCIADAS
   // A BOTONES DE ACCIÓN, PUEDES UTILIZAR EL CÓDIGO QUE YA SE ENCUENTRA AGREGADO PARA SU IMPLEMENTACIÓN, Y RECUERDA
   // TODO LO DEBES REALIZAR MEDIANTE JAVASCRIPT  Y NO DEBES TOCAR EL CODIGO HTML, NI ESTILOS DIRECTAMENTE.

   /*
     // SI LO REQUIERES PUEDES UTILIZAR LOS SIGUIENTES METODOS
     // NOTA: ESTO ES OPCIONAL YA QUE EL EJERCICIO SE PUEDE RESOLVER SIN UTILIZARLOS A EXEPCION DE ".PARENTNODE" QUE
     // YA SE HA UTILIZADO EN OTRAS OCACIONES.
                             Navegar Entre Elementos
     --> -elemento.parentNode
     Permite acceder al padre de un nodo. Es útil para eliminar nodos.

     --> .elemento.firstElementChild
     Para acceder al primer hijo.

     --> .elemento.lastElementChild
     Para acceder al último hijo.

     --> .elemento.nextElementSibling
     Para acceder al siguiente hermano con misma jerarquia. Por ejemplo útil en una lista.

     --> .elemento.previousElementSibling
     Para acceder al hermano anterior con misma jerarquia.

     --> .elemento.childNodes.
     Devuelve un array con todos los hijos.

   */


   // Ejecuta La Funciòn inicio() Cuando Se Ha Cargado Completamente La Ventana Del Navegador
   window.addEventListener("load", inicio);

   function inicio(){
     // Espera Un Click En El Botón Con El ID Especificado, Para Ejecutar La función limpiar() O Aceptar Dependiendo El Click
     document.getElementById("A1").addEventListener("click",eliminarApellido);
     // Continua Asociando Las Funciones Con Su Respectivo Botón Para Su Accionar, Como En La Linea De Arriba...
     
   }


   // A1 ELIMINA EL LABEL & INPUT CORRESPONDIENTES AL APELLIDO DEL USUARIO.
   function eliminarApellido() {
     
   }






   // A2 SUSTITUIR EL ELEMENTO <P> DEL FORMULARIO DE NOMBRE RADIO, POR LA ETIQUETA <LEGEND> CON EL MISMO TEXTO
   
   




   // A3 ELIMINAR LA OPCIÓN 'INDISTINTO' DEL SELECT DEL FORMULARIO RADIO
   




   // A4  AGREGA TU INFORMACIÓN PERSONAL AL FORMULARIO, AL PRESIONAR EL BOTON DE ESTA ACTIVIDAD, RECUERDA LA ACTIVACIÓN
   // DE LOS DEMAS BOTONOS NO DEBE INTERFERIR CON EL RESULTADO, ASÍ QUE COMPRUEBA SI EL ELEMENTO EXISTE, PARA LLENAR EL FORMULARIO
   // CORRECTAMENTE ANTES Y DESPUES DE ACCIONAR EL BOTON A1 QUE ELIMINARA EL INPUT APELLIDO Y ESTO NO DEBE AFECTAR QUE EN AMBOS
   // CASOS LA INFORMACIÒN SE LLENE ADECUADAMENTE
   
   // PARA IDENTIFICAR SI UN ELEMENTO EXISTE EN EL DOC HTML ANALIZA ESTE ARTICULO
   // https://desarrollo-geek.net/tutoriales/javascript/comprobar-si-un-elemento-existe-javascript/
   // Importante: Para Cambiar La Opción De Un Select Debes Utilizar: opcionesArray[].select = 'true'
   // Importante: Para Marcar La Opción De Un Radio Button Se Utiliza: radiosArrat[].checked ='true'  
     




   // A5 Sustituye La Imagen En El Body Por Un Nuevo Elemento Imagen, Que Deberas Crear Con Las Sigientes Especificaciones.
   // IMG  Propiedades -->
   // src="https://i.ya-webdesign.com/images/transparent-check-wrong.png", width="20, height="20"

   





   // A6 Eliminar El Ultimo Boton Despues De Ser Pulsado Y Mustra Un Alerta Indicando Que El Programa Funciona Correctamente
   


   

   </script>

 </body>
</html>


Grcias por su ayuda de antemano y espero no molestarlos mucho


02-May-2020 13:55
Nacho Cabanes (+84)

¿Y la duda cual es?  






(No se puede continuar esta discusión porque tiene más de dos meses de antigüedad. Si tienes dudas parecidas, abre un nuevo hilo.)