Imprimir Página - jquery desde un archivo js

Título: jquery desde un archivo js
Publicado por: FJDA en 29 Abril 2017, 20:10 pm

hola

estoy intentado usar jquery desde una archivo js, pero no devuelve valor.

Quiero obtener el color rgb del bacground de un <label>

var colorRGB;

(function($){colorRGB=$('label').css('background-color')})(jQuery);

pero la variable colorRGB es Undefined. El <label> tiene color y desde html la funcion $('label').css('background-color') funciona y devuelve el color. pero no consigo que funcione desde un archivo js.

No se usar jquery dentro de un archivo js :(

Título: Re: jquery desde un archivo js
Publicado por: engel lex en 29 Abril 2017, 20:15 pm

primero que nada en tu html el jquery debe estar declarado primero que tu script... si no lo ha interpreado el navigador de antemano, no lo puede usar... (como una canción... si nunca la has escuchado antes, no la puedes cantar...)

no se para que añadiste JQeury entre parentesis al final...

por otro lado, fuera del ámbito de esa función si colorRGB no ha sido declarada (digo, puedes descubrir como hacer oro a partir de agua y un carbón, pero si está en un cuaderno en tu gaveta, nadie lo sabrá)

Título: Re: jquery desde un archivo js
Publicado por: FJDA en 29 Abril 2017, 20:31 pm

Cita de: engel lex en 29 Abril 2017, 20:15 pm

como he dicho desde el HTML funciona (obvio he declarado he cargado script jquery)

Código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

no se puede desde una archivo js declarar:

Código:

$('label').css('background-color')

porque retorna error ($ no es un función)

lo pongo entre paréntesis porque así es como lo encontré aquí;

http://stackoverflow.com/questions/2937227/what-does-function-jquery-mean (http://stackoverflow.com/questions/2937227/what-does-function-jquery-mean)

y si no lo pongo da error. Con

Código:

(function($) {

})(jQuery);

parece que trabaja pero parece como si no pudiera obtener el background-color del objeto, o el objeto mismo o no sepa como sacar el valor de la función.

Título: Re: jquery desde un archivo js
Publicado por: 3n31ch en 29 Abril 2017, 20:36 pm

Como dice angel, verifica que tu jquery este antes y que se cargue antes de empezar a escribir tu código, (si inspeccionas elemento, podras ver en la consola de tu navegador los errores).

Ademas, te recomiendo hacer en onload del documento de esta forma:

Código

$(function(){
    // aca tu codigo
});

Esto hará que tu codigo JS se cargue después que el resto del sitio, de esta forma evitaras errores como el que tu código se ejecute antes de que se cree un label (por tanto, antes de que tenga color)

PD: FJDA - Java no es javascript, no tienen nada de similar aparte del nombre (el cual le pusieron así por la popularidad del momento) :xD y también siempre intenta que el código este entre GeSHi

--- Edito ---
Prueba hacer el onload de la forma que te digo, no de esa forma, y veamos que pasa. Si te aparece que $ no es funcion quiere decir que no se cargo o no reconoció correctamente el jquery. Verifica que en la consola no te diga que no se encontró el archivo o algo por el estilo.

Título: Re: jquery desde un archivo js
Publicado por: engel lex en 29 Abril 2017, 20:39 pm

para dejarlo más claro porque parecen no haberlo entendido

esto si va a funcionar

Código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="tu_script.js"></script>

esto no va a funcionar y dirá que $ no es una función (porque tu script al momento de correrse no conocía jscript)

Código:

<script src="tu_script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

Título: Re: jquery desde un archivo js
Publicado por: FJDA en 29 Abril 2017, 20:42 pm

Cita de: engel lex en 29 Abril 2017, 20:39 pm

para dejarlo más claro porque parecen no haberlo entendido

esto si va a funcionar

Código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="tu_script.js"></script>

esto no va a funcionar y dirá que $ no es una función (porque tu script al momento de correrse no conocía jscript)

Código:

<script src="tu_script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

está puesto así ya me di cuenta des de el principio ya cuando lo implementé en el HTML que debe estar primero

Código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="tu_script.js"></script>

Título: Re: jquery desde un archivo js
Publicado por: 3n31ch en 29 Abril 2017, 20:47 pm

Prueba textual esto:

HTML>

Código

<!DOCTYPE html>
<html>
<head>
	<title>SITIO WEB</title>
	<script type="text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script type="text/javascript" src = "js.js"></script>
	<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
	<label>Hola Mundo</label>
</body>
</html>

CSS:

Código

label {
	background:red;
}

JS:

Código

$(function(){
	var bgcolor = $('label').css('background-color');
	alert(bgcolor);
});

PD: Es mala practica poner el JS arriba del todo. Pero meeh

Título: Re: jquery desde un archivo js
Publicado por: engel lex en 29 Abril 2017, 20:51 pm

otra cosa que comenta 3n31ch onload... puede que tu script esté corriendo antes de haberse cargado el html (es un tipo de practica)

para esto tienes varias formas la mas simple es

Código

$.ready(function(){
 
    //aquí tu codigo
    var colorRGB=$('label').css('background-color');
    console.log(colorRGB); 
 
});

Título: Re: jquery desde un archivo js
Publicado por: FJDA en 29 Abril 2017, 21:08 pm

Cita de: 3n31ch en 29 Abril 2017, 20:47 pm

Prueba textual esto:

HTML>

Código

<!DOCTYPE html>
<html>
<head>
	<title>SITIO WEB</title>
	<script type="text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script type="text/javascript" src = "js.js"></script>
	<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
	<label>Hola Mundo</label>
</body>
</html>

CSS:

Código

label {
	background:red;
}

JS:

Código

$(function(){
	var bgcolor = $('label').css('background-color');
	alert(bgcolor);
});

PD: Es mala practica poner el JS arriba del todo. Pero meeh

genial tu código funciona ;-)

