[SOLUCIONADO] Manejar números en el argumento de una funcion

TAJNG · #1 (**permalink**) 02/11/2012, 19:40

Hola...

Quisiera ver si me pueden orientar para identificar mi error.

Tengo un documento html en los cuales estan contenidos algunos checkbox. Necesito crear una función que cada que se seleccione o des-seleccione otra función "lea" ese evento y aumente o disminuya un valor. Y este valor sea automáticamente mostrado en pantalla, cuando aumente o disminuya para saber cuanto tiene en total.

Sin embargo al parecer tengo un problema en el javascript, además de que no se como hacer que si es des-seleccionado no se aumente de nuevo el número debido.

Este es mi fragmento de HTML:

Código HTML:

Ver original<HTML>
  <HEAD>
  </HEAD>
  <BODY>
    <FORM name="form1">
    <TABLE>
      <TR>
        <TD>
          <INPUT TYPE="checkbox" value="0" onclick="aumentar(45);" name="check_1">Si es seleccionado debe aumentar 45%<br>
          <INPUT TYPE="checkbox" value="0" onclick="aumentar(45);" name="check_2">Si es seleccionado debe aumentar 45%<br>
          <INPUT TYPE="checkbox" value="0" onclick="aumentar(30);" name="check_3">Si es seleccionado debe aumentar 30%<br>
          <INPUT TYPE="checkbox" value="0" onclick="aumentar(20);" name="check_4">Si es seleccionado debe aumentar 20%<br>
          <INPUT TYPE="checkbox" value="0" onclick="aumentar(20);" name="check_5">Si es seleccionado debe aumentar 20%<br>
          <INPUT TYPE="checkbox" value="0" onclick="aumentar(15);" name="check_6">Si es seleccionado debe aumentar 15%<br>
          <INPUT TYPE="checkbox" value="0" onclick="aumentar(15);" name="check_7">Si es seleccionado debe aumentar 15%<br>
          <INPUT TYPE="checkbox" value="0" onclick="aumentar(10);" name="check_8">Si es seleccionado debe aumentar 10%<br>
          <INPUT TYPE="checkbox" value="0" onclick="aumentar(10);" name="check_9">Si es seleccionado debe aumentar 10%<br>
          <INPUT TYPE="checkbox" value="0" onclick="aumentar(10);" name="check_10">Si es seleccionado debe aumentar 10%<br>
          <INPUT TYPE="checkbox" value="0" onclick="aumentar(10);" name="check_11">Si es seleccionado debe aumentar 10%<br>
          <INPUT TYPE="checkbox" value="0" onclick="aumentar(10);" name="check_12">Si es seleccionado debe aumentar 10%<br>
        </TD>
        <TD>
          <div id="sumamulti"></div>% total.
          /*Aquí debería ir la suma total dentro del DIV*/
        </TD>
      </TR>
    </TABLE>
    </FORM>
  </BODY>
</HTML>

Y acá está lo que debería ser mi JavaScript, sin embargo es obvio que tengo algún error >.<

Código Javascript:

Ver originalfunction aumentar(j) {
  var sigma = 0;
  sigma += j;
  document.getElementById('sumamulti').innerHTML = Sigma;   
}

