onclick Událost

❮ Předchozí Reference událostí další ❯

Příklad

Po kliknutí na tlačítko spusťte JavaScript:

<button onclick="myFunction()">Click me</button>

Definice a použití

K onclickudálosti dojde, když uživatel klikne na prvek.

V HTML:

<element onclick="myScript">

V JavaScriptu:

object.onclick = function(){myScript};

V JavaScriptu pomocí metody addEventListener():

object.addEventListener("click", myScript);

Technické údaje

bubliny:	Ano
Zrušitelné:	Ano
Typ události:	MouseEvent
Podporované HTML tagy:	Všechny s výjimkou: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> a <title>

Další příklady

Kliknutím na <tlačítko> zobrazíte datum:

Kliknutím na prvek <h3> změníte barvu textu:

<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>

<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>

Další příklad, jak změnit barvu prvku:

<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>

<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>

Kliknutím zkopírujete text z jednoho vstupního pole do druhého:

<button onclick="myFunction()">Copy Text</button>

<script>
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>

Jak přiřadit událost "onclick" objektu okna:

window.onclick = myFunction;

function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}

Pomocí onclick vytvořte rozbalovací nabídku:

document.getElementById("myBtn").onclick = function() {myFunction()};

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}