pero es que yo tengo funciones y dentro de $(function()) no puedo llamarlas, me dice que no están definidas.

Código

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script type="text/javascript" src="mijs.js"></script>
 
<style type="text/css">
label {	
position:absolute;
width: 200px;
height: 200px;
background-color:red;
}
</style>
 
</head>
<body>
 
<label></label>
 
 
</form>	
</body>
</html>

Código:

window.alert(getColorRGB())


$(function(){
 function getColorRGB()
{
	var bgcolor = $('label').css('background-color');
	return bgColor
}
});

igualmente no sabría como llamar a getColorRGB() desde el HTML, ya que me daría error igual.

Título: Re: jquery desde un archivo js
Publicado por: engel lex en 29 Abril 2017, 21:09 pm

no solo porque está una funcion dentro de otra, tambien porque la llamas antes de declararla...

y por eso es bueno mostrar el codigo de buenas a primeras...

Título: Re: jquery desde un archivo js
Publicado por: FJDA en 29 Abril 2017, 21:12 pm

Cita de: engel lex en 29 Abril 2017, 21:09 pm

no solo porque está una funcion dentro de otra, tambien porque la llamas antes de declararla...

y por eso es bueno mostrar el codigo de buenas a primeras...

no importa esto funcionaría igual

Código:

window.alert(getColorRGB())

 function getColorRGB()
{
	var bgcolor=25;
	return bgcolor
}

