I'm trying to trigger a JQuery function when you click on a div (i've tried making it a button as well) to no avail. Google Chrome Inspector does not even recognize an event handler being created behind the scenes.
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">;
<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id = "main" style = "width: 500px; height: 500px; background-color: black; color: white;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius aliquam nobis optio ut ratione a eligendi excepturi cumque est commodi? Sed, odit, culpa deserunt distinctio at commodi modi architecto aliquam.
</div>
<button class = "button" href="#" style = "width: 50px; height: 50px; background-color: black;"></button>
<script type = "text/javacsript">
$(document).ready(function(){
$(".button").click(function(){
$("main").val("IT WORKED");
});
};
</script>
</html>
You forgot to use #
for id selector, also use text()
or html()
instead of val() for div
and you also missed the closing parenthesis of document.ready
.
$(document).ready(function(){
$(".button").click(function(){
$("#main").text("IT WORKED");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.