En fin, ojalá me puedan ayudar porque me he quebrado un poco la cabeza sin obtener éxito alguno. :(

De ante mano muchas gracias por el tiempo.

emprear · #2 (**permalink**) 02/11/2012, 19:50

Para saber si está seleccionado o no, tenés que utilizar la propiedad checked.
Además javascript es "case sensitive", distingue mayúsculas de minúsculas
sigma no es Sigma

Y tu enunciado es bastante impreciso

Saludos

TAJNG · #3 (**permalink**) 02/11/2012, 20:19

Bueno, lamento mucho si no me supe expresar.

Sin embargo, sigo con el problema. Ya corregí el pequeño inconveniente de las mayúsculas, pero aunque agradezco hacermelo ver aún no puedo crear la función debida.

Acabo de añadirles un Id a todos los checkbox, pero no se como llamar el atributo checked.
He tratado de crear la función primero con un solo checkbox (cuyo ID es "aumenta_45") y me ha quedado así:

Código Javascript:

Ver originalfunction aumentar() {
                var sigma = 0;
                if (document.getElementById('aumenta_45').checked == true) {sigma += 45};
                document.getElementById('sumamulti').innerHTML = sigma;
            }

Sin embargo es obvio que estoy mal, ya que no me va >.<

emprear · #4 (**permalink**) 02/11/2012, 21:12

Repito, tenés que aclarar tu enunciado, porque es completamente confuso,

Cita:

una función que cada que se seleccione o des-seleccione otra función

la función no se selecciona, se ejecuta en respuesta a un evento...
otra función, ni siquiera hay dos funciones.

Aventurando un poco supongo, y solo supongo que querés hacer esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" 
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>suma</title>
<script type="text/javascript">
//<![CDATA[
function sumar(){
var total=0;
for (i=0;i<document.formulario.elements.length;i++){
if(document.formulario.elements[i].checked){
total+=parseInt(document.formulario.elements[i].value);
}
}
document.getElementById('total').innerHTML =total; 
}
//]]>
</script>
</head>
<body>
<div>
<form name="formulario" action="#">
1 <input type="checkbox" name="x" value="1" onclick="sumar()" />
2 <input type="checkbox" name="x" value="2" onclick="sumar()" />
3 <input type="checkbox" name="x" value="3" onclick="sumar()" />
</form>
<div id="total"></div>
</div>
</body>
</html>

Pero. como lo señalo constantemente, este es un foro escrito, y hay que esmerarse en presentar los problemas
Saludos

chwc · #5 (**permalink**) 02/11/2012, 21:37

Bueno, primero que nada, los inputs deben ser asi :

Cita:

fijate que cierran con /> , por que no tienen etiqueta de cierre, luego en vez de usar onclick use onchange ( representa "en cambio de estado" ) , tercero, a la función le agrege una variable de entrada ( this ) osea el elemento.

el JS es el siguiente

Código Javascript:

Ver originalvar total=0; // variable global
function aumentar(valor,elemento){
    if (elemento.checked)total+=valor //si el elemento fue marcado, agregar el valor
    else total-=valor //en caso contrario, quitarlo
    }

Un saludo, y espero que hayas entendido, el problema principal que tenias, es que el onclick sale siempre, no importa si lo marcas o lo desmarcas.

chwc · #6 (**permalink**) 02/11/2012, 21:43

Disculpa me falto agregarle a la función

Código Javascript:

Ver originalvar total=0; // variable global
function aumentar(valor,elemento){
* * if (elemento.checked)total+=valor //si el elemento fue marcado, agregar el valor
* * else total-=valor //en caso contrario, quitarlo
    document.getElementById('sumamulti').innerHTML = total; //eso XD
* * }

la ultima linea para que se actualice

caricatos · #7 (**permalink**) 02/11/2012, 23:25

Hola:

Cita:

Iniciado por chwc

Bueno, primero que nada, los inputs deben ser asi :
fijate que cierran con /> , por que no tienen etiqueta de cierre...

Eso depende del tipo de doctype de la página... tu afirmación es correcta en xhtml, pero sin esa x (html) no hay obligatoriedad... (es más, creo que no valida...)

Saludos

chwc · #8 (**permalink**) 03/11/2012, 01:14

Cita:

Iniciado por caricatos

Hola:

Eso depende del tipo de doctype de la página... tu afirmación es correcta en xhtml, pero sin esa x (html) no hay obligatoriedad... (es más, creo que no valida...)

Saludos

A si lo pense despues de escribir el post por que en HTML5 no hay nescesidad, pero si valida correctamente eso si, es lo mismo
un saludo Caricatos !!

TAJNG · #9 (**permalink**) 04/11/2012, 01:32

¡Mil gracias!

Muchas gracias a ambos, emprear y chwc. Ambos me ofrecieron solución al mismo problema, a pesar de no haberme expresado con claridad, les agradezco.

Sin embargo, más que disfrutar la comodidad de que me hagan las cosas, yo prefiero que me enseñen a hacer las cosas por mi mismo. Ya que por ejemplo, sigo teniendo problemas para entender al 100% como "utilizar" los paréntesis en las llamadas de las funciones.

Esta vez, por ejemplo en el mismo formulario de los checkbox, tengo dentro de una tabla algunas TEXTAREA, las cuales para ahorrar espacio quisiera hacerlas que cambien de tamaño al dar clic en el encabezado de la tabla. Se me ocurrió llamar dos funciones para con una contraer y con la otra expandir el textarea debajo de ese encabezado.

Lo que tengo es algo así:

Código HTML:

Ver original<TABLE>
  <TR>
    <TH>
      Usuarios <span onclick="expandir(users);contraer(users);">▼</span>
    </TH>
  </TR>
  <TR>
    <TD>
      <TEXTAREA rows=2 cols=47 id="users" name="users"></TEXTAREA>
    </TD>
  </TR>
</TABLE>

Y lo que yo había pensado utilizar como función es algo como esto (pero que si funcionara jejeje):

Código Javascript:

Ver originalfunction expandir(campo){
    if (document.getElementById(campo).rows < 3) document.getElementById(campo).rows = 25;
}
function contraer(campo){
    if (document.getElementById(campo).rows > 2) document.getElementById(campo).rows = 2;
}

De esta manera yo pensaba que si era menor a 3, es decir igual o menor a 2, entonces lo ampliara hasta 25. Pero que si era mayor a 24, es decir igual o mayor a 25, entonces lo redujera hasta 2.

Tal vez le pido mucho a javascript o deba abordarlo de diferente manera, pero igualmente quisiera que me auxiliaran para entender esto de los parentesis en js.

De antemano mil gracias por la ayuda, ojalá alguno fuera mi maestro particular XD

chwc · #10 (**permalink**) 05/11/2012, 15:21

Hola :B

Gracias por la ultima linea :O XD

mira, vi tu codigo, esta linea de html

Código HTML:

Ver originalUsuarios <span onclick="expandir(users);contraer(users);">▼</span>

tiene un problema, y tiene que ver con los parentesis de las funciones XD
el problema es que deberias hacerlo asi :

Cita:

Usuarios <span onclick="expandir('users');contraer('users');">▼</span>

fijate las comillas que le agregé, lo que pasa es que en vez de enviar la cadena users a la función , busca el valor de la variable users, y como esa variable no existe , tira un error.

hasta acá todo bien, ahora las dos funciones se ejecutan correctamente, el problema es que ahora, imaginate que no esta expandido, y quieres expandirlo, cuando uno hace click, la función expandir lo expande correctamente, pero le sigue automaticamente la función contraer, asi que lo contrae, por lo tanto no notarás que se haya expandido y contraido.
asi que en realidad tendrias que hacer una única funcion que envie el nombre del textarea, como expandir y contraer, pero que tenga las dos funciones incorporadas.
vamos a llamarla expandirOContraer(campo)

entonces usamos lo siguente en HTML

Cita:

Usuarios <span onclick="expandirOContraer('users');">▼</span>

ahora, creemos la función expandirOContraer

Código Javascript:

Ver originalfunction expandirOContraer(campo){
if (document.getElementById(campo).rows < 3) document.getElementById(campo).rows = 25; // si la cantidad de rows es menor a 3, la expandimos
else document.getElementById(campo).rows = 25; //si no la expandimos, entonces la contraemos
}

Bueno, espero que hayas entendido :D si queres que te ayude podes pedirme mi skype y te ayudo o te explico, hay personas que les gusta compartir los conocimientos, es eso

Un abrazo y que tengas un buen dia ( o buenass noches )