Dynamically alter the field ID using JavaScript

I have a checkbox and a label for the checkbox that is actually coded as another field:

    <td style="text-align:left; width:210px; font-size:11px;
    height:20px;vertical-align:middle; " colspan="2" >
    <asp:CheckBox ID="Strengthx" runat="server" AutoPostBack="false"/>
    <a style="color: black;text-decoration: none;" id="Strength"
       href="javascript:void(0)" 
       onclick="addlinethrough(Strength)"
       ondblclick="removelinethrough(Strength)">Strength</a>
    </td>

There are choices available to the user: check the checkbox / uncheck the checkbox; click the label / unclick the label

By clicking the label, the textDecoration changes to line-through. If you double click the label, the textDecoration will change back to normal.

I also intend for clicking the label to apply line-through and also "uncheck" the checkbox. To enable this with one set of javascripts, I've named the labels and checkboxes similarly. label id = "Strength" checkbox id = "Strengthx" The checkbox always has an appended "x".

The following is my current javascript code which doesn't seem to be working correctly. The checkbox remains checked even after clicking the label.

function addlinethrough(elem) {
    elem.style.textDecoration = "line-through";
    document.getElementById(elem+x).checked = false;
    return false;
}
function removelinethrough(elem) {
    elem.style.textDecoration = "none";
    return false;
}

It seems like there may be an issue with recognizing the checkbox id in the script.

Answer №1

To add a string at the end, you must utilize backticks and obtain the ID instead of the element itself:

document.getElementById(elem.id + 'x')

This method will successfully achieve the desired outcome.

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

An application running on Node.js/Express and hosted on Digital Ocean encounters the "Cannot get /" error message

Despite searching extensively online and sifting through numerous solutions to different scenarios, I remained unable to find a fix that resolved my issue. When attempting to run my server.js file locally, everything operates smoothly. However, upon transf ...

Setting radio button selection programmatically in React Material-UI: A step-by-step guide

Currently utilizing a radio button group from material-ui. I have successfully set a default selection using defaultSelected, however, after rendering, I am unable to programmatically change it. The selection only updates upon clicking the radio. Is ther ...

Locate and eliminate the item containing specific content

There are many <p> &nbsp </p> tags scattered throughout the description. I need to locate and delete any tags that contain only &nbsp. The description is enclosed in a container with the class name of desc_container. Below is an exampl ...

I am having trouble with my append function even though I checked the console log and did not see any errors (beginner's inquiry)

As I practice working with functions and dynamically creating input fields, I have encountered an issue where I am unable to append my input field to the form. Despite using console.log() and not seeing any errors, I can't figure out what mistake I ma ...

Imagine if we forget to include parentheses when invoking a method by mistake

What happens if we don't include parentheses after calling a function, like in this scenario: renderContent(){} and then try to call it within a div <div>{this.renderContent()}</div> If we forget to add (), there will be no error display ...

When should you utilize the Safe Navigation Operator (?.) and when is it best to use the Logical AND (&&) operator in order to prevent null/undefined references?

Imagine having an object property (let's call it arrThatCouldBeNullOrUndefined: SomeObjType) in your Angular component. You aim to perform an array operation (let's say filter() operation) on its data: DataType[] object and save the result in an ...

"Exploring the World Wide Web with JavaScript and Ajax in Internet

Is there a way to include a Javascript snippet at the end of some ajax content? It seems to be functioning properly in Firefox, but when I try it in Internet Explorer, the script is printed out without being executed. <script type="text/javascript"&g ...

Customizing JqGrid to include a button in the advanced search dialog

I am interested in enhancing the advanced search dialog to include a feature that allows users to save a complex query they have built. Although saving the SQL code is not an issue, I need guidance on integrating buttons within the advanced search query d ...

Ember Data's counting model feature

After searching through numerous examples on Stackoverflow, I am still struggling to grasp the concept of how get('length') functions. I am attempting to retrieve a user count in the helper model. The issue may lie in my approach to using get(&a ...

JavaScript Error Caused by Newline Characters

I'm facing an issue with extracting data from a textbox using JavaScript. What I'm attempting to do is retrieve the value from a textbox, display it in an alert, and then copy it. Here's the current code snippet: var copyString = "Date: < ...

Send a property as a string, then transform the string back into JavaScript

I am in the process of creating a versatile carousel that will cater to various conditions. Therefore, I need to set the "imageQuery" on my display page as a string and then make it work as executable javascript within my carousel. The query functions pr ...

Error: VueQuill Vue3 encountered an issue while trying to read properties of undefined with the message "emit"

Incorporating VueQuill into my vue3 application is resulting in the following console error when attempting to display an HTML string - https://i.stack.imgur.com/KGQqD.png This is my code snippet: <template> <div class=""> & ...

Leveraging the power of Angular.js to generate random user profiles

I am attempting to utilize the RUG (Random User Generator) API for a project, but I am struggling to make it function correctly. I have been trying to initiate an HTTP request after a click event, but unfortunately, it does not seem to be working as expect ...

Steps for dynamically adding or removing multiple fields in a form

I am looking to create a form with dynamically added and deleted fields based on user requirements. For example, a person may have multiple phone numbers and email addresses. The goal is to allow users to add more than one phone number or email address if ...

JavaScript Filter Function: filtering based on multiple conditions (either one can evaluate to true)

I seem to be missing something very simple here. I am working with an array of objects that contains various information. Depending on user interaction, I want to filter out certain objects; let arr = [ {'num': 1, 'name': 'joe&a ...

The state of my React components keeps disappearing

Within my code, I have implemented a click event on the InterestBox to trigger updates in its appearance and alter the state of its parent container. However, despite inspecting the element using React Developer Tools and attempting API requests, the stat ...

How can you temporarily stop an event with a click or touch, and then resume the event's state after performing certain tasks in jQuery?

Exploring options for tracking clicks with precision - interested in finding a way to defer the event propagation until a certain function completes. Any suggestions on an alternative approach or how to effectively delay the normal event flow? $(this).on ...

Checking if Javascript is loaded using a JQuery getScript call

I would like to improve the performance by loading a JavaScript file upon a click event instead of during the initial page load. How can I check if the JavaScript file has already been loaded? Currently, I am using a global variable to track the 'loa ...

The Navbar in my React Material UI app is being covered by the Drawer component. Can someone guide me on how to fix

I am facing an issue where the drawer is overlaying my navbar instead of disappearing behind it when opened. I tried adjusting the z-index in my styles but it doesn't seem to be working as expected (see screenshot). The z-index for the navbar is set h ...

Refresh numerous pages

Currently, I'm working on a freelance project where I've been tasked with re-coding an outdated menu for my client. The website is built on static pages, so updating the menu manually on each page seems like a time-consuming and repetitive task. ...