What could be causing the <td> onclick event to fail in asp.net?

Having an issue with making a <td> clickable to display a div. Check out my code snippet below:

 <td id="tdmord" style="padding-left: 15px; color: #86A7C5; padding-right: 15px; font-family: Arial;
  font-size: small;" onclick="return showDiv1()">
  My Orders
 </td> 

Here is the corresponding JavaScript function:

function showDiv1() {
        document.getElementById("divmo").style.display = "block";
        return false;
    }

The issue I am encountering is that the <td> element is not responding to clicks as expected.

Answer №1

You forgot to include () when calling the function showDiv1

function showDiv1() {
    document.getElementById("tdmord").style.display = "block";
    return false;
}

Answer №2

It appears that showdiv1 is missing parentheses in your code

To fix this issue, define showdiv1() as shown below:

<script type="text/javascript>
   function showdiv1() {
      document.getElementById("tdmord").style.display = "block";
       alert('s');
       return false; 
}
</script>

Also, ensure that the ID being used in your function showdiv1 is correct and update it if necessary.

Answer №3

Code that works without the need for an extra function.

<table>
    <tr>
        <td onclick="document.getElementById('abc').style.display='block';">change color</td>
    </tr>
</table>
<div id="abc" style="display:none;">       
    pranay       
</div>

JSFiddle Demo


Error in your code, you missed the parentheses. The updated code is:

function showdiv1() {
        document.getElementById("divmo").style.display="block";
        return false;
    }

JSFiddle Demo

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

Unlock the power of AJAX in your WordPress site

I've been exploring the realm of Javascript and AJAX lately. I feel like I'm so close to getting it right, but there's something off with how I'm integrating WordPress ajax functions. I've spent a lot of time going through the docu ...

Is it possible to alter the page color using radio buttons and Vue.js?

How can I implement a feature to allow users to change the page color using radio buttons in Vue.js? This is what I have so far: JavaScript var theme = new Vue({ el: '#theme', data: { picked: '' } }) HTML <div ...

Creating an infinite loop using Jquery's append and setTimeout functions

I'm having trouble displaying my JSON data in a table and refreshing it periodically to check for new entries. Unfortunately, I seem to have gotten stuck in an infinite loop where the setTimeOut function keeps adding old entries. Can anyone help me tr ...

Calculate the time difference in hours using time zone in Javascript

Within my JavaScript object, I have the following information: var dateobj = { date: "2020-12-21 03:31:06.000000", timezone: "Africa/Abidjan", timezone_type: 3 } var date = new Date(); var options = { timeZone: dateobj.timezone }; var curr_date ...

Create various designs for a section of a webpage

My goal is to create a coding playground using flex-box to position different panels. Here is an example in JSBin, with the following html code: <div class="flex-box"> <div class="col" id="html-panel"> <p>html</p> </div& ...

Exploring the functionality of CodePen's code editor in relation to developing a 2D shooting game

Recently, I created a straightforward 2D shooter game with all the code neatly organized in a single HTML file: (file_gist). When I tested the game in my chrome browser, everything worked flawlessly according to my intentions. However, upon transferring th ...

Tips for utilizing New FormData() to convert Array data from an Object for executing the POST request with Axios in ReactJs

When working on the backend, I utilize multer to handle multiple file/image uploads successfully with Postman. However, when trying to implement this in ReactJS on the frontend, I find myself puzzled. Here's a sample case: state = { name: 'pro ...

Error with WooCommerce checkout causing input values to disappear upon clicking or submitting

I am facing an issue where I need to set #billing-postcode to a specific value using a JS script. When I input jQuery('#billing-postcode').val('2222') on the checkout page, the input displays the value 2222 with the Postcode label abov ...

Encountering a "Evaluation Failed" error while scraping YouTube data with Puppeteer and Node.js

As I attempt to scrape the YouTube headline and link from a channel using Puppeteer, I encounter an Evaluation Error presenting the following message: Error: Evaluation failed: TypeError: Cannot read properties of null (reading 'innerText') a ...

What is the Proper Way to Add Inline Comments in JSX Code?

Currently, I am in the process of learning React and I have been experimenting with adding inline comments within JSX. However, when I try to use the regular JavaScript // comments, it leads to a syntax error. Let me share a snippet of my code below: const ...

Vanishing Tooltip following an implementation of the backdrop-filter

I'm having an issue with the blur effect on my background image. Although it works well, my tooltips also end up being blurred behind the divs: https://i.stack.imgur.com/BMdh4.png Is there a way to ensure that my tooltips stay on top of the subseque ...

Modify a property within an object and then emit the entire object as an Observable

I currently have an object structured in the following way: const obj: SomeType = { images: {imageOrder1: imageLink, imageOrder2: imageLink}, imageOrder: [imageOrder1, imageOrder2] } The task at hand is to update each image within the obj.images array ...

`Gradient blending in ChartJS`

Currently, I am facing an issue with my line chart having 2 datasets filled with gradients that overlap, causing a significant color change in the 'bottom' dataset. Check out my Codepen for reference: https://codepen.io/SimeriaIonut/pen/ydjdLz ...

The transfer of variables from AJAX to PHP is not working

My attempt to pass input from JavaScript to PHP using AJAX is not successful. I have included my JS and PHP code below: <!DOCTYPE html> <html> <head> <style> div{border:solid;} div{background-color:blue;} </style> </head&g ...

Utilize Google Sheets to extract information from a web address containing quotation marks

I am currently utilizing a script called "ImportJSON" developed by paulgambill https://gist.github.com/paulgambill/cacd19da95a1421d3164 The URL I am working with contains quotes characters For instance: http://SomeAPIULR?{"Type": "SomeType"}&APIKE ...

Switch the dropdown selection depending on the checkbox status

I'm currently facing a bit of confusion with my project. I am constrained by an existing framework and need to come up with a workaround. To simplify, I am tasked with populating a dropdown list based on the selected checkboxes. I have managed to get ...

Sending KeyValuePair or IDictionary as payload to Web Api Controller using JavaScript

In my web api controller, I am trying to post two parameters: a flat int ID and an IDictionary (or similar equivalent). [HttpPost] public void DoStuff(int id, [FromBody]IDictionary<int, int> things) { } var things = new Array(); things.push({ 1: 10 ...

Tips for managing open and closed components within a React accordion and ensuring only the clicked component is opened

Unique Accordion component: const CustomAccordion = (props: AccordionProps) => { const { label, levels, activeId, id } = props const [isExpand, setIsExpand] = useState(false) const onPress = useEvent(() => { setIsExpand( ...

Express 4 Alert: Headers cannot be modified once they have been sent

I recently upgraded to version 4 of Express while setting up a basic chat system. However, I encountered an error message that says: info - socket.io started Express server listening on port 3000 GET / 304 790.443 ms - - Error: Can't set headers ...

The MDBDataTable features header sections at both the top and bottom, but the filters UI seems to be

Currently, I am working with MDBDataTable and encountering an issue with the double heading that appears both on top and bottom of the table. I am unsure how to remove it. The code snippet in question is as follows: There is a function that retrieves and ...