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;
}