[RESOLVED]Unrecognized JS function

I’m getting an error on the button control – Shuffle not found. Can you help? Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        //document.getElementById("text").value = "5";
       // document.getElementById("demo").innerHTML = "Hello JavaScript!";
       // var gameOver; var cardCount;
        function Shuffle(max) {
            var num = Math.random() * max;
            return Math.round(num) + 1;
        }

    </script>
</head>

<body>
    <form id="form1" runat="server">
    <asp:Button ID="Button1" runat="server" onclick= "Shuffle(DropDownList.Value)" Text="Button" />
    <asp:textbox id="text" runat="server"></asp:textbox>
    <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
    <div id = "demo">
    
    </div>
    </form>
</body>
</html>

OnClick calls server side code. Use OnClientClick

There are a few possible things that you might want to consider doing :

  • Place your <script> tag following your actual elements and just prior to your closing <body> tag. This will ensure that your script can be accessed by any of your elements without issue.
  • Change the onclick event that you are using on your button to the OnClientClick event instead (which is explicitly for targeting Javascript events).
  • You may want to adjust how you are passing your parameters as your value may not be being passed properly. What you may want to do is pass in the ID of your DropDownList and then access it via Javascript within your Shuffle function.

Using these changes, your code might look like the following :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <!-- Notice the change to use OnClientClick instead of onclick -->
    <asp:Button ID="Button1" runat="server" OnClientClick= "Shuffle('DropDownList1')" Text="Button" />
    <asp:textbox id="text" runat="server"></asp:textbox>
    <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
    <div id = "demo">
    
    </div>
    </form>
    <!-- Define your Script tag prior to your closing <body> tag -->
    <script type="text/javascript">
        function Shuffle(list) {
            // Grab your DropDownList value and parse it as an integer
            var dropDownList = parseInt(document.getElementById(list).value);
            var num = Math.random() * max;
            return Math.round(num) + 1;
        }
    </script>
</body>
</html>

Hi davelewicki,

According to your description and your code , I think you may change the onclick event to onclientclick event .

 <asp:Button ID="Button1" runat="server" onclick= "Shuffle(DropDownList.Value)" Text="Button" />

From above code , I know you want to get the value of dropdownlist . So you’d better get the value by JSDOM.

Although I agree with Mr.Williams,  you may modify  your code as below:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebTest3.aspx.cs" Inherits="WebApplication_test.WebTest3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <script type="text/javascript">
            function Shuffle() {
                var max = document.getElementById("DropDownList1").value;
                var num = Math.random() * max;
                return Math.round(num) + 1;
            }

     </script>
</head>
<body>
    <form id="form1" runat="server">
     <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="Shuffle()" />
     <asp:textbox id="text" runat="server" Text=""></asp:textbox>
     <asp:DropDownList ID="DropDownList1" runat="server">
         <asp:ListItem>1</asp:ListItem>
         <asp:ListItem>2</asp:ListItem>
         <asp:ListItem>3</asp:ListItem>
        </asp:DropDownList>
    <div>

    </div>
    </form>
</body>
</html>

 

Best regards,

aswecan

Leave a Reply