CODEWITHSUNDEEP
javascripthtml
Ajay Verma
Ajay Verma

Reputation: 564

Input button click event not firing in HTML

I don't know why my code is not executing. I am simply assigning textbox value to paragraph's innerHTML on button click.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Error handling</title>
    <script>
        $(document).ready(function () {
            $("btnName").click(function () {
                var x = document.getElementById("Demo");
                x.innerHTML = document.getElementById("txtName").value;
                alert("Done");
            });
        });
    </script>
</head>
<body>
    <input id="txtName" type="text" />
    <br />
    <input id="btnName" type="button" value="Try It" />
    <p id="Demo"></p>
</body>
</html>

Upvotes: 1

Views: 3014

Answers (6)

Mike Volmar
Mike Volmar

Reputation: 2093

I know this is an old question with an accepted answer but I stumbled upon it when I encountered a button click event not firing which used to work. We switched our site from html 4 to html 5 and it caused some issues so I think this one is related. The button ID was "MakeInvoice" and I changed it to "MakeInvoiceBtn" and it started working again so I think there was an ID conflict that html 5 would not forgive but the earlier html we used was ok with.

Upvotes: 0

Vijay
Vijay

Reputation: 8451

try out this...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Error handling</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            $("#btnName").click(function () {
                var x = document.getElementById("Demo");
                x.innerHTML = document.getElementById("txtName").value;
                alert("Done");
            });
        });
    </script>
</head>
<body>
    <input id="txtName" type="text" />
    <br />
    <input id="btnName" type="button" value="Try It" />
    <p id="Demo"></p>
</body>
</html>

Upvotes: 0

Vincent Duprez
Vincent Duprez

Reputation: 3892

Should be 

$("#btnName");

instead of 

$("btnName");

By the way, you can use Jquery all the long: 

$('#Demo').html($('#txtName').val());

Upvotes: 0

Mufeed Ahmad
Mufeed Ahmad

Reputation: 485

hope this helps:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Error handling</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script>
    $(document).ready(function () {
        $("#btnName").click(function () {
            var x = document.getElementById("Demo");
            x.innerHTML = document.getElementById("txtName").value;
            alert("Done");
        });
    });
    </script>
</head>
<body>
<input id="txtName" type="text" />
<br />
<input id="btnName" type="button" value="Try It" />
<p id="Demo"></p>
</body>
</html>

Upvotes: 0

Nev
Nev

Reputation: 1568

This line:

$("btnName").click(function () {

Should be:

$("#btnName").click(function () {

See fiddle.

Also you need to import the jQuery Library (in the <head> tag):

<script src="path/to/jquery.js"></script>

Upvotes: 1

DMKE
DMKE

Reputation: 4603

jQuery takes CSS-like selectors to find and manipulate elements.

Your code should read like this:

$(document).ready(function() {
  $('#btnName').click(...)
})

Upvotes: 2

Related Questions