Script en TOP FRAME

[soloandroid]

Hola buenas, tengo el siguiente script el cual lo que realiza es lo siguiente : son botones que al presiona 1 boton suman +1, el script funciona bien,lo que sucede es que me gustaría que fuera todo igual PERO el resultado de ese +1 apareciera en un TOP FRAME y los botones estuvieran en un MAIN FRAME, esto seria posible ?

Aqui dejo el código :

<form action="" method="">
<div align="center">
<input type="text" value="95" id="a" size="2"/>
<a href="javascript:inc_count('a');"> <img src="sumar.png" width="20" height="20" /></a>
<input type="text" value="94" id="b" size="2" name="text"/>
<a href="javascript:inc_count('b');"> <img src="sumar.png" width="20" height="20" /></a>
</div>
<p/>&nbsp;
</form>
<script>
function inc_count(id)
{
res = document.getElementById(id);
if(parseInt(res.value)<100)
{
res.value = parseInt(res.value)+1;
}
}
</script>

[Alexis88]

Claro que es posible, solo coloca los botones en el área que desees, toma al elemento de salida (en donde se visualizará el dato) y asígnale el valor, ya sea a través de la propiedad value (para una caja de texto) o innerHTML/innerText (para un <label>, <span>).

Saludos

[soloandroid]

OK,gracias, lo que he probado es lo siguiente :

he puesto los dos botones en el MAIN FRAME, y la zona del resultado en el top frame, sin embargo al realizar esto deja de funcionar el script.

He puesto lo siguiente :

TOP FRAME :

<form action="" method="">
<div align="center">
<input type="text" value="95" id="a" size="2" name="text"/>
<input type="text" value="94" id="b" size="2" name="text2"/>
</div>
<div align="center"></div>
<p/>&nbsp;
</form>
<script>
function inc_count(id)

{
res = document.getElementById(id);
if(parseInt(res.value)<100)
{
res.value = parseInt(res.value)+1;
}
}

</script>

-----------------------------------
MAIN FRAME :



<form action="" method="">
<div align="center"> <a href="javascript:inc_count('a');"> <img src="sumar.png" width="20" height="20" /></a>

<a href="javascript:inc_count('b');"> <img src="sumar.png" width="20" height="20" /></a>
</div>
<p/>&nbsp;
</form>
<script>
function inc_count(id)

{
res = document.getElementById(id);
if(parseInt(res.value)<100)
{
res.value = parseInt(res.value)+1;
}
}

</script>

[Alexis88]

Supongo que esperas obtener un resultado similar a este:



Simplemente, ten en un elemento contenedor a los elementos en los que se mostrarán las cifras y en otro a los elementos que al darles clic, provocarán un incremento en el valor que se muestra en las primeras. Esta sería una forma que tranquilamente puede generalizarse.

Código Javascript:

var a = document.getElementById("a"),
    b = document.getElementById("b"),
    sumA = document.getElementById("sumA"),
    sumB = document.getElementById("sumB");
 
sumA.addEventListener("click", function(){
    if (a.innerHTML < 100) a.innerHTML = Number(a.innerHTML) + 1;
}, false);
 
sumB.addEventListener("click", function(){
    if (b.innerHTML < 100) b.innerHTML = Number(b.innerHTML) + 1;
}, false);
 

Para este ejemplo, no utilizo formularios, imágenes ni cajas de texto, simplemente uso dos <div>, dos <span> y dos <label>, a los cuales les asigno identificadores con los cuales los tomaré. Enseguida, asigno una función por cada vez que se de un clic en cada <span> y evalúo el valor del <label> que le corresponda; si éste es menor a 100, le aumento en uno su valor, caso contrario, queda como está.

Saludos

[soloandroid]

muchas gracias,la verdad es que queda perfecto, incluso al decirme lo de DIVS en lugar de FRAMES, queda aun mejor y lo voy a hacer en divs.
Esto es para una aplicacion movil muy parecida a POU, en donde los botones de sumar simbolizan +1 en vida o +1 en comida etc.... Ya la pondre aquí.

Una ultima pregunta, seria posible que al realizar esa accion de sumar se produjera otra accion justo después de sumar como por ejemplo enlazar a otro div ? no se si me estoy explicando bien,los botones seguirian estando pero ahora seria otro div en donde aparecieran otras cosas junto a los botones.

Cuando lo intento ,y al pulsar el boton produce la accion de SUMAR,lógico, pero cuando le añado el HREF no hace nada,o realiza una o realiza la otra,pero no las dos.

Ya con esto ya la tengo terminada la aplicacion, muchas gracias

[Alexis88]

No me quedó muy claro eso de enlazar a otro <div>, pues para crear un enlace, necesitas usar el elemento <a>, o también puedes asignar una función que se ejecute cuando se le de un clic al <div>, en la cual se realice una redirección. Quizá si explicas mejor esta parte, te podremos ayudar.

Saludos

[soloandroid]

