1

Tengo el siguiente código en un formulario, pertenece a una columna de una tabla con datos recogidos de una base de datos MySQL.

echo "<td width=\"08%\" id=\"estado".$row['ID_OBLIGATORIO']."\">" ?>
<!-- Columna ESTADO del usuario. -->
    <center>
    <?php
        $estado = 1;
        echo "<a href='#' onclick='return cambiar_estado(".$row['ID_OBLIGATORIO'].");'\">";
              echo "<img src=\"/imagenes/".$row['estado'].".gif\">";
        echo "</a>";
        ?>
    </center>
    <?php 
echo "</td>";   

Ahora tengo la siguiente función, en la cual haciendo click sobre cada elemento ID de la columna estado de la tabla, pondría una imagen x.gif, o pongamos de serie un texto "Hemos pulsado sobre esta imagen" para probar.

<script language="Javascript">
function cambiar_estado() {
    var img = "";
    var pregunta = confirm("¿Qué deseas elegir?");
    if (pregunta == true) {
        mg = "<center><img src='imagenes/0.gif'/></center>";
    } else {
        tmg = "<center><img src='imagenes/2.gif'/></center>";
    }
    document.getElementById("estado" +id).innerHTML = img;
}
</script>

Lo que quiero es que si de inicio todas las filas (todos los usuarios) tienen el estado=1, me deje clickear para preguntarle: ¿Deseas cambiar el estado=0 o estado=2? Y automáticamente llame a la imagen. Eso ya lo tengo hecho, pero... Edito la pregunta: He leído que no se pueden cambiar las opciones del alert o del confirm() - Cancelar ó Aceptar -, sólo si se usan plugins o jQuery. ¿Es así?


¿Por qué con el siguiente código no me funciona la función? Eso sí, no me da fallos en la consola... qué raro no debe coger el "id".

