Create an input box with a designated class

When I click the button in my HTML and JavaScript code below, I am able to dynamically add a text field and radio button. This functionality is working properly. However, I also want the newly generated text field to have the same font size and appearance as the one above it, meaning I want it to inherit the same class.

Here is the HTML:

<input type="radio" name="choices"  value="o1"/>
<input type="text" name="o1" id="o1" class="inputtype"/>
<span class="file-wrapper">
<input type="file" name="o1_i" />
<span class="button">Choose a file</span>
</span>
<div id="responce"></div>

And here is the JavaScript:

var div = document.getElementById("responce");
var radio = document.createElement("input");
            radio.type = "radio";
            radio.name = "choices";
            radio.value = "o" + countBox;
            div.appendChild(radio);

var text = document.createElement("input");
            text.type = "text";
            text.id = "o" + countBox;
            text.name ="o" + countBox;
            div.appendChild(text);

var upload = document.createElement("input")
            upload.type = "file";
            upload.name= "o" + countBox + "_i";
            div.appendChild(upload);

Answer №1

To apply classes to elements, simply use the className property in a similar manner as setting other attributes like name, type, and ID:

text.className = "inputtype";

Similarly, assign a class to the browse button:

upload.className = "someclass";

If you need to add multiple classes, separate them with spaces. Remember that using className will replace any existing classes on the element.

Answer №2

To avoid the need to manually assign a class using JavaScript for every new item, you can simply use CSS to target the <input> elements directly like this: #myform input[type=text]. This method assumes that there is a form-tag or another parent element available for targeting.

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

Tips for effectively incorporating customized validation into an array using vuelidate

My array of objects has a specific structure that looks like this varientSections: [ { type: "", values: [ { varientId: 0, individualValue: "" } ] } ] To ensure uniqueness, I implemented a c ...

Using null or undefined for ternary operator formatting in React applications

When styling a component, what should be used if a specific condition is not fulfilled: null, undefined, or something else? For example: errorStyle: { right: locale === Locales.ARABIC ? 0 : null, left: locale !== Locales.ARABIC ? 0 : null, .. ...

What is the best method for transforming an HTML file into an ICS (iCal) file?

Hello there! I am interested in converting an HTML file (website) to an iCalendar file (iCal). Is this even possible? If so, how can it be achieved? Does anyone have any ideas or recommendations on how to proceed? Thank you in advance! ...

anychart: The right side of Gantt Charts is being cut off or trimmed

I am utilizing anychart for my user interface. My data timelines are in epoch milliseconds. When trying to create a Gantt chart, I notice that the right side is being trimmed. Can someone please assist me with this issue? https://i.sstatic.net/H6LHk.png ...

I am experiencing issues with launching chromium while running Puppeteer on Windows 11 using node js v19.4

Upon following the installation instructions in the documentation to install puppeteer with npm install puppeteer, I attempted to run the example for downloading a webpage as a PDF. However, every time I try to execute the code, Node.js returns the followi ...

[php][html] stuck on trying to solve this error

Any help in figuring out the error on line 37 would be greatly appreciated. I've tried moving the ""; after echo and putting the entire PHP code in an img class="profilePic" src="http://i.imgur.com/ZICYW5z.png"/> and then using echo for the name (I ...

What is the process of configuring a custom domain for localhost:3000 in a React application?

"scripts": { "start": "cross-env NODE_PATH=src react-scripts start", "build": "cross-env NODE_PATH=src react-scripts build", } Is there a way to replace localhost:3000 with a custom domain in Rea ...

Utilizing a function argument within the :not() selector

I am currently working towards the objective of selecting all elements in my document except for those within a specific class. This is what I have come up with so far: var x = document.querySelectorAll(":not(.myParameter)"); My aim is to make 'myPa ...

Guide on deleting files from WordPress Media Library directly using PHP in the frontend

I have searched various sources while creating my current code, but I have yet to find the answer to this question: Link 1 Link 2 Link 3 Link 4 Creating a file management system where admin access is restricted from WordPress. They will manage files th ...

Adding over 20,000 rows to a table can be time-consuming, causing the page to become unresponsive once the process is complete

Looking at my table structure, it appears as follows: <tr ng-repeat="friend in friends | orderBy:predicate:reverse"> <td>{{friend.name}}</td> <td>{{friend.phone}}</td> <td>{{f ...

Retrieving the Short Date Format from the user's device or browser within a React application

Currently, I am in the process of utilizing reactjs along with material UI datepicker. My objective is to transmit the short date format to the datepicker component, such as format="MM/dd/yyyy". In addition, I wish to employ the pre-existing date ...

How can I subtract a value from an array using node-js?

If we consider a simple scenario where an array totalSpots = [95] contains only one value, and a new booking is made, the goal is to automatically assign one parking spot to the user who booked it. This will involve reducing the value in the array by 1 or ...

Loading images in advance before webpage loads

Welcome friends! This is my first time asking a question here, so I hope I'm doing it right :) I'm looking to preload 3 images before the webpage fully loads so that they all appear simultaneously. Currently, the images load one after another and ...

Responsive design for iPad and larger screens - adjusting to different screen sizes

Does anyone know of a CSS code that can effectively target both iPad and desktop devices with a max-width of 768? I attempted the following code, however it seems to only work for desktops: @media only screen and (max-width: 768px) Due to this limitatio ...

What is the most effective method to exhibit every element within a content wrapper at a specific interval of time?

I am looking for a way to display each div within the content-wrapper after a specific time interval. Currently, I am using individual classes like el1, el2, el3, ... to accomplish this task. However, when dealing with content-wrappers containing multipl ...

Angular bindings expression involving HTML elements

Can HTML elements be inserted in an Angular expression? Let's explore a few examples. For instance, we might want to achieve something like this: <table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname ? ...

Guidance on retrieving a boolean value from an asynchronous callback function

I'm looking to determine whether a user is part of a specific group, but I want the boolean value returned in the calling function. I've gone through and debugged the code provided below and everything seems to be working fine. However, since my ...

A guide on cropping and uploading images using ejs and Node.JS

Currently I am utilizing JQuery to crop an image. <link href="/public/css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" /> <!-- add scripts --> <script src="http://code.jquery.com/jquery-1.9.0.js"></script& ...

Slide inside a div to move content

Check out the script I've been experimenting with for bringing in a menu from the left: Demo Fiddle To make this work, the sliding DIV needs to not only appear on the left but also push the 'left panel' and 'right panel' accordin ...

Troubleshooting issues with applying styles in Vue framework when configured with webpack

I'm facing an issue with setting up the Vue framework using webpack. Specifically, I'm having trouble with styles not being applied when included in the <style> tag within single file components. Despite following several tutorials on this ...