Además esto devolvería UNDEFINED :(

Código

var bgcolor
$(function(){
 bgcolor = $('label').css('background-color');
});
 
 function getColorRGB()
{
	return bgcolor
}
 
window.alert(getColorRGB())

Título: Re: jquery desde un archivo js
Publicado por: 3n31ch en 29 Abril 2017, 21:32 pm

Cita de: engel lex en 29 Abril 2017, 21:09 pm

no solo porque está una funcion dentro de otra, tambien porque la llamas antes de declararla...

y por eso es bueno mostrar el codigo de buenas a primeras...

Muy cierto u.u.
angel lex Sacalo de java pls!

--

FJDA. Empecemos otra vez, dime que quieres hacer y veamos si te puedo ayudar, porque ya no entiendo nada.

--
Quieres hacer esto?:

Código

function getColor() {
	return bgcolor;
}
 
$(function(){
	bgcolor = $('label').css('background-color');
	alert(getColor());
});

Título: Re: jquery desde un archivo js
Publicado por: FJDA en 29 Abril 2017, 21:39 pm

Cita de: 3n31ch en 29 Abril 2017, 21:32 pm

Muy cierto u.u.
angel lex Sacalo de java pls!

--

FJDA. Empecemos otra vez, dime que quieres hacer y veamos si te puedo ayudar, porque ya no entiendo nada.

Código

var bgcolor
 
$(function(){
 bgcolor = $('label').css('background-color');
});
 
 
function getColorRGB()
{
	return bgcolor
}
 
window.alert(getColorRGB())

a ver, una vez obtenido el colorRGB como lo sacas de aquí

Código:

$(function(){
 bgcolor = $('label').css('background-color');
});

como he puesto CLARISIMAMENTE en el ejemplo la variable bgcolor que he declarado FUERA, no obtiene el valor DENTRO de $(function(){.... TODO lo que está DENTRO se queda dentro. Luego tiene que haber alguna dorma de obtener el valor y sacarlo de $(function(){});

Eso no es mas que un ejemplo, lógico no voy a poner tropecientas líneas de código y funciones. solo necesito sacar el colorrgb usand jquery, pero no hay forma de sacarlo de $(function(){});

NOTA:
He poesteado mi duda aquí porque no he visto ningún subforo de javascript. Hice una pregunte en programación general y no ha contestado ni dios (por ahora) así que he entrado en los más parecido por sintaxis más que otra cosa.

Título: Re: jquery desde un archivo js
Publicado por: 3n31ch en 29 Abril 2017, 21:57 pm

Nose amigo, yo creo que el ejemplo que te puse ahí hace CLARISIMAMENTE lo que pides.

Pero para hacerlo mas claro:

Código

<!DOCTYPE html>
<html>
<head>
	<title>SITIO WEB</title>
	<script type="text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script type="text/javascript" src = "js.js"></script>
	<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
	<label>Hola Mundo</label>
	<button onclick = "alert(getColor())">FUNCION</button>
	<button onclick = "alert(bgcolor);">DIRECTO</button>
</body>
</html>

Código

function getColor() {
	return bgcolor;
}
 
$(function(){
	bgcolor = $('label').css('background-color');
});

Ojo que yo no le puse "var" a la variable, por tanto el global.

Título: Re: jquery desde un archivo js
Publicado por: FJDA en 29 Abril 2017, 22:16 pm

Cita de: 3n31ch en 29 Abril 2017, 21:57 pm

Nose amigo, yo creo que el ejemplo que te puse ahí hace CLARISIMAMENTE lo que pides.

Pero para hacerlo mas claro:

Código

<!DOCTYPE html>
<html>
<head>
	<title>SITIO WEB</title>
	<script type="text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script type="text/javascript" src = "js.js"></script>
	<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
	<label>Hola Mundo</label>
	<button onclick = "alert(getColor())">FUNCION</button>
	<button onclick = "alert(bgcolor);">DIRECTO</button>
</body>
</html>

Código

function getColor() {
	return bgcolor;
}
 
$(function(){
	bgcolor = $('label').css('background-color');
});

Ojo que yo no le puse "var" a la variable, por tanto el global.

No se muy bien porqué desde un EVENTO devuelve valor, pero si lo tiras así devuelve error(bgcolor no está definido) o sea undefined

Código

<body>
 
<label></label>
 
<!-- <button onclick = "alert(getColor())">FUNCION</button>
 
	<button onclick = "alert(bgcolor);">DIRECTO</button> -->
 
<script type="text/javascript">
window.alert(getColor())
</script>
 
</body>

mas claro el agua :-\

o sea desde script
<script type="text/javascript">
window.alert(getColor())
</script>

Título: Re: jquery desde un archivo js
Publicado por: 3n31ch en 29 Abril 2017, 22:19 pm

Tiene que ver con lo que te dije yo al inicio y lo que te dijo angel lex.

Pon un console.log() justo cuando asignes el valor y pon otro cuando lo quieras sacar.

Dime cual pasa primero y quizás tengas tu respuesta.

Título: Re: jquery desde un archivo js
Publicado por: FJDA en 29 Abril 2017, 22:23 pm

Cita de: 3n31ch en 29 Abril 2017, 22:19 pm

Código:

console.log(bgcolor)
VM118:1 rgb(255, 0, 0)
undefined
console.log(bgcolor())
VM121:1 Uncaught TypeError: bgcolor is not a function
    at <anonymous>:1:13
(anonymous) @ VM121:1
console.log(getColor())
VM171:1 undefined
undefined

Título: Re: jquery desde un archivo js
Publicado por: 3n31ch en 29 Abril 2017, 22:33 pm

SCRIPT:

Código

bgcolor = "VALOR INICIAL";
function getColorRGB() {
	return bgcolor;
}
 
console.log('LLAMO FUNCION');
console.log(getColorRGB()); // LLAMAR FUNCION
 
 
$(function(){
	console.log('ASIGNO VALOR');
	bgcolor = $('label').css('background-color'); //ASIGNAR VALOR
	console.log(bgcolor);
});

OUTPUT:

Código:

js.js:26 LLAMO FUNCION
js.js:27 VALOR INICIAL
js.js:31 ASIGNO VALOR
js.js:33 rgb(255, 0, 0)

Estas llamando la función antes de sacar el valor.
Por eso yo lo puse en botones, ya que si haces un alert o cualquier cosa antes de asignar el valor o te dará undefined o te dará un error.

Como lo solucionas?
O retrasas el output o haces antes el input.

Como haces eso?
Hacer antes el input sera mas complicado ya que necesitaras que jquery y el documento HTML cargue antes que tu output.

Por tanto retrasare el output:

Código

bgcolor = "VALOR INICIAL";
function getColorRGB() {
	return bgcolor;
}
 
setTimeout(function(){
	console.log('LLAMO FUNCION');
	console.log(getColorRGB()); // LLAMAR FUNCION
},500);
 
 
$(function(){
	console.log('ASIGNO VALOR');
	bgcolor = $('label').css('background-color'); //ASIGNAR VALOR
	console.log(bgcolor);
});

Funcionara siempre y cuanto todo cargue antes de los 500ms.

Pero esto es un parche, lo mejor seria hacer tu alert despues de que cargue con $(function(){});

Ahi te lo puedes ingeniar.

Título: Re: jquery desde un archivo js
Publicado por: FJDA en 29 Abril 2017, 22:56 pm

amigo ves pues no es tan fácil ...

antes que postearas estaba haciendo esto:

Código

// var bgcolor  //con esto no dará error pero devuelve Undefined
function getColor() {
	return ;
}
 
$(function(){
	bgcolor = $('label').css('background-color');
 
});
 
function crearObjeto(){
	var parrafo= document.createElement('p');
	parrafo.id="parrafo"
	document.body.appendChild(parrafo)
	var objeto= document.getElementById('parrafo');
	objeto.style.position="absolute";
	objeto.style.marginTop="250px";
 
	objeto.innerText=getColor(); //undefined
	objeto.innerText=bgcolor; //Error:bgcolor no está definido
}

'Creo un objeto, el cual mostrará el RGB, ya que no trato de mostrar el valor desde un mensaje si no desde un párrafo.

Curiosamente así funciona de lujo pero.... es raro si quito getColor() que no hace nada jquery no obtiene el background, o sea que es lo que tu dices, se carga antes de que obtenga el color y con esta "pirula" lo lee;

function getColor() {
   return null;
}

$(function(){
   bgcolor = $('label').css('background-color');

   var parrafo= document.createElement('p');
   parrafo.id="parrafo"
   document.body.appendChild(parrafo)
   var objeto= document.getElementById('parrafo');
   objeto.style.position="absolute";
   objeto.style.marginTop="250px";

   objeto.innerText=getColor();
   objeto.innerText=bgcolor;

});

~~en el httml~~

~~...~~
script type="text/javascript">
getColor();
</script>

tachado esto no hace falta

rectifico simplemente esto:

Código

$(function(){
	bgcolor = $('label').css('background-color');
	var parrafo= document.createElement('p');
	parrafo.id="parrafo"
	document.body.appendChild(parrafo)
	var objeto= document.getElementById('parrafo');
	objeto.style.position="absolute";
	objeto.style.marginTop="250px";
	objeto.innerText=bgcolor;
});

Pero ahí está el problema yo quiero crear un objeto div dentro de el objetos y quiero poder llamar a una función y asignarme parámentros como el contenedor donde se creará el div, pero no puedo trabajarlo estando todo en dentro $(function(){....

ostras si que funciona, ahora tengo que comprobar porque en mi código no. :-X

esto ya va bien así;

Código

function Prueba(objeto){
	$(function(){
		bgcolor = $('label').css('background-color');
		var parrafo= document.createElement('p');
		parrafo.id="parrafo"
		document.body.appendChild(parrafo)
		var objeto= document.getElementById('parrafo');
		objeto.style.position="absolute";
		objeto.style.marginTop="250px";
		objeto.innerText=bgcolor;
	});	
};

y en el HTML

Código

<label></label>
<div id="contenedor"></div>
<script type="text/javascript">
var dv= document.getElementById('contenedor');
Prueba(dv)
</script>

gracias por vuestra paciencia :P

@3n31ch me has ayudado mucho ;-)

Título: Re: jquery desde un archivo js
Publicado por: 3n31ch en 29 Abril 2017, 23:15 pm

Disculpa, creo que no te entendí muy bien....

Lo que entiendo es que quieres hacer tu código fuere de $(function(){}); pero también necesitas tener el bgcolor del label.

Lo que pasa es que no puedes tener el bgcolor del label antes de que este se cargue. Por tanto requieres de: $(function(){});

Por otro lado, puedes hacer perfectamente todas tus funciones fuera del $(function(){});

-- TE PONGO ESTE CÓDIGO AUNQUE DUDO QUE TE AYUDE, PORQUE NO ENTIENDO BIEN LO QUE QUIERES

Código

bgcolor = null;
 
function crearObjeto() {
	$('body').append('<p id = "parrafo">'+bgcolor+'</p>');
	$('#parrafo').css('position', 'absolute');
	$('#parrafo').css('margin-top', '250px');
}
 
$(function(){
	bgcolor = $('label').css('background-color');
	crearObjeto();
});

--
NO PRESTES ATENCIÓN A LO ANTERIOR, NO ME FIJE QUE MODIFICASTE TU MENSAJE

Título: Re: jquery desde un archivo js
Publicado por: 3n31ch en 29 Abril 2017, 23:28 pm

Pongo otro mensaje para que te des cuenta de la modificación :xD

Otra forma de hacer lo que hiciste (mas ordenado) seria la siguiente:

HTML:

Código

<!DOCTYPE html>
<html>
<head>
	<title>SITIO WEB</title>
	<script type="text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script type="text/javascript" src = "js.js"></script>
	<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
	<label></label>
	<div id = "contenedor"></div>
	<script type="text/javascript">
		$(function(){
			prueba($("#contenedor"));
		});
	</script>
</body>
</html>

JS:

Código

function prueba(contenedor){
	bgcolor = $('label').css('background-color');
	$(contenedor).append('<p id = "parrafo">'+bgcolor+'<p>');
}

CSS:

Código

label {
	background:red;
}
#parrafo {
	position:absolute;
	margin-top: 250px;
}

Suerte con tu código! ;D

Título: Re: jquery desde un archivo js
Publicado por: FJDA en 30 Abril 2017, 00:34 am

muchas gracias la modificación que has puesto @3n31ch va perfecto. Solo que he tenido que cambiar appendChild() por append() en el código externo al usar el jquery selector. Como pusiste en el otro código:

$(elemento)

Código:

$(contenedor).append('<p id = "parrafo">'+bgcolor+'<p>');

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: FJDA en 29 Abril 2017, 20:10 pm