How do use a label HTML element as a variable in JS?

Question

0.00/5 (No votes)

See more:

Hi,

I have this HTML code:

<label class="checkbox" for="myCheckboxId">
          <input class="checkbox__input" type="checkbox" name="myCheckboxName" id="myCheckboxId">
          <div class="checkbox__box"></div>
        </label>
      </div>

How can I use this element as a variable in a JS code, for example if I want to get this data displayed in a table?

Thank you!

What I have tried:

Tried with selectors - can't visualize the checkbox well
Tried with fetch API

Posted 28-Jun-22 22:23pm

JackF007

Updated 3-Jul-22 8:51am

v3

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Accepted Answer · 2022-06-28T22:33:00

Solution 1

I'm not sure what you mean by "element as a variable", but what you can do is us common JS document methods to select elements in the HTML structure. In the example above, if you wanted to get the checkbox, you can see it has id="myCheckboxId" which allows JS to identify it as a unique element on the screen. So you can select it via:

const checkbox = document.getElementById('myCheckboxId');
const isChecked = checkbox.checked;

Document.getElementById() - Web APIs | MDN[^]
Document.getElementsByClassName() - Web APIs | MDN[^]
Document.querySelector() - Web APIs | MDN[^]

Posted 28-Jun-22 22:33pm

Chris Copeland

Updated 28-Jun-22 22:34pm

v2

Comments

JackF007 29-Jun-22 8:21am

Imagine that I have this in my index.html file and I need to use it in node.js server (index.js) or app.js. Im my software the server send a GET request to the client app.js to take some data and compose a table.
when I use document.getElementbyId or server side I got a ReferenceError (document is not defined). I understand why this error, but then if I try the same on client (app.js), my checkbox is not defined on server side. How I could make all these "pieces" working togheter with this checkbox element?

Chris Copeland 29-Jun-22 8:30am

The server-side cannot interact with elements rendered on the client-side, these are two very different entities. As you said, you're performing a GET request and populating a table, presumably it's when the table is populated that the checkboxes are created. If you want to interact with the checkboxes (ie. perform some action on the server when a checkbox is checked) you need to register event listeners on the client-side, and then perform additional GET/POST requests (or use WebSockets) to communicate with the server-side to tell it what to do.

Remember, you'll need to register the event listeners only after the table has been populated. How that happens is down to your code (which we can't see in this question).

JackF007 3-Jul-22 14:50pm

The checkbox elements are created on the client side, but the table is populated in express server-side.
Client :

const checkbox = document.createElement("checkbox");
checkbox.classList.add("table-refresh__checkbox");
checkbox.innerHTML = `

`;

I would need to populated the table and the checkbox it should go in one column, the latest. Below the example from the server side, which get returned some data "directy" and one of them is the checkbox variable, which should contains the HTML element. Don't know if I explained well... but how I can request this element from the client to the server, for example using fetch API.

const data ={
headers: ["TipoDoc.","DataDoc.","Importo","CedentePrestatore","CessionarioCommittente"," "],
rows: new Array(i).fill(undefined).map(()=>{

x++;

return [dati[x][0],dati[x][1],dati[x][2],dati[x][3],dati[x][4],checkbox]

})
};

Chris Copeland 4-Jul-22 4:43am

I think this depends on how you're rendering the content into a table. I don't have much experience with running a Node.js server so I'm unsure of it's capabilities but I would have thought you'd need to create the checkbox element on the client-side. Surely the purpose of the server is to provide a sort of REST service (which means basic JSON in/out), and the client-side should be building the table and the components within it. If you make the client-side do the work of creating the table, then you should have somewhere in that piece of code which creates the checkbox to which you can bind the event listener.

Alternatively if the client-side JS is happy to render the checkbox returned from the server-side, then you need to add a post-rendering event listener to handle that.

JackF007 4-Jul-22 5:36am

Thanks for your support, the problem is always the same. Everything is well now on the client-side, the checkbox is created,functional but I always need to pass it to my backend, maybe with a fetch API or something similar.... the problem is that I always need the checkbox also on the server side. How could I add an event listener without influencing the user experience...which one? And then even after that how I got the checkbox element in the backeend?

Chris Copeland 4-Jul-22 6:04am

Can I ask why you would need to get the checkbox instance on the server-side? Anything on the server should be business logic (performing operations such as data manipulation, transformation, persistence etc.) while on the client should be anything the user can view and interact with. You can't expect the server and client to have access to the exact same HTML elements because that doesn't make sense.

Any event listener for listening for checking events, or button clicks, or text inputs, need to be done all on the client-side, the server doesn't need to be aware of any of these sorts of events. Instead, when the client-side event is triggered (ie. a button click or check event) then the client-side can send a message to the server-side via something like the fetch() API or an XMLHttpRequest to indicate that something has happened. So if the user clicks a "delete" button next to a row on their screen, you'd expect the client-side to send a "delete this record" message to the server-side with information on what record to delete.

JackF007 4-Jul-22 6:21am

I need that on backend because my table takes the data from local system with " fs.readFileSync" method. The table is styled in the client-side. The checkbox element would be something I need to add to this table in order to allow row selection... for this checkbox I use HTML and CSS to style it, but I don't know if another method could be more functional... at the end of the day my objective is to allow the selection of the table rows and since that something is done in the backend for the table (where I take the data and put in the object dati{} (see comment above)) I supposed that was a got method.. but maybe not!!! Any other suggestion?

Chris Copeland 4-Jul-22 7:07am

What are you going to be doing with the rows that are selected? It still sounds like it needs to be client-side. For example, if you're planning on allowing row selection and then the user clicks a button, what you'd want to do is on the client-side add an event listener for the button click, and then you'd get the selected rows by doing something like document.querySelectorAll('input[type="checkbox"]:checked') which would produce a collection of checkboxes which have been checked. You would then use the data from these checkboxes to build some sort of request to the server-side to perform an operation.

Here is a super simple example[^]

JackF007 4-Jul-22 14:04pm

Great idea and very very useful tips... I think I will use it. I stil feel by the way that this will need lot of changes in the code. Is it never possible to render HTML elements on server side? There's no method to do this?

Chris Copeland 5-Jul-22 4:16am

The server-side only produces HTML content, when the browser sends a request to the server-side for a particular web-page it receives essentially a text response back containing the HTML structure to display. It's up to the client-side to render this web-page, so no rendering gets done on the server-side.

For any and all websites where there are interactive buttons and inputs (including here on CodeProject) they handle user inputs in one of two ways: server-side processing (which is where the whole page is navigated/submitted and the server must process the actions and resend any pages back to the browser) or client-side processing (which is where the browser makes asynchronous requests to the server-side to handle each operation) (See here for comparison).

Unfortunately this is just the way things are with development, some websites user newer tools such as WebSockets to open up channels to the server-side, but otherwise most processing is done through either fetch() or XMLHttpRequest.

JackF007 5-Jul-22 4:24am

Thanks again Chris... I will try to apply a solution based on your tips. I will update this questione once I proceed with a working solution.

How do use a label HTML element as a variable in JS?

1 solution

Solution 1

Add your solution here

Preview 0

How do use a label HTML element as a variable in JS?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us