function cambiar_estado(id) {
    var imagen = "";
    //alert("El ID elegido es: "+id);
    var pregunta = confirm("¿Qué deseas elegir?");
    if (id == '1') {
        if (pregunta == true) {
            imagen = "<center><img src=\"/imagenes/0.gif\"></center>";
        } else {
            imagen = "<center><img src=\"/imagenes/2.gif\"></center>";
    } else if (id == '0') {
        if (pregunta == true) {
            imagen = "<center><img src=\"/imagenes/1.gif\"></center>";
        } else {
            imagen = "<center><img src=\"/imagenes/2.gif\"></center>";
    } else {
            imagen = "<center><img src=\"/imagenes/0.gif\"></center>";
        } else {
            imagen = "<center><img src=\"/imagenes/1.gif\"></center>";
    }
    document.getElementById("estado" +id).innerHTML = imagen;
}
14
  • No veo en tu codigo el elemento que tenga el valor "id" en el atributo id
    – sioesi
    el 16 nov. 2016 a las 12:00
  • El valor es: id=\"estado".$row['ID_OBLIGATORIO']."\">" para cada fila.
    – omaza1990
    el 16 nov. 2016 a las 12:01
  • el comando document.getElementById trae un elemento que tenga la id indicada en id, tienes que poner el valor y no el atributo
    – sioesi
    el 16 nov. 2016 a las 12:01
  • document.getElementById("id").innerHTML = texto; está seleccionando un elemento con id = id, literalmente. Tendrás que pasarle a la función cambiar_estado() el propio objeto de esta manera cambiar_estado(this), para luego acceder a su elemento padre ahí ya tienes el elemento. O simplemente pasarle el texto del estado... En definitiva, no estás seleccionando el elemento que crees estar seleccionando.
    – Muriano
    el 16 nov. 2016 a las 12:02
  • 2
    @sioesi, puede acceder al nodo padre del <a> con this.parentElement, por ejemplo.
    – Muriano
    el 16 nov. 2016 a las 12:05

4 respuestas 4

3

Prueba hacer estos cambios:

  • Pasa por parámetro el ID del registro en la función cambiar_estado

    <?php
    echo "<td width=\"08%\" id=\"estado".$row['ID_OBLIGATORIO']."\">" ?>
    <!-- Columna ESTADO del usuario. -->
        <center>
        <?php
            $estado = 1;
            echo "<a href='#' onclick='return cambiar_estado(".$row['ID_OBLIGATORIO'].");'\">"; // Pasamos el ID
                  echo "<img src=\"/imagenes/".$row['estado'].".gif\">";
            echo "</a>";
        ?>
        </center>
    <?php 
    echo "</td>"; ?>
    
  • Modifica la función javascript cambiar_estado, para que acepte el ID por parametro.

    <script language="Javascript">
    // Recibe ID 
    function cambiar_estado(id) {
        var texto = "";
        var pregunta = confirm("¿Qué deseas elegir?");
        if (pregunta == true) {
            texto = "¡Has presionado OK!";
        } else {
            texto = "¡Has presionado Cancelar!";
        }
    
        // Buscamos el DOMElement con id="estado[ID]"
        document.getElementById("estado" + id).innerHTML = texto;
    }
    </script>
    
4
  • elimino la mia y me quedo con esta respuesta +1
    – sioesi
    el 16 nov. 2016 a las 12:21
  • 2
    @sioesi tu respuesta funcionaba y, aunque pienses que ésta puede ser mejor, la tuya también tiene sus ventajas y puede quedarse como alternativa porque le funcionará a otro usuario. No haría falta borrarla. Hay muchas maneras de hacer lo que OP busca, no hay por qué limitarse a una.
    – Alvaro Montoro
    el 16 nov. 2016 a las 12:24
  • 1
    Ambas funcionaban. Muchas gracias, voy a darle un par de vueltas a la solución, y la intentaré hacer por mi cuenta. Así se aprende, de los errores...
    – omaza1990
    el 16 nov. 2016 a las 12:24
  • @AlvaroMontoro la reabri por si sirve, saludos!
    – sioesi
    el 16 nov. 2016 a las 12:26
1

Lo que tienes que hacer es que el click sea en el <td> para obtener el valor de el atributo id.

<td onclick="cambiar_estado(this);" width=\"08%\" id=\"estado".$row['ID_OBLIGATORIO']."\">

Y la funcion

<script language="Javascript">
function cambiar_estado(row) {
    var texto = "";
    var pregunta = confirm("¿Qué deseas elegir?");
    if (pregunta == true) {
        texto = "¡Has presionado OK!";
    } else {
        texto = "¡Has presionado Cancelar!";
    }
    row.innerHTML = texto;
}
</script>

Y para obtener la id solo basta con row.id

1
  • Una vez que me funciona y lo entendí, edité la pregunta para ver si hay una solución referente a mi nueva pregunta.
    – omaza1990
    el 16 nov. 2016 a las 15:20
0

Has puesto:

document.getElementById("id").innerHTML = texto;

Cuando en realidad necesitas elegir el id al que quieres que afecte:

document.getElementById("ID_AL_QUE_AFECTAR").innerHTML = texto;
0

Te voy a poner una alternativa en la que se evita poner código JavaScript inline (directamente en las etiquetas HTML), algo que es recomendable porque es importante tratar de separar la interfaz de la funcionalidad, y porque si tienes los eventos inline entonces no puedes asociar más de uno.

La idea entonces sería quitar los onclick de las etiquetas a y añadir los controladores de evento con addEventListener en el JavaScript. Otra ventaja de este método es que ya no te tienes por qué preocupar de pasar IDs, puedes utilizar this que en ese contexto será el elemento que se ha pulsado (el a).

El código se vería así:

// lees todos los enlaces que hay dentro de las celdas con id comenzando por "estado"
var enlaces = document.querySelectorAll("td[id^=estado] a");

// para cada uno de esos enlaces
for (let x = 0; x < enlaces.length; x++) {
  
  // añade un controlador del evento click
  enlaces[x].addEventListener("click", function() {
    
    // que realiza todo tu código
    var texto = "";
    var pregunta = confirm("¿Qué deseas elegir?");
    if (pregunta == true) {
      texto = "OK";
    } else {
      texto = "Cancelar";
    }
    
    // puedes usar this para hacer referencia al elemento pulsado
    this.innerHTML = texto;
  });
}
<table>
  <tr>
    <td width="08%" id="estado0">
      <center>
        <a href='#'>
          <img src="/imagenes/1.gif" />
        </a>
      </center>
    </td>
    <td width="08%" id="estado1">
      <center>
        <a href='#'>
          <img src="/imagenes/1.gif" />
        </a>
      </center>
    </td>
    <td width="08%" id="estado2">
      <center>
        <a href='#'>
          <img src="/imagenes/1.gif" />
        </a>
      </center>
    </td>
    <td width="08%" id="estado3">
      <center>
        <a href='#'>
          <img src="/imagenes/1.gif" />
        </a>
      </center>
    </td>
  </tr>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.