La manipulation “onclick” événement avec JavaScript

Donc, c'est vraiment simple, mais je suis encore assez nouveau pour JavaScript et juste trouvé JSFiddle. J'essaie de trouver l'élément avec la getElementById() pour activer et désactiver un bouton. Ce qui me manque?

<form name="frm" > 
  <div id="chkObj"> 
    <input type="checkbox" name="setChkBx" onclick="basicList.modifyAndEnableButton(this)"></input>        
</div>
<div id="Hello"> 
    <input type="button" name="btn" value="Hello"></input>        
</div>


C'est une liste que j'utilise pour ajouter des cases à cocher, car il va y avoir plus d'un:

 var basicList = {
    'items': {},
    'modifyAndEnableButton': function(obj1) {
        var element = document.getElementsByName("btn");
        if (obj1.checked == true && element.getAttribute('disabled') == false) {
            element.getAttribute('disabled') = true;
            this.addRecord(obj2);
        } else if (element.getAttribute('disabled') == true) {
            if (hasItems == false) {
                element.getAttribute('disabled') = false;
            }
        } 
    }
};

http://jsfiddle.net/Arandolph0/E9zvc/3/

Merci d'avance pour votre aide.

  • Pour downvoters, considérer qu'actuellement, la recherche Google pour JavaScript cliquez meilleurs résultats sont pour w3schools et jQuery. Je discuter de cette méta - here.
  • OP, si j'étais vous, je voudrais revenir à votre modifier. Il rend votre problème beaucoup plus précis et beaucoup moins applicable à l'audience générale, en outre, il contient beaucoup d'erreurs de syntaxe que vous devriez probablement regarder dans et le type de ruines certaines d'entre elles.
  • la dose de chaque case comporte un bouton qui lui est associé?
  • Pas de. Désolé pour tous les montages que j'ai réalisé après que j'ai posté que jsfiddle n'ai pas sauvegarder mes changements et que le code qui a été modifiée. Veuillez ignorer.
  • Auriez-vous l'esprit si je revenir à l'original de l'édition que je trouve plus utile et plus généralement applicables (et généralement une meilleure question)?
  • Quel est le rush bouton censé faire?
  • Donc, il est censé agir comme un robinet... la case est cochée et que le bouton est activé, la case est décochée et que le bouton est désactivé.
  • Par la façon dont l'original n'a pas demandé assez pour spécifier les fonctionnalités des préoccupations qui sont ce qui doit être abordé.
  • Essayez ceci... jsfiddle.net/GKDev/Tpbdd Si je vous ai bien compris, ce qu'il est, que vous voulez...
  • Merci. Est - 'e.cible.coché' est que jquery? Je n'ai pas vu ça avant.
  • Vous êtes les bienvenus!
  • Non, vérifié, c'est juste attribut html. developer.mozilla.org/en-US/docs/XUL/checkbox

InformationsquelleAutor April_Nara | 2013-07-13
  1. 56

    Tous les navigateurs prennent en charge cette (voir exemple ici):

    mySelectedElement.onclick = function(e){
    //your handler here
}

    Cependant, parfois, vous voulez ajouter un gestionnaire (et ne modifie pas le même), et, plus généralement, lorsque disponible, vous devez utiliser addEventListener (besoins cale pour IE8-)

    mySelectedElement.addEventListener("click",function(e){
   //your handler here
},false);

    Ici est un exemple:

    var button = document.getElementById("myButton");
button.addEventListener("click",function(e){
    button.disabled = "true";
},false);

    Et html:

    <button id='myButton'>Hello</button>

    (fiddle)

    Voici quelques ressources utiles:

    InformationsquelleAutor Benjamin Gruenbaum
  2. 4

    Benjamin en réponse couvre tout assez. Cependant, vous avez besoin d'un modèle de délégation pour gérer les événements sur les éléments qui ont été ajoutés dynamiquement puis

    document.addEventListener("click", function (e) {
    if (e.target.id == "abc") {
        alert("Clicked");
    }
});

    Pour IE7/IE8

    document.attachEvent('onclick', function (e) {
    if (window.event.srcElement == "abc") {
        alert("Clicked");
    }
});
    • Partage de la Connaissance 🙂 j'essaie de défenseur de la délégation de sorte que les gens ne viennent pas à travers ces cauchemars sur le pourquoi d'un événement n'est pas de travail. Personnellement cela m'est arrivé jusqu'à ce que je savais à ce sujet. Est-il rien de mauvais à propos de la délégation?
    • dans la méthode addEventListener vous devriez changer e.srcElement.id à e.target.id et attachEvent e.srcElement.id à window.event.srcElement.id
    • Merci mais ils ont tous travaillé dans tous les navigateurs. (Les dernières Versions, plus IE 10 dans IE7/8 mode)
    • Gotcha! MDN dit cet événement.la cible est l'élément d'origine de l'événement est arrivé. Toutefois, Internet Explorer appelle événement.srcElement. En fait, google Chrome et Safari en route réglage à la fois. Vous pouvez le faire pour un maximum de compatibilité
    InformationsquelleAutor Atif Mohammed Ameenuddin
  3. 2

    Vous avez un Error ici

    btnRush devrait être Rushbtn

    C'est un exemple de la croix-navigateur de l'événement que je viens de faire (pas testé) )

    var addEvent = function( element, type, callback, bubble ) { //1
    if(document.addEventListener) { //2
        return element.addEventListener( type, callback, bubble || false ); //3
    }
    return element.attachEvent('on' + type, callback ); //4
};



var onEvent = function( element, type, callback, bubble) { //1
    if(document.addEventListener) { //2
        document.addEventListener( type, function( event ){ //3
            if(event.target === element || event.target.id === element) { //5
                callback.apply(event.target, [event]); //6
            }
        }, bubble || false);
    } else {
        document.attachEvent( 'on' + type, function( event ){ //4 
            if(event.srcElement === element || event.srcElement.id === element) { //5
                callback.apply(event.target, [event]); //6
            }
        });
    }

};

    Étapes

    1. Créer une fonction qui accepte les 4 valeurs ( explicites )
    2. Vérifier si le navigateur prend en charge addEventListener
    3. Ajouter un événement sur l'élément
    4. d'autre ajouter un événement sur l'élément pour les anciens IE
    5. Vérifier que le (clic) de l'élément est = à l'élément passé

    6. appeler la fonction de rappel de passer l'élément que ce et de transmettre l'événement

      La onEvent est utilisé pour les cas de délégation.
      Le addEvent est pour votre événement standard.

      voici comment vous pouvez les utiliser

    Les 2 premières sont pour l'ajouter dynamiquement des éléments

    onEvent('rushBtn', 'click', function(){
    alert('click')
});

var rush = document.getElementById('rushBtn');

onEvent(rush, 'click', function(){
    alert('click');
});

//Standard Event
addEvent(rush, 'click', function(){
    alert('click');
});

    Événement Délégation est ça au fond.

    Ajouter un événement de clic sur le document afin que l'événement se déclenche chaque fois qu' & partout où puis vous cochez l'élément qui a été cliqué pour voir si elle correspond à l'élément dont vous avez besoin. de cette manière, il le sera toujours.

    Démo

    InformationsquelleAutor iConnor