0

tengo un problema y es que no me funciona codigo hecho con jquery en el localhost, cabe decir que abriendolo aparte sin el localhost si me funciona. El proyecto esta en la carpeta hctdocs y estan separados los scripts de los htmls. En la consola no me vota ningun error, solo que al darle al click al boton no me funciona el codigo(al darle al boton no me hace nada) pero abriendolo sin el localhost si me funciona el codigo.

<html>
<script src ="scripts/jquery-3.5.1.min.js"></script>//Tengo la libreria descargada
<script  src = "scripts/carrito.js"></script>
<div class="5" id="producto">
  <p class="titulo">Ventilador Extreme 3 en 1 bl - SAMURAI</p>
  <p class="precio"><strong>$ 200.000</strong></p><p class="iva">IVA incluido</p><br><br>
<ul id="t10">
   <li><i class="fas fa-comment-dollar"></i>     Vendido por:<b>samurai.</b></li>
    <li><i class="fas fa-truck"></i>    Enviado por:<b>servientrega.</b></li>
    <li><i class="fas fa-clock"></i>    Tiempo de entrega:<b>2 a 7 días hábiles.</b></li>
    <li><i class="fas fa-certificate"></i>    Garantia:<b>12 meses.</b></li>
</ul>
<input type="number" id="cantidadv" value="1" min="1" max="4" step="1">
<button class="añadir" onclick="añadir()">AÑADIR AL CARRITO</button>
</div>
<html>

Codigo javascript usando jquery:

var cant_codigos=["cantidadp","cantidadh","cantidadt","cantidadn","cantidade","cantidadv","cantidadl"];
var validador = ["plancha","horno","tv","nevera","estufa","ventilador","lavadora"];
function añadir(){
  x =parseInt($("#producto").attr("class")); 
  y =($("input").attr("id"));
  for(var i=0 ;i<7; i++){
    if(cant_codigos[i]==y)
    {
     var cant=parseInt($("#"+cant_codigos[i]).val());
      localStorage.setItem(cant_codigos[i],cant);
      localStorage.setItem(validador[i],x);
      console.log(localStorage.getItem(cant_codigos[i]));
     // console.log(localStorage.getItem(validador[i]));
     contador1();
      alert("¡Producto añadido con exito!");

    }
  }
}

1 respuesta 1

0

Debes cambiar de posición la carga de tus scripts al final del body de la pagina, para que se carguen tus scripts despues de que tus elementos carguen.

Si no te arroja error las rutas deben estar correctas, por lo que sugiero que el problema es el orden de carga de los scripts (son cargados antes de que tus elementos se creen).

Te recomendaria tener un body en la pagina, de hecho, el body siempre debería ir en cualquier pagina web, puesto que el body es el contenedor oficial por default (por decirlo de alguna forma), que contiene valga la redundancia, a los elementos contenido de tu pagina:

<body>
    //Tu html
    ...
    ...
    <script src ="scripts/jquery-3.5.1.min.js"></script>//Tengo la libreria descargada
    <script  src = "scripts/carrito.js"></script>
</body>

La etiqueta body siempre va despues del final de la etiqueta </head> y dentro de la etiqueta html, esta seria la estructura basica de una pagina web que usa HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documento</title>
    <script src ="script.js"></script>
</head>
<body>

</body>
</html>

Normalmente dentro de la etiqueta head es donde muchos scripts se cargan, pero si pones tus scripts en la etiqueta head tendrias el mismo problema que tienes ahora.

lo ideal seria que los frameworks vallan al final de la etiqueta <head> mientras que tus scripts vayan ya sea al final del body como habíamos comentado antes.

O tambien la otra opcion seria que los archivos que NO hagan parte de una libreria (que tu los crees), pueden ir tambien dentro de la etiqueta head de la pagina, pero para poder que tengan el comportamiento que esperas deberas hacer que el script se ejecute cuando la pagina haya cargado, en el caso de jQuery, puedes hacer que se cargue primero jQuery y luego que se cargue tus scripts:

<head>
   ...
   <script src = "jQuery.js">
   <script src = "script1.js">
   <script src = "script2.js">
   <script src = "etc.js">
</head>

Y que en cada uno de los scripts que no hagan parte de una libreria puedes meter dentro de este código todo tu código:

$(document).ready(()=>{
   //Aqui ira todo tu codigo
});

De esta manera le dices al script que hasta que no se cargue la pagina y sus componentes no inicie, por lo que seleccionamos al documento, le añadimos el evento ready de jQuery, le pasamos una funcion flecha para que se ejecute cuando el evento se dispare y a su vez este ejecutara todo tu codigo.

Esto no es una tecnica sucia, de hecho muchas personas la utilizan en su version sin usar frameworks:

window.onload = ()=>{
   //Todo tu codigo aqui dentro
}

Por lo que ya conoces varias formas de solucionar tu error.

1
  • Riven ya lo coloque como tu dices y no me coge las lineas de codigo hechas con Jquery, cabe aclarar que estoy utilizando xampp nose si por eso no me carga el jquery,la pagina carga solo las lineas de javascript pero las de jquery no.
    – Anderson
    Commented el 9 jun. 2020 a las 16:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.