1

Tengo una serie de botones con un ID predeterminado:

<input type="button" id="1alfa">
<input type="button" id="1beta">
<input type="button" id="1gamma">
<input type="button" id="1omega">

Tengo una función que se supone debería obtener el ID del botón y añadírselo como mensaje de alerta usando una función onclick.

function botones () {
var elements = document.querySelectorAll("input[type=button]");
for(var i = 0, len = elements.length; i < len; i++) {
    var value = elements[i].id;
    elements[i].onclick = function () {
    var mensaje= "Sistema"+value[i];
    mensaje = mensaje.replace("1","");
    alert(mensaje);
    }
  }
}

El problema me muestra

Sistema:undefined

Como puedo hacer que al pulsar cada boton el muestre su nombre, ejemplo:

Sistema: alfa - Sistema: beta.

1ra NOTA: me falto especificar borrar el 1 que tienen los IDs.

2da NOTA: me falto especificar que quiero la primera letra del Id del botón en mayúscula.

2
  • 3
    var mensaje= "Sistema "+this.id; aunque se podría simplificar un poco más su función.
    – Dev. Joel
    el 23 may. 2017 a las 18:30
  • Victor tu código es casí correcto, usa this.id en lugar de value[i] y asegura llamar tu botones() ,@Victor-Random
    – Jorgesys
    el 23 may. 2017 a las 19:06

3 respuestas 3

4

Debes usar la palabra clave this que apunta al elemento asociado al evento, en tu caso apunta al <input type="button"..> donde se hizo click.

Ejemplo:

var el = document.querySelectorAll("input[type=button]");
el.forEach(function(e) {
 e.onclick = function () {
  var mensaje= "Sistema: "+this.id.replace("1","");
  console.log(mensaje);
 }
});
<input type="button" id="1alfa">
<input type="button" id="1beta">
<input type="button" id="1gamma">
<input type="button" id="1omega">

2
  • No olvidar el replace en su respuesta ;)
    – Dev. Joel
    el 23 may. 2017 a las 19:00
  • 1
    Listo!... Gracias @Dev.Joel!! ;))...
    – fwBasic
    el 23 may. 2017 a las 19:03
3

En cuanto a tu código original me parece que el problema es como se obtiene el id del elemento para mostrar el mensaje, en lugar de value[i] usa this.id , además asegura tu método botones() sea llamado para que agregue los respectivos listener:

function botones() {   
 
 var elements = document.querySelectorAll("input[type=button]");  
  for(var i = 0, len = elements.length; i < len; i++) {
   var value = elements[i].id;
  
   elements[i].onclick = function() {
      var mensaje= "Sistema: "+capitalizeReplaceText(''+this.id);         
      alert(mensaje);
    }
   
  }
 
}

//Reemplaza y convierte primera letra en mayuscula.
function capitalizeReplaceText(texto) {
  texto = texto.replace("1","");    
  return texto.charAt(0).toUpperCase()+ texto.slice(1);
}
<body onload="botones()">
<input type="button" id="1alfa" >
    <input type="button" id="1beta" >
    <input type="button" id="1gamma">
    <input type="button" id="1omega" >


Otra solución sencilla, sería enviar el id al método:

function botones(clicked_id) {
  alert("Sistema: "+ capitalizeReplaceText(''+clicked_id));
}


//Reemplaza y convierte primera letra en mayuscula.
function capitalizeReplaceText(texto) {
  texto = texto.replace("1","");    
  return texto.charAt(0).toUpperCase()+ texto.slice(1);
}
<input type="button" id="1alfa" onclick="botones(this.id);">
<input type="button" id="1beta" onclick="botones(this.id);">
<input type="button" id="1gamma" onclick="botones(this.id);">
<input type="button" id="1omega" onclick="botones(this.id);">


9
  • No olvidar el replace , que el OP especifica .
    – Dev. Joel
    el 23 may. 2017 a las 18:42
  • @Dev.Joel donde amigo?
    – Jorgesys
    el 23 may. 2017 a las 18:43
  • La respuesta es muy buena , pero el op también desea eliminar el 1 al inicio del id clickeado , por eso realiza un replace
    – Dev. Joel
    el 23 may. 2017 a las 18:46
  • 1
    @Victor-Random eres el Over Powered! he editado la respuesta considerando tu código, saludos.
    – Jorgesys
    el 23 may. 2017 a las 19:07
  • 1
    @Jorgesys agrega un espacio ;) **Sistema: Alfa"
    – Dev 200
    el 23 may. 2017 a las 20:00
0
function botones () {
var elements = document.querySelectorAll("input[type=button]");
document.getElementById("registro").value=("Configurando: [Botones de Estado: "+elements.length+"]");
for(var i = 0, len = elements.length; i < len; i++) {
    elements[i].onclick = function () {
    var id= this.id.replace("1"," ");
    var mensaje= "Sistema: "+id;
    alert(id);
    }
}
}
3
  • ¿ Cuál sería el propósito de inicializar dos variables , i y len ? y no directamente en la condición i< elements.length?
    – Dev. Joel
    el 23 may. 2017 a las 18:48
  • @Dev.Joel tenia guardado ese codigo por alli y lo use xD, se ve mas ordenado :)
    – Dev 200
    el 23 may. 2017 a las 18:59
  • Mientras menos código escribas mas fácil sera entenderlo, eso incluye a las variables. ;))...
    – fwBasic
    el 23 may. 2017 a las 19:17

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.