Vale Alexis te explico, practicamente esta todo hecho.
Como comentaba en el anterior mensaje, esto es para una aplicacion en movil parecida a POU, en donde los botones serán sustuidos luego por pequeñas imagenes que simbolizan dar de comer etc...
Esos numeros ( los de sumar ) simbolizan la salud de POU o el HAMBRE de POU.

Entonces, yo ya tengo todas las escenas ( animaciones ) realizadas, simplemente necesitaria que cuando alguien pulse un boton entonces SUMARA + 1 y además cambiara la imagen ( O PAGINA ) del main frame ( osea pondria EN OTRA PAGINA SI FUERA POSIBLE otra animacion en donde saldria el POU COMIENDO ).O si no es por pagina por DIVs....

Desconozco si esto se puede hacer o esto no es posible de esta forma, no lo se.
Muchas gracias.

[Alexis88]

¿Te refieres a colocar una imagen de fondo y cambiarla según el valor? Pues, el cambio de valor ya lo tienes y el cambio del fondo lo realizas con tuDiv.style.background = "url(imagen.jpg)". Y como quieres que la imagen varíe según el valor sumado (supongo), podrías hacerlo con una estructura selectiva múltiple (switch) o tener un array con los nombres de las imágenes e ir tomándolos y mostrándolos según corresponda con el valor sumado. Si quieres cargar una página dentro del <div>, puedes hacerlo con Ajax o mejor aún, utiliza un elemento <iframe> y cámbiale el valor del atributo src.

Saludos

[soloandroid]

ok muchas gracias, a ver si me aclaro.
Un saludo

[soloandroid]

Hola Alexis, he conseguido hacer lo siguiente. Te paso el ejemplo real el cual luego será una aplicación movil :

www.1000portadas.com/autosuma

Como puedes ver al pulsar el sumar ( está abajo ) funciona muy bien en el ejemplo que me enviaste, ahora bien he probado lo que me comentaste luego pero no hace nada. Simplemente lo que necesitaria es que cuando presione el botón de sumar : sume y cambie a otro div que lleve otra imagen. Osea 2 órdenes : sumar y cambiar de div. Por mucho que pruebo no logro saberlo.

Gracias

[Alexis88]

Sería más fácil si simplemente cambias la fuente de la imagen del elemento <img> que contiene el <div>. Podrías tener una lista de fuentes almacenadas en un array y por cada clic, ir asignándolas al atributo src del elemento <img>.

Código Javascript:

var imagenes = ["imagen1.jpg", "imagen2.jpg", "imagen3.jpg"], //Todas las imágenes que quieras
    total = imagenes.length, //El total de imágenes
    i = 0, //Contador que usaremos para controlar el cambio de imagen
    img = document.getElementById("main").getElementsByTagName("img")[0];
 
sumA.addEventListener("click", function(){
    if (a.innerHTML < 100){
        a.innerHTML = Number(a.innerHTML) + 1;
        i = i == total - 1 ? 0 : ++i;
        img.src = imagenes[i];
    }
}, false);
 
sumB.addEventListener("click", function(){
    if (b.innerHTML < 100){
        b.innerHTML = Number(b.innerHTML) + 1;
        i = i == total - 1 ? 0 : ++i;
        img.src = imagenes[i];        
    }
}, false);
 

Por cada clic, actualizo el valor del contador y con el valor actualizado, tomo una imagen del array y la asigno al elemento <img>. En la actualización, verifico el valor actual del contador; si este es igual a la última posición del array, lo regreso al inicio, caso contrario, lo hago avanzar una posición a la derecha.

Saludos

[soloandroid]

muchas gracias me gusta mucho esto ultimo que has puesto.

Una ultima pregunta muy sencilla : cuando en lugar de FRAMES lo pusiste en DIVS ( yo nunca trabajo con divs ) mi pregunta es : si yo quisiera enlazar un div con otro div ( osea como si fueran FRAMES ) seria posible como tu lo has hecho Alexis ?

me refiero pusiste ID=TOP y ID=MAIN , si yo SOLO quisiera enlazar el DIV=MAIN con otro div se podria enlazar pero mateniendo el DIV TOP. ?

No me refiero al pulsar lo de SUMAR ni nada de eso, sino al pulsar donde sea se cambia el contenido del DIV=MAIN. Me podrias poner una simple linea de ejemplo ? muchas gracias

[Alexis88]

La verdad es que no veo el tema de frames hace unos 8 años o más. No los he vuelto a usar desde entonces pues en el estándar HTML5, han quedado obsoletos y la W3C no recomienda seguir utilizándolos. Si me explicaras qué es lo que buscas hacer, te puedo orientar, porque si mencionas la palabra 'enlazar', lo primero que me viene a la mente son los elementos <a>.

Saludos

[soloandroid]

Ok, cuanto tu cuanto cobras Alexis a la hora ? nos vendrias muy bien para algunos proyectos esporádicos para moviles, nos ha venido muy bien el ejemplo este de arriba de las imagenes. Ya nos comentas,un saludo