[Resuelto] -no obtengo el resultado usando Div

SA

hola buen dia el objetivo del codigo es k al ingresar el nombre en la caja de texto: diga "Hola Steven" o cualquier texto; mi estructutra de carpeta es asi: C:\Users\St3v3n\Desktop\pelis\Kurso web\variables en la carpeta variables tengo el index2.html y el script5.js

aki la imagenes:

13respuestas
Avatar

me parece q nececitas invocar la funcion solo esta declarada

SA

que tal alfred.. como lo ago?? no cuenta lo que esta en el script5... como lo haria??

RN

toUpperCase(), respeta las mayúsculas del camelCase

SA

hola neal gracias,,, ese es el error??.. o cual es el error.. me puedes ayudar bro recien empiezo esta locura

EG

Hola. Esta podría ser una solución.

index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Manejo html</title>
</head>
<body>
    <label>Ingresa tu nombre
        <input type="text" id="nombre">
    </label>
    <input type="submit" value="Saludar" id="boton">
    
    <div id="resultado"></div>

    <script src="js/scripts.js"></script>
</body>
</html>

scripts.js

let boton = document.getElementById('boton')
let resultado = document.getElementById('resultado')
let nombre =  document.getElementById('nombre')

boton.addEventListener('click', () => {
    resultado.innerHTML = `Hola ${nombre.value.toUpperCase().trim()}`
})

Estructura de los archivos.

  • ejemplo
    • js
      • scripts.js
    • index.html

Saludos :D.

SA

gracias eduiw.. buen gesto de su parte te dire k copie tu codigo hermano... y no me da... no digo k sta malo es mas lo veo con mucho mas detalle... lo k me esta dando es coraje este problema con esto sera el navegador o yo mismo...

EG

Hola, lo que podrías hacer es refrescar el navegador y vaciar cache, o podrías correr el archivo desde una ventana de incógnito en el navegador. Porque yo lo ejecuto en mi ordenador y funciona.

Además insisto que debes tener en cuenta la estructura de archivos que yo utilizo para el ejemplo, procura utilizar la misma.

SA

ok.. bro eso hare.. muchas gracias por el tiempo y paciencia

EG

Dale!. Nos cuentas como te fue.

SA

Edwin bro.. use Chrome y me funciono estoy alegre.. jejeje.. eres crack bro me puedes ayudar co partes del codigo su codigo: **es buena practica poner la etiqueta script en el body***

<script src="js/scripts.js"></script>

*que hace let***

** me cuesta entender esta part del codigo**

boton.addEventListener('click', () => { resultado.innerHTML = Hola ${nombre.value.toUpperCase().trim()} })

EG

Que bien!. Si es buena práctica, pero debes tener algo en cuenta; que debes colocarla dependiendo el orden de ejecución, recuerda que el navegador lee de arriba hacia abajo, como en nuestro ejemplo el script que estamos llamando requiere manipular el botón y el input debemos colocarlo justo después, porque si lo colocamos antes nos va a dar error porque el botón y el resultado no existen. Pero como dije es por convención colocarlo antes de cerrar el body. let es la manera de definir una variables en JavaScript.

// Le estamos diciendo al botón que escuche un evento
// el evento es click, esto quiere decir que al darle click al botón hará una acción
boton.addEventListener('click', () => {
    // Aquí estamos imprimendo un mensaje en el div que tiene id resultado
    // toUpperCase() es un método para volver todo en mayúsculas
    // trim() es para eliminar espacios al inicio y final
    resultado.innerHTML = `Hola ${nombre.value.toUpperCase().trim()}`
})

Si deseas mas información de este tema ingresa al curso de JavaScript desde Cero (2018) de EDteam que es gratis y podrás saber mas al respecto.

SA

definitivo eres un crack... por lo que veo si vere el curso: "JavaScript desde Cero (2018) de EDteam ".. pero tu ayuda bro fue inmensa... para terminar bro .. el codigo k puse lo sigo de un Ing.. en el tutorial a el le funciona aclaro el usa netbeans..

que diferencia existe?? y porque a el le funciona.. es mi ultima pregunta y lo doy finalizado y terminado con exito este post

gracias nuevamente bro

EG

Si, el curso es excelente además que esta actualizado. El tutorial que estabas siguiendo tal vez ya esta algo desactualizado. Porqué a el le funciona y a ti no (no sabría que responder porque desconozco la fuente de la cual te basas).

Si el usa un ide y le funciona, pero a ti no por usar un editor de código. Eso no significa que debas usar un ide, cada ide o editor de código tiene sus ventajas y desventajas, personalmente utilizo Visual Studio Code. La diferencia entre un ide y un editor de código es que el editor es más ligero y puede soportar muchos lenguajes, además puede "extenderse" a traves de plugins, por otro lado un ide (entorno de desarrollo integrado) es un programa más complejo y por lo general funciona para un grupo de lenguajes específicos.

Necesitas iniciar sesión para responder.
¿En qué estamos trabajando?
Drupal Avanzado - Creación de temas

Drupal Avanzado - Creación de temas

Personaliza tus proyectos Drupal creando tus propios templates con Twig , CSS y Javascript