Klicken Sie auf eine Schaltfläche in JavaScript

Question

So weit ich das aus meinem sehr begrenzten Wissen über JavaScript sagen kann, kann es alle möglichen Informationen über einige Elemente auf der Seite erhalten, zum Beispiel über einen Button. JavaScript kann den Namen eines Buttons, seinen Typ, Namen und den Text darin abrufen. Es kann sogar einen Button deaktivieren. Aber kann es einen Klick auf einen Button simulieren? Oder kann das nur von einem Benutzer gemacht werden?

EDIT 1 (meine Antwort auf die unten stehende Antwort von Narxx):

Diese Methode scheint nicht zu funktionieren:

document.getElementById('my-button').click();

Wie spät ist es?

EDIT 2 (meine Antwort auf den unten stehenden Kommentar von prash)

Diese Methode funktioniert auch nicht (die simulate-Funktion wurde von kangas geschrieben, modifiziert von TweeZz und von mir von hier übernommen):

function simulate(element, eventName)
{
    var options = extend(defaultOptions, arguments[2] || {});
    var oEvent, eventType = null;

    for (var name in eventMatchers)
    {
        if (eventMatchers[name].test(eventName)) { eventType = name; break; }
    }

    if (!eventType)
        throw new SyntaxError('Nur HTMLEvents und MouseEvents-Schnittstellen werden unterstützt');

    if (document.createEvent)
    {
        oEvent = document.createEvent(eventType);
        if (eventType == 'HTMLEvents')
        {
            oEvent.initEvent(eventName, options.bubbles, options.cancelable);
        }
        else
        {
            oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
            options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
            options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
        }
        element.dispatchEvent(oEvent);
    }
    else
    {
        options.clientX = options.pointerX;
        options.clientY = options.pointerY;
        var evt = document.createEventObject();
        oEvent = extend(evt, options);
        element.fireEvent('on' + eventName, oEvent);
    }
    return element;
}

function extend(destination, source) {
    for (var property in source)
      destination[property] = source[property];
    return destination;
}

var eventMatchers = {
    'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
    'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/
}
var defaultOptions = {
    pointerX: 0,
    pointerY: 0,
    button: 0,
    ctrlKey: false,
    altKey: false,
    shiftKey: false,
    metaKey: false,
    bubbles: true,
    cancelable: true
}
simulate(document.getElementById("btn"), "click");

Wie spät ist es?

EDIT 3: (meine Antwort auf die unten stehende Antwort von Jonco98):

(Dieser Code ist auch die Antwort auf meine Frage)

function ClickButton()
{
document.getElementById('my-button').click();
}

Wie spät ist es?

EDIT 4:

Bitte beachten Sie, dass die unten stehende Antwort von naomik auch mein Problem perfekt löst.

Answer 1

Ich würde empfehlen, dies unauffällig zu tun.

Wie spät ist es?

  var b = document.getElementById("my-button");

  function displayTime(elem) {
    elem.innerHTML = Date();
  }

  b.addEventListener("click", function(event) {
    displayTime(this);
  });

  // Klick simulieren
  b.dispatchEvent(new Event("click"));

jsfiddle Demo

Der Button lädt und wird sofort mit dem simulierten Ereignis "angeklickt". Nachfolgende Klicks führen dazu, dass die Zeit auf dem Button aktualisiert wird.

---

Hier ist ein weiteres Beispiel:

Die Zeit wird aufhören sich zu aktualisieren, nachdem Sie auf Absenden klicken

  var f = document.getElementById("my-form");

  function updateTime() {
    f.time.value = Date();
  }

  var interval = setInterval(updateTime, 1000);

  f.addEventListener("submit", function(event) {
    clearInterval(interval);  
    alert("Die übermittelte Zeit ist: " + f.time.value);
    event.preventDefault();
  });

  // Formular vorbefüllen
  updateTime();

---

Referenzen

• EventTarget.addEventListener
• EventTarget.dispatchEvent
• EventTarget.removeEventListener

Answer 2

Ja, Sie können einen Klick auf einen Button mit JavaScript simulieren:
HTML:

Klicke mich

JS:

document.getElementById('my-button').click();

Das war's... Sie haben gerade ein Klick-Ereignis auf einen Button ausgelöst, ohne ihn tatsächlich zu klicken :)

Answer 3

Gut, dies ist nicht als alternative Antwort gemeint. Die Antwort ist bereits da, wie von @naomik vorgeschlagen, und dem stimme ich zu.

Lassen Sie mich auf das Problem hinweisen, mit dem der OP konfrontiert war und unklar ist, warum sein tatsächlicher Code nicht funktioniert hat.

Tatsächlicher Code:

         document.getElementById('my-button').click();

      Wie spät ist es?

Der einfache Grund, warum dies das Ereignis nicht ausgelöst hat, ist, dass das zu diesem Zeitpunkt nicht gezeichnet war, und Sie hätten diesen Fehler in Ihrer Konsole erhalten: Cannot read property 'click' of null

In dem ersten Beispiel, das @naomik geteilt hat, scheint dies jedoch zu funktionieren. Der Grund dafür ist der Ort, an dem das </code> ausgeführt wird. Es befindet sich nicht im <code><head></code>, sondern im <code><body></code>, und das <code><button></code> wird zuerst gezeichnet, bevor das Skript ausgeführt wird.</p> <p>Dies ist gut,</p> <pre><code><html> <head></head> <body> <button id="my-button" onclick="this.innerHTML=Date()">Wie spät ist es?</button> <script type="text/javascript"> document.getElementById('my-button').click();

Abgesehen davon ist es ratsam, dies über dispatchEvent() und addEventListener() zu machen, um das Ereignis zu simulieren und darauf zu hören.