JS borrar una parte de la pantalla

Publicado en 'Programación' por joel094, 28 Jun 2015.





  1. joel094

    joel094 Miembro frecuente

    Registro:
    14 Oct 2012
    Mensajes:
    213
    Likes:
    7




    Hola a todos tengo una pequeña duda lo que pasa es que al presionar un botón me imprime un resultado y si lo presiono denuedo quisiera q borre el anterior y ponga el nuevo pero no logro hacerlo se imprime debajo de el anterior ayuda por favor aquí el código que imprime el resultado.

    Código:
    function showResults(strategyA,strategyB){
        var i;
        var p = document.createElement('p');
        var txt ="<p>Estrategias del jugador A: ( "
        for( i = 0; i<rows; i++){
         txt = txt + (strategyA[i]/iterations);
         if(i<rows-1){
         txt = txt + ' , ';
         }
        }
       
        txt = txt + ')</p>';
        p.innerHTML = txt;
        document.getElementById('game').appendChild(p);
       
         i;
         p = document.createElement('p');
         txt ="<p>Estrategias del jugador B: ( "
        for( i = 0; i<columns; i++){
         txt = txt + (strategyB[i]/iterations);
         if(i<columns-1){
         txt = txt + ' , ';
         }
        }
        txt = txt + ')</p>';
        p.innerHTML = txt;
        document.getElementById('game').appendChild(p);
       
        return true;
    }
     


  2. gnox

    gnox Miembro maestro

    Registro:
    3 Ene 2013
    Mensajes:
    792
    Likes:
    252
    PHP:
    var nodo document.getElementById("game");
    nodo.innerHTML ='';
     
  3. joel094

    joel094 Miembro frecuente

    Registro:
    14 Oct 2012
    Mensajes:
    213
    Likes:
    7
    ya intente con esto pero se borrar y no aparece la nueva respuesta, incluso lo cree comno una funcion aparte la invoke primero y luego al mostrar resultado pero no muestra solo borra.
    Código:
      
        var i;
        var p = document.createElement('p');
        var txt ="<p>Estrategias del jugador A: ( "
        for( i = 0; i<rows; i++){
         txt = txt + (strategyA[i]/iterations);
         if(i<rows-1){
         txt = txt + ' , ';
         }
        }
        txt = txt + ')</p>';
        p.innerHTML = txt;
        document.getElementById('description').appendChild(p);
    
    
         i;
         p = document.createElement('p');
         txt ="<p>Estrategias del jugador B: ( "
        for( i = 0; i<columns; i++){
         txt = txt + (strategyB[i]/iterations);
         if(i<columns-1){
         txt = txt + ' , ';
         }
        }
        txt = txt + ')</p>';
        p.innerHTML = txt;
        document.getElementById('description').appendChild(p);
      
        return true
    
    ;
     
  4. AiApaec

    AiApaec Miembro frecuente

    Registro:
    1 May 2014
    Mensajes:
    58
    Likes:
    14
    https://jsfiddle.net/0arbvLp6/1/

    Pero tu código está mal escrito, parece un mal copy-paste.
    ¿Dónde está declarada la variable rows?
    ¿Qué es esto:
    i;
    Estás tratando de reiniciar la variable a cero?(si es así no funcionará, debes hacer esto: i=0;)
    Además hay una división por cero:
    (strategyA/iterations)
    (la iteración inicia con i=0)
    ...
    ...
     
    Última edición: 28 Jun 2015
  5. joel094

    joel094 Miembro frecuente

    Registro:
    14 Oct 2012
    Mensajes:
    213
    Likes:
    7
    no es un copy no eh puesto el código obviamente solo es una parte si deseas todo el código acá esta

    Código:
    rows;
    columns;
    matrix;
    iterations;
    function showResults(strategyA,strategyB){
        var i;
        var p = document.createElement('p');
        var txt ="<p>Estrategias del jugador A: ( "
        for( i = 0; i<rows; i++){
         txt = txt + (strategyA[i]/iterations);
         if(i<rows-1){
         txt = txt + ' , ';
         }
        }
        txt = txt + ')</p>';
        p.innerHTML = txt;
        document.getElementById('description').appendChild(p);
         i;
         p = document.createElement('p');
         txt ="<p>Estrategias del jugador B: ( "
        for( i = 0; i<columns; i++){
         txt = txt + (strategyB[i]/iterations);
         if(i<columns-1){
         txt = txt + ' , ';
         }
        }
        txt = txt + ')</p>';
        p.innerHTML = txt;
        document.getElementById('description').appendChild(p);
    
        return true;
    }
    
    function initialize(array,size){
        var i;
        for( i = 0; i<size; i++){
         array[i] = 0;
        }
        return true;
    }
    
    function addRow( row,acumRow,lastRowSelected){
        var min;
        var i;
        for( i = 0;i<columns;i++){
           if (i==0){
           acumRow[i] = acumRow[i] + matrix[row*columns + i];
           min = 0;
           }else{
           acumRow[i] = acumRow[i] + matrix[row*columns + i];
            if((acumRow[i] <= acumRow[min])&& (i!=lastRowSelected)){
                min = i;
            }
           }
        }
        return min;
    }
    
    function addColumn(column,acumCol,lastColSelected){
        var max;
        var i;
        for( i = 0;i <rows;i++){
        if(i == 0){
          acumCol[i] = acumCol[i] + matrix[i*columns + column];
          max = 0;
        }else{
          acumCol[i] = acumCol[i] + matrix[i*columns + column];
         if((acumCol[i] >= acumCol[max])&& (i!=lastColSelected)){
                max = i;
            }
         }
        }
        return max;
    }
    
    function solveGame(){   
        var acumRow =new Array(rows);
        var acumCol=new Array(columns);
        var strategyA = new Array(columns);
        var strategyB = new Array(rows);
        initialize(acumRow,columns);
        initialize(acumCol,rows);
        initialize(strategyB,columns);
        initialize(strategyA,rows);
        var min ;
        var max;
        min = addRow(0,acumRow,-1);
    
        strategyB[min]++;
        max = addColumn(min,acumCol,-1);
        strategyA[max]++;   
        var i = 1;
        while( i<iterations){
        min = addRow(max,acumRow,min);
        strategyB[min]++;
        max = addColumn(min,acumCol,max);
        strategyA[max]++;
        i++;
        }
        showResults(strategyA,strategyB,acumRow,acumCol);   
        return true;
    }
    
    function readData(){
        rows = parseInt(document.getElementById('rows').value);
        columns = parseInt(document.getElementById('columns').value);
        matrix = new Array(rows*columns);
        var matrixString = document.getElementById('matrix').value;
        var i;
        for( i=0;i < (matrix.length-1);i++){
        var n = matrixString.indexOf(' ');
        var number = matrixString.substring(0,n);
        matrix[i] = parseInt(number);
        matrixString = matrixString.substring(n+1);
        }   
        matrix[matrix.length-1] = parseInt(matrixString);
        iterations = parseInt(document.getElementById('iterations').value);
       
        var table = document.getElementById('table');
        var header= table.getElementsByTagName('thead')[0];
        var tr = document.createElement('tr');
        var th = document.createElement('th');
       
        tr.appendChild(th);
        th = document.createElement('th');
        tr.appendChild(th);
        th = document.createElement('th');
        th.colSpan = columns;
        th.innerHTML = 'B';
        tr.appendChild(th);
        header.appendChild(tr);
       
        var tr1 = document.createElement('tr');
        th = document.createElement('th');
        tr1.appendChild(th);
        th = document.createElement('th');
        tr1.appendChild(th);
        for(i=0;i<columns;i++){
        var th = document.createElement('th');
        th.innerHTML = i+1;
        tr1.appendChild(th);
        header.appendChild(tr1);
        }
       
        var body = table.getElementsByTagName('tbody')[0];
        tr = document.createElement('tr');
        var td = document.createElement('td');
        td.rowSpan = rows;
        td.innerHTML = 'A';
        td.style.fontWeight = 'bold';
        tr.appendChild(td);
        td = document.createElement('td');
        td.innerHTML = 1;
        td.style.fontWeight = 'bold';
        tr.appendChild(td);
        for(i=0;i<columns;i++){
        td = document.createElement('td');
        td.innerHTML =  matrix[0*columns+i];
        tr.appendChild(td);
        }
        body.appendChild(tr);
       
        var j;
        for(i=1;i<rows;i++){
        tr = document.createElement('tr');
        td = document.createElement('td');
        td.innerHTML = i+1;
        td.style.fontWeight = 'bold';
        tr.appendChild(td);
            for(j=0;j<columns;j++){
            td = document.createElement('td');
            td.innerHTML =  matrix[i*columns+j];
            tr.appendChild(td);
            }
        body.appendChild(tr);
        }
        return true;
    }
    
    function main(){
        readData();
        solveGame();
        return true;
    }
    
     
  6. gnox

    gnox Miembro maestro

    Registro:
    3 Ene 2013
    Mensajes:
    792
    Likes:
    252
    antes de los appendchilds pon el codigo que puse ... ni siquiera lo usastes . ¬¬.

    PHP:
    var nodo document.getElementById("game");
    nodo.innerHTML ='';
    document.getElementById('game').appendChild(p);
     
    Última edición: 28 Jun 2015
  7. joel094

    joel094 Miembro frecuente

    Registro:
    14 Oct 2012
    Mensajes:
    213
    Likes:
    7
    si lo eh probado pero no da, cuando hago eso solo me muestra la respuesta de el jugador B
     
  8. gnox

    gnox Miembro maestro

    Registro:
    3 Ene 2013
    Mensajes:
    792
    Likes:
    252
    pues ya no se entiende lo que quieres :
    - primero pediste como borrar parte de pantalla osea un elemento html .. el innerhtml = '' hace eso.
    - despues que te borra todo
    - ahora que muestra respuesta de un jugador, como si supieramos que es un juego y estamos mirando tu pantalla.

    creo que debes primero fijarte que es lo que realmente quieres y recien ahi crear un tema .

    PD. aparte que tu codigo esta mal porque usas el mismo elemento para distintos arreglos .
     
    Última edición: 28 Jun 2015
  9. AiApaec

    AiApaec Miembro frecuente

    Registro:
    1 May 2014
    Mensajes:
    58
    Likes:
    14
    mmm, no hay division por cero, un lapsus mio, confundí 'iterations' con 'i'...bien, dices que lo que te pasa ahora es es que escribe el rsultado nuevo debajo del anterior, pero eso es precisamente lo que hace la función appendChild(), las funciones append hacen eso, si quieres que lo anterior se borre de manera que quedo solo el nuevo resultado entonces tienes que ubicar (getElementBy...) el elemento agregado anteriormente y removerlo o "caerle encima". En la función ShowResult agregas HTML dos veces, una para A y otra para B:
    PHP:
    /* A: */
    document.getElementById('description').appendChild(p);

    /* B : */
    document.getElementById('description').appendChild(p);
    Para B està bien el appendChild() porque es lo que quieres agregar despuès de A, entonces quedarìa así ("cayèndole encima"):
    PHP:
    /* A: */
    document.getElementById('description').innerHTML p.innerHTML/*reeemplaza el html */

    /* B : */
    document.getElementById('description').appendChild(p);
    Como aquí: https://jsfiddle.net/7ebeq3Lo/

    ...aunque todavía tienes problemas con las tablas, se siguen repitiendo por cada clic...tendrìas que elimnar los nodos hijos creados de thead y tbody para meter los nuevos...
     
  10. joel094

    joel094 Miembro frecuente

    Registro:
    14 Oct 2012
    Mensajes:
    213
    Likes:
    7

    aquí el código de el diseño

    HTML:
    <html>
    <head>
        <title>Zero-sum Game Solver</title>
        <link rel="stylesheet" type="text/css" href="ZerosumGame.css">
    </head>
    <body id="body">
        <h1>Juego de soluciones</h1>
        <div id="game">
        <p>Numero de Filas: </p> <input type="text" size="50" id="rows"/>
        <p>Numero de Columnas:</p> <input type="text" size="50" id="columns"/>
        <p>Ingrese la Matriz:</p><input type="text" size="50" id ="matrix"/>
        <p>Numero de iteraciones:</p><input type="text" size="50" id ="iterations"/>
        <BR><BR>
        <button type="button"  onclick ="main()"> Resolver </button>
        <BR><BR>
       </div>
       <div id = "description">
         <table id="table">
            <thead>
           
            </thead>
            <tbody>
           
            </tbody>
        </table>
        <table>
       
        </table>
        <table>
        </table>
       </div>
        <script src="ZerosumGame.js" ></script>
    </body>
    </html>