Why nothing happens on click on div element?

Question

I write some Javascript code using jQuery that should insert a symbol into one div when you click on another div. Nothing happens.

I used some code to check if jQuery loaded properly and it is.

HTML:

<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<!--<script src="jquery-3.4.1.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="keyboard.js"></script>
<title>Keyboard Test</title>
</head>
<body>
<div class="field"></div>
<div class="key" id="a key"></div>
</body>
</html>

Javascript:

$(".key").click(function(event) {
    $(".field").text="a";
    alarm("asdfsdf");
});

No error messages.

Also tried this:

$(".key").on("click",function() {
    alarm("asdfsdf");
    $(".field").text="a";

});

`id="a key">` is an error. just put one `id` without spaces and take the advice from @FelixKling — Roy Bogado, Nov 05 '19 at 12:32
You are trying to bind the event handler before the element exists. *edit:* ^ that too, the answers in the duplicate cover all these cases. — Felix Kling, Nov 05 '19 at 12:32

score 1 · Accepted Answer · answered Nov 05 '19 at 12:33

wrap your code in document.ready. and you are suing jquery so it shoud be text() function.

$(document).ready(function(){
$(".key").on("click",function() {
    $(".field").text("a");
});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="field"></div>
<div class="key" id="a key">key</div>

Why nothing happens on click on div element?

1 Answers1