R. Pülsinger R. Pülsinger - 22 days ago 7
Javascript Question

jQuery/javaScript click-Event doesn't work

it's may be easy as breathing but I just dont see the mistake in my code...

I try to add an click-Event to a div with an unique ID but it does not work at all. Neither with jQuery or javaScript.

Code:

$("#btnF5").click(function () {
alert("Handler for test1 called.");
});

document.getElementById("btnF5").addEventListener("click", myFunction);

function myFunction () {
alert("Handler for test2 called.");
}


JSFiddle:
https://jsfiddle.net/ckom0pbo/

Sorry if I am just dumb at this point.

Greetings

Answer

Note 2 points-

  1. Add jquery library first

  2. Wrap your all code into ready function Ready function

$(document).ready(function(){
$("#btnF5").click(function () {
    alert("Handler for test1 called.");
});
document.getElementById("btnF5").addEventListener("click", myFunction);

function myFunction () {
    alert("Handler for test2 called.");
}
})
div{
  width: 100px;
  border: 1px solid;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="container col-md-12 col-lg-12 fkey-container-12">
            <div class="col-md-4 col-lg-4 fkey-container-4">
                        <div class="btn btn-default btn-gevau btn-fkey2" id="btnF1" data-url="">Hilfe</div>
                        <div class="btn btn-default btn-gevau btn-fkey2" id="btnF2">&nbsp;</div>
                        <div class="btn btn-default btn-gevau btn-fkey2" id="btnF3">&nbsp;</div>
                        <div class="btn btn-default btn-gevau btn-fkey2" id="btnF4">&nbsp;</div>
            </div>
            <br />
            <div class="col-md-4 col-lg-4 fkey-container-4">
                        <div class="btn btn-default btn-gevau btn-fkey2" id="btnF5" data-url="">Start</div>
                        <div class="btn btn-default btn-gevau btn-fkey2" id="btnF6">&nbsp;</div>
                        <div class="btn btn-default btn-gevau btn-fkey2" id="btnF7">&nbsp;</div>
                        <div class="btn btn-default btn-gevau btn-fkey2" id="btnF8">&nbsp;</div>
            </div>
            <br />
            <div class="col-md-4 col-lg-4 fkey-container-4">
                        <div class="btn btn-default btn-gevau btn-fkey2" id="btnF9">&nbsp;</div>
                        <div class="btn btn-default btn-gevau btn-fkey2" id="btnF10">&nbsp;</div>
                        <div class="btn btn-default btn-gevau btn-fkey2" id="btnF11">&nbsp;</div>
                        <div class="btn btn-default btn-gevau btn-fkey2" id="btnF12" data-url="">Ende</div>
            </div>
    </div>
</nav>