My project is experiencing issues with the execution of JavaScript codes

Greetings, I'm having trouble with my JavaScript codes. The following code works perfectly:

function Choice() {
    var box = document.getElementById('searchh');

    if (!count) {
        var count = 0;
    }

    box.onclick = function () {
        count++;
        if (count == 1) {
           box.style.backgroundColor = "red";
       }
        else if (count == 2) {
            box.style.backgroundColor = "green";
        }
       else if (count == 3) {
            box.style.backgroundColor = "yellow";
       }
        else {
           count = 0;
           box.style.backgroundColor = "transparent";
       }
   }

}

However, this code doesn't work:

$(document).ready(function () {
              $(".divsec").on("click", function () {
                  $(this).css("background", "red");
              });
          });

Here are my HTML codes:

<%@ Page Title="" Language="C#" MasterPageFile="~/PersonelMaster.master" AutoEventWireup="true" CodeFile="temsilci.aspx.cs" Inherits="temsilci" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <title>Welcome Representative</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
      <link href="css/fontawesome.min.css" rel="stylesheet" type="text/css" />
      <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
      <link href="css/Main.css" rel="stylesheet" type="text/css" />
      <script src="js/Main.js" type="text/javascript"></script>  
      <script language=javascript>
          $(document).ready(function () {
              $(".divsec").on("click", function () {
                  $(this).css("background", "red");
              });
          });
      </script>

</head>
<body>
<asp:Repeater ID="rp_Temsilci_isler" runat="server">
        <HeaderTemplate>
        <table id="temsilciheader" class="temsilcitable table-hover table-condensed" border="1" width="1000px">
            <tr class="headerturuncu">
                <td><div onclick="sortTable(0)"></div></td>
                <td><div class="markadiv">Brand<div class="arrow" onclick="sortTable(1)"></div></div></td>
                <td><div class="markadiv">Job Name<div class="arrow" onclick="sortTable(2)"></div></div></td>
                <td><div class="markadiv">Status<div class="arrow" onclick="sortTable(3)"></div></div></td>
                <td><div class="markadiv">Delivery Date<div class="arrow" onclick="sortTable(4)"></div></div></td>
                <td><div class="markadiv">Deadline<div class="arrow" onclick="sortTable(5)"></div></div></td>
                <td><div class="markadiv">Brand Representative<div class="arrow" onclick="sortTable(6)"></div></div></td>
                <td><div class="markadiv">Agency Representative<div class="arrow" onclick="sortTable(7)"></div></div></td>
                <td><div class="markadiv">Responsible Persons<div class="arrow" onclick="sortTable(8)"></div></div></td>
            </tr>
        </HeaderTemplate>
        <ItemTemplate>

            <tr>
                 <td> <div id="searchh"  class="divsec"></div> </td>
                 <td> <div class="job_definition"><%#Eval("job_definition") %></div></td>
                 <td> <div class="job_definition"><%#Eval("job_name") %></div> </td>   
                 <td> <div class="job_definition"><%#Eval("job_status") %></div> </td>   
                 <td> <div class="job_definition"><%#Eval("delivery_date") %></div> </td>
                 <td> <div class="job_definition"><%#Eval("deadline") %></div> </td>
                 <td> <div class="job_definition"><%#Eval("brand_representative") %></div> </td>
                 <td> <div class="job_definition"><%#Eval("agency_representative") %></div> </td>
                 <td> <div class="job_definition"><%#Eval("revision") %></div> </td>
            </tr>                    
        </ItemTemplate>
        <FooterTemplate>
        </table>
        </FooterTemplate>
        </asp:Repeater>

And here is my CSS:

.divsec
{
    background:white;
    height:15px;
    width:15px;
    border:1px solid #ffcb31;
}

Answer №1

To enhance your code, include the following script before declaring it:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9c3d8dcccdbd0e99a879a8798">[email protected]</a>/dist/jquery.min.js"></script>
$(document).ready(function () { $(".divsec").on("click", function () { $(this).css("background", "red"); }); });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize JavaScript to establish an object with key and value pairings

Wanting to loop through and create an object that contains key => [value], if the key already exists, simply add the value. Here is what I have tried so far: let dataName = []; let obj = {}; checkboxes.forEach(checkbox => { if (checkbox.che ...

Having trouble displaying the time in the middle square when pressing TouchableOpacity in React Native?

Having trouble pressing the TouchableOpacity button as it's not responding, and even after pressing it, I need to access the time picker to select a specific time to display inside the square view in the center. Any suggestions on how to resolve this ...

finding the node version in a code repository

Is it possible to determine the targeted node version (4 or 6) of a Node.js application by examining its code? I'm currently reviewing this: https://github.com/jorditost/node-postgres-restapi ...

The flex reverse-column child's text selection occurred in the incorrect direction

I am having an issue with selecting text in a flex container that is set to reverse column. The selection I make is incorrect because the browser tries to select from the end of the element, resulting in improper selection. For example, <div style=" ...

Tips on displaying JSON data in the browser console using console.log for API consumption

I'm having trouble creating an api to output data parsed from an xml file. When I console.log the necessary data, it shows up fine, but when I try to display it in the browser, I only get an empty array. Any suggestions on what could be causing this i ...

Click event not triggering to update image

I'm currently working on a Codepen project where I want to use JavaScript to change the image of an element with the id "chrome". However, my code doesn't seem to be working as expected. Can someone help me troubleshoot and fix this issue? Your a ...

What is the reason behind the sorting of sets in jQuery when using the .add() method?

Recently, I encountered an issue while adding multiple DOM objects (SVG elements) totaling around 3000 to an empty jQuery set using the .add() method. The process was taking an unexpectedly long time, causing the UI to freeze while the JavaScript code wa ...

What is the best way to style only textboxes with CSS without affecting other input types such as checkboxes?

If attribute selectors were universally supported by all browsers, we could effortlessly implement the following styling: input[type='text'] { font:bold 0.8em 'courier new',courier,monospace; } input[type='radio'] { margin:0 ...

contrasting module export approaches

Let me clarify that my query does not revolve around the disparity between module.exports and exports. Instead, I am interested in understanding the contrast between exporting a function that generates an object containing the functions to be shared upon i ...

Chrome timing out when sending an express post request

I am a beginner in API development and encountering an issue with a post request timing out in Chrome. The error message I keep receiving is net::ERR_EMPTY_RESPONSE. I have included my JavaScript code below where I am attempting to send data to the API. Th ...

How to deactivate a text box within a form that is dynamically generated using Angular

I have encountered an issue with disabling the textbox inside my dynamic form in AngularJS after clicking a button. My code works perfectly fine for disabling textboxes outside the dynamic form, but when I try to target the ID of the textbox within the dyn ...

Utilizing Jquery on the client side in conjunction with a Node.js server

I am using nodejs within a docker-compose container to create a local web app. My goal is to use jquery on the client-side to load an HTML file into a div, but I'm encountering issues with it not working properly. Both the initial index.html and the n ...

Bootstrap component malfunctioning and not performing as expected

Currently, I am learning how to use Bootstrap and attempting to replicate the example themes found on their official website. The specific theme I am focusing on is available at this link: https://getbootstrap.com/docs/4.3/examples/pricing/ Unfortunately, ...

jQuery carousel displaying a blank slide at the conclusion

I am experiencing an issue with my slideshow where it shows an empty slide after the last element. I suspect that there is something in my script causing this behavior, as it seems to be finding one extra child for the element and adding it as an empty spa ...

Automatically Resizing an iFrame Height Upon Submit Button Click

Currently, I am facing an issue with a form that generates an iFrame for the Payment section. While the height of the iFrame is set correctly, whenever there are errors in the form submission and error messages appear, they push the submit button below t ...

Is there a specific event in Angular.js that triggers when the $scope digest cycle is completed or when the view is refreshed?

Currently, I am making an AJAX request to retrieve data that is needed in the view to generate a list. My goal is to determine when the $scope has been updated and when the view has finished rendering after receiving a successful response. This will allow ...

Use the same CSS style for various attribute selectors

Is there a way to simultaneously apply the following style to a type="submit" without having to repeat the entire block of code? input[type="button"] { width: 120px; margin-left: 35px; display: block; } ...

Calculate the time difference between time A and time B using DayJs

This is a common issue, but the unique aspect of this situation is as follows: I am attempting to calculate the hours between 12:00 (timeA) and 20:00 (timeB). A basic dayjs(timeA).diff(timeB, 'hours') yields 8 hours. The challenge arises when c ...

At times, the Kendo UI Tooltip may linger on screen longer than expected, failing to disappear as

I've been experimenting with this issue for quite some time now, but I'm stumped. Whenever I quickly move my mouse cursor over a series of links, occasionally a tooltip will linger on the screen even after the cursor has moved away from the link. ...

The Kendo UI Date Selection Tool

I have been facing an issue with my datepicker in kendo UI. When I click on the input field, the datepicker does not appear. Can someone please provide guidance on how to properly call kendo datepicker() in my .aspx page? Here is my code: <scrip ...