[Resuelto] Problema con Script de javascript y HTML

[@XSStringManolo]

Hay muchas formas distintas de añadir un archivo externo. Te recomiendo el tag script src porque a parte de añadir tus archivos .js en local, también puedes añadir archivos externos como por librerías. https://www.w3schools.com/tags/att_script_src.asp
A parte de los mencionados aquí deberías añadir checksums para asegurar que el contenido del script no ha sido modificado en el servidor que aloja la librería o el archivo externo javascript por ejemplo en un ataque MITM, un proxy, etc.

En este enlace tienes explicados los recursos disponibles para asegurarte de que tus propios archivos alojados en un servidor permanecen íntegros
https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity

[Victor26]

Buenas noches, entiendo lo que dices string manolo y gracias por aclararmelo.  Yo se como añadir un archivo JS en html y ya esta, el problema es que cuando pongo ese codigo script que me dieron funcionando ustedes en el archivo aparte no me quiere funcionar, pero apenas lo pongo debajo del codigo html hay si, entonces lo que queria saber era, que estaba mal para que no me funcionara aparte. Muchas gracias de antemano por la ayuda.

[@XSStringManolo]

Buenas noches, entiendo lo que dices string manolo y gracias por aclararmelo.  Yo se como añadir un archivo JS en html y ya esta, el problema es que cuando pongo ese codigo script que me dieron funcionando ustedes en el archivo aparte no me quiere funcionar, pero apenas lo pongo debajo del codigo html hay si, entonces lo que queria saber era, que estaba mal para que no me funcionara aparte. Muchas gracias de antemano por la ayuda.

Buenos días, vuelve a leer las respuestas de los otros usuarios porque te han respondido exactamente a esta pregunta.
Si no entiendes perfectamente algo de sus respuestas, por ejemplo que es el DOM, busca en Google lo que es. Busca todos los términos que no entiendas y después analizas todo el texto, y si no lo entiendes preguntas tus dudas.

En resumen estás declarando una función que utiliza un elemento HTML que no existe. Porque aún no se cargó y ya estás intentando utilizarla. Puedes subsanarlo de varias formas.

A mi lo de cargar el CSS y el javascript en otros archivos me parece una tontería a menos que el mismo CSS y/o JS se esté aplicando a varios documentos distintos. Que el JS sea un propio programa web en sí totalmente independiente de la página. O que el script se corra de forma ajena al cliente en el lado del servidor por lo que no lo ves y puedes trasladar el resultado de la operación directamente al documento sin mostrar el proceso.

[#!drvy]

pero apenas lo pongo debajo del código html hay si, entonces lo que quería saber era, que estaba mal para que no me funcionara aparte.

Muestra el código completo de como lo incluyes. A mi me parece que te esta pasando lo que dice @Minusfour, lo estas incluyendo en la cabecera (head) en vez de antes de terminar el body (</body>).

Saludos

[Victor26]

Haber si me hago entender, en mi pagina, tengo un archivo llamado index.html y dos carpetas mas (JS, CSS), dentro de cada carpeta hay unos archivos llamados (js.js y estilos.css), dentro del archivo (JS.JS) tengo todos los scripts que he estado aprendiendo a hacer en mi estudio, y en index.html, tengo todo lo referente a estructuras de la pagina.

Ahora, en el archivo JS.JS tengo el script que he estado mostrando que no me funciona, ustedes alfin me lo pudieron resolver, pero no me funciona si lo pongo en mi archivo JS.JS, mientras que si me meto a index.html y lo pongo justo debajo de la estructura del (form) hay si me funciona.

Mi pregunta es, porque razon no me funciona poniendolo en el archivo de los scripts (JS.JS) y porque si me funciona si lo pongo debajo del form en html.

Si pongo todo mi html y js, no alcanza porque tengo varios scripts (JS.JS) y varias estructuras (index.html).

Disculpenmen si no he estado entendiendo completamente lo que me dicen, apenas estoy aprendiendo del lenguaje y es bastante lo que falta.

Saludos. 

[#!drvy]

Repito:

Muestra el código completo de como lo incluyes.

A mi me parece que te esta pasando lo que dice @Minusfour, lo estas incluyendo en la cabecera (head) en vez de antes de terminar el body (</body>).

Y no, no es buen consejo meter javascript en el html, siempre ponlo en su propio archivo.


Saludos

[Victor26]

Este es el codigo en el HEAD de HTML

Código [Seleccionar] Expandir

<head>
<meta charset="utf-8">
<title>CENAL</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!-- Para llamar a la hoja de estilos css -->
    <link rel="stylesheet" type="text/css" href="css/estilo.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/js.js"></script>
</head>

JS

Código [Seleccionar] Expandir

/* INVERSOR EN FORMULARIO */
  document.getElementById('btnInvert').addEventListener('click', function(e){
        invertir();
    });

    function invertir() {
        var num1 = document.getElementById('numero').value;
        var resultado = 1/num1;
        document.getElementById('inversor').value = resultado;
    }
/* FIN */

HTML

Código [Seleccionar] Expandir

<div class="container">
  <div class="row">
    <div class="col-12 col-6">
    <form method="post" name="Formulario">
    <label for="numero">Numero:</label><br>
    <input type="text" name="numero" maxlength="10" placeholder="Digite el numero" id="numero">

    <button id="btnInvert" type="button">Inversor</button>
    <input type="text" name="inversor" maxlength="10" placeholder="Resultado" id="inversor"><br>
</form>


    </div>
  </div>
</div>

[#!drvy]

Lo dicho, estas poniendo los scripts en el head, tienes que ponerlos al final del body antes de cerrarlo.

Código (html5) [Seleccionar] Expandir

<!DOCTYPE html>
<html lang='es'>
<head>
   <meta charset="utf-8">
   <title>CENAL</title>
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!-- Para llamar a la hoja de estilos css -->
   <link rel="stylesheet" type="text/css" href="css/estilo.css">
</head>
<body>
   <div class="container">
       <div class="row">
           <div class="col-12 col-6">
               <form method="post" name="Formulario">
                   <label for="numero">Numero:</label><br>
                   <input type="text" name="numero" maxlength="10" placeholder="Digite el numero" id="numero">
                   <button id="btnInvert" type="button">Inversor</button>
                   <input type="text" name="inversor" maxlength="10" placeholder="Resultado" id="inversor"><br>
               </form>
           </div>
       </div>
   </div>

   <script src="js/jquery-3.3.1.min.js"></script>
   <script src="js/js.js"></script>
</body>
</html>


Es buena practica poner siempre los scripts antes de cerrar el body. En la cabecera añaden tiempo de carga pre-renderización.  Además podrias poner un evento que escuche cuando se ha cargado el DOM.

Saludos

[MinusFour]

Tienes un archivo js, de nombre js, en una carpeta js.



Usa nombres más apropiados para tus archivos, para evitar confusiones.

[Victor26]

Listo, me ha funcionado excelente, muchas gracias ahora si me ha dado resultado, era como me decian que el JS lo tenia arriba del head, ademas ya le he cambiado el nombre gracias por la aclaracion. Saludos.