suma de value cambia contenido

regumiau · #1 (**permalink**) 04/11/2011, 17:38

Hola, solicito ayuda para poder terminar el siguiente script.

Estoy haciendo un script que de acuerdo al resultado de la suma del valor dado en value de cada checkbox modifique el contenido de un texto, pero en la misma pagina, sin refresh ni nada de eso.
en una condicional le indico que si el valor es menor a 3 que diga el texto GO.
en caso contrario debe decir NEXT.

ademas, sin marcar ninguna casilla debe decir GO.

hasta ahora he logrado que imprima en pantalla GO o NEXT de acuerdo al valor, pero este reacciona inmediatamente al clicar en un casillero, borrando pantalla imprimiendose solo el resultado GO o NEXT.

Espero haber detallado bien el tema y que alguien me ayude a corregir este script que paso a dejar aqui:

<html>
<head>
<script>
var total=0;

function sumar(valor) {
total += valor;
document.formulario.total.value=total;
check_status();
}

function restar(valor) {
total-=valor;
document.formulario.total.value=total;
check_status();
}

</script>

<SCRIPT language="JavaScript" type="text/javascript">
function check_status() {
if (total < 3) {
document.write("go");
}
else {
document.write("next");
}
}
</script>

</head>
<body>
<form name=formulario>
<input name="checkbox1" type="checkbox" onClick="if (this.checked) sumar(1); else restar(1)" value="1">$1<br>
<input name="checkbox2" type="checkbox" onClick="if (this.checked) sumar(1); else restar(1)" value="1">$1<br>
<input name="checkbox3" type="checkbox" onClick="if (this.checked) sumar(1); else restar(1)" value="1">$1<br>
<input name="checkbox4" type="checkbox" onClick="if (this.checked) sumar(3); else restar(3)" value="3">$3<br>
<input type="text" name="total" value="0">
</form>

<SCRIPT language="JavaScript" type="text/javascript">
document.write(total);
</script>

</body>
</html>

Hugo_Euan · #2 (**permalink**) 05/11/2011, 04:22

Hola regumiau

la razón por la que solo imprime GO o NEXT es por que indicas que se sobre escriba todo el documento...

document.write

que tal si mejor indicamos que solo se sobre escriba un modulo (DIV)....

por ejemplo tendriamos un div con un id llamado consola

<div id="consola">Go</div>

y mendiante innerHTML indicamos que reescriba dentro de ese div.....
para ello obtenemos el id mediante getElementById

tambien agregamos una condicion que indique que si la suma es menor a 3 escriba GO si no que comprueba que si la suma es mayor o igual a 3 escriba next.... si no se cumple ningun caso que escriba next... osea cuando el valor es 0 y ningun check esta marcado....

quedaría algo así por el estilo :3

Código Javascript:

Ver original<html>
<head>
<script>
var total=0;
 
function sumar(valor) {
total += valor; 
document.formulario.total.value=total;
check_status();
}
 
function restar(valor) {
total-=valor; 
document.formulario.total.value=total;
check_status();
}
 
</script>
 
<SCRIPT language="JavaScript" type="text/javascript">
function check_status() {
if (total < 3) {
    var consola = document.getElementById("consola");
    consola.innerHTML = "Go";
}
else if(total >=3) {
    var consola = document.getElementById("consola");
    consola.innerHTML = "Next";
}else{
    var consola = document.getElementById("consola");
    consola.innerHTML = "Next";
}
}
</script>
 
</head>
<body>
<form name=formulario>
<input name="checkbox1" type="checkbox" onClick="if (this.checked) sumar(1); else restar(1)" value="1">$1<br>
<input name="checkbox2" type="checkbox" onClick="if (this.checked) sumar(1); else restar(1)" value="1">$1<br>
<input name="checkbox3" type="checkbox" onClick="if (this.checked) sumar(1); else restar(1)" value="1">$1<br>
<input name="checkbox4" type="checkbox" onClick="if (this.checked) sumar(3); else restar(3)" value="3">$3<br>
<input type="text" name="total" value="0">
</form>
<div id="consola">Go</div>
</body>
</html>

Espero que te sea de utilidad

SALUDOS y ÉXITO....

regumiau · #3 (**permalink**) 05/11/2011, 06:06

GRACIAS Hugo_Euan!!!!!!!!!

Esta perfecto el script ahora, FUNCIONA!!!!!!!!!!

regumiau · #4 (**permalink**) 06/11/2011, 09:27

He intentado agregar un selector, para ingresar datos no solo por medio del checkbox, pero parece que debo crear una funcion para que tome los datos, y alli estoy trabado ahora. este me suma hasta los CEROS.

Coloco el script completo aver si me pueden ayudar:

<html>
<head>
<script>
var total=0;
function sumar(valor) {
total += valor;
document.formulario.total.value=total;
check_status();
}
function restar(valor) {
total-=valor;
document.formulario.total.value=total;
check_status();
}
function check_status() {
if (total < 3) {
var consola = document.getElementById("consola");
consola.innerHTML = "Go";
}
else if(total >=3) {
var consola = document.getElementById("consola");
consola.innerHTML = "Next";
}else{
var consola = document.getElementById("consola");
consola.innerHTML = "Next";
}
}
</script>
<script>
var total1=0;
function sumar1(valor) {
total1 += valor;
document.formulario1.total1.value=total1;
check_status1();
}
function restar1(valor) {
total1-=valor;
document.formulario1.total1.value=total1;
check_status1();
}
function check_status1() {
if (total1 < 3) {
var consola1 = document.getElementById("consola1");
consola1.innerHTML = "Go";
}
else if(total1 >=3) {
var consola1 = document.getElementById("consola1");
consola1.innerHTML = "Next";
}else{
var consola1 = document.getElementById("consola1");
consola1.innerHTML = "Next";
}
}
</script>
</head>
<body>
<form name=formulario>
<select name="dato3" onchange="sumar(this.value)">
<option value="">Choice</option>
<option value="0">A</option>
<option value="0">B</option>
<option value="1">C</option>
</select>
<select name="dato4" onchange="sumar(this.value)">
<option value="">Choice</option>
<option value="0">A</option>
<option value="0">B</option>
<option value="1">C</option>
</select>
<select name="dato5" onchange="sumar(this.value)">
<option value="">Choice</option>
<option value="0">A</option>
<option value="0">B</option>
<option value="1">C</option>
</select>
<select name="dato6" onchange="sumar(this.value)">
<option value="">Choice</option>
<option value="0">A</option>
<option value="0">B</option>
<option value="1">C</option>
</select>
<select name="dato7" onchange="sumar(this.value)">
<option value="">Choice</option>
<option value="0">A</option>
<option value="0">B</option>
<option value="1">C</option>
</select>
<input type="text" name="total" value="0">
</form>
<div id="consola">Go</div>

<form name=formulario1>
<input name="checkbox5" type="checkbox" onClick="if (this.checked) sumar1(1); else restar1(1)" value="1">$1<br>
<input name="checkbox6" type="checkbox" onClick="if (this.checked) sumar1(1); else restar1(1)" value="1">$1<br>
<input name="checkbox7" type="checkbox" onClick="if (this.checked) sumar1(1); else restar1(1)" value="1">$1<br>
<input name="checkbox8" type="checkbox" onClick="if (this.checked) sumar1(3); else restar1(3)" value="3">$3<br>
<input hidden type="text" name="total1" value="0">
</form>
<div id="consola1">Go</div>
</body>
</html>