Show radio buttons that have been dynamically generated using JavaScript in a vertical list format

Struggling to figure out how to display my dynamically created radio-buttons with labels vertically using JavaScript. Despite trying CSS with display: list-item, I can't seem to get them to stack properly. Here is the code snippet I'm working with...

<script type = "text/javascript">
var form = document.createElement("myForm");
for (i=0; i<myArray.length; i++) {
x=myArray[i];
addradiobutton("radio",x,"myForm");
}
function addradiobutton(type,text,formName) {
var label = document.createElement("label");
var element = document.createElement("input");
element.setAttribute("type", type);
element.setAttribute("value", text);
element.setAttribute("name", formName);
label.appendChild(element);
label.innerHTML += text;
var foo = document.getElementById(formName);
foo.appendChild(label);
}
</script>

Answer №1

function createRadioButtons() {
var radioOptions=""
for(i=0;i<3;i++){
radioOptions+="<label>" + i + "</label><input type='radio' name='radio'>";
}
$('form').append(radioOptions);
}

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

The requested module cannot be located, were you referring to "js" instead?

I am currently developing a React application using webpack and typescript. I have integrated the dependency react-financial-charts into my project, and it is properly specified in the package.json. Inside the node_modules directory, there are two folders ...

The issue lies with Express Mongoose failing to store the data

Encountering some issues when trying to save an object created in Express nodejs using mongoose. Despite receiving a confirmation that the object is saved, it cannot be located even after attempting to access it through the server. Express route for savi ...

Checking for the Presence of a Word in a String Using jQuery

I'm currently developing an application that allows users to click on usernames to add them to a reply list. The issue I am facing is that if a user with a similar username is already added, the system mistakenly identifies the new username as already ...

Troubleshooting issues with environment variables in Next.JS version 9.4.4

Hey there! So I'm currently working on pulling content from my Contentful account using the Contentful API and integrating it into my Next.Js app (running on version 9.4.4). It's pretty basic stuff, but I want to ensure the security of my credent ...

Manage the material-ui slider using play and pause buttons in a React JS application

I have a ReactJS project where I am utilizing the continuous slider component from material-ui. My goal is to be able to control the slider's movement by clicking on a play button to start it and stop button to halt it. Below is the code snippet of th ...

Using a locally hosted HTML page to update a JSON file stored on my computer

In my current project, I need to reorganize data stored in an array named unknown. Each item in this array needs to be moved either to a new array called good or another one called bad. let data = { "bad":[], "unknown": ["b", "a", "d", "g", "o", ...

What is the best way to retrieve a value from one array based on its index in React Native?

Looking to populate the centreValues array with values from another array const centreValues=[ { title:'Type', value:centreDetail.location_type }, { title:'Address', value:centreDetail.address1+centreDetail.ad ...

another way to achieve blinking effect

Currently I am working on developing a calculator application and require a blinking function to improve user experience. The idea is to have a "|" symbol blink after the user inputs each number. I found a solution for Firefox and Opera using the following ...

Obtain an instance of a factory object in AngularJS

How can I determine the instance of an object created using an AngularJS factory? angular.module('so') .factory('UserFac', function () { return function (first, last) { return { name : first + ...

Log out of Google+ API results in an error message stating: '$apply already in progress'

After successfully implementing the signIn functionality using Google+ API in my AngularJS web app, I encountered some issues with getting the signOut functionality to work properly. Within one of my .html files (the Nav-bar), I have a function being call ...

Transform vertical and horizontal scrolling actions into solely horizontal scrolling using HTML and JS

I'm currently working on a unique React.js website that features a horizontal-scrolling portfolio. The website functions as a visual gallery, allowing users to easily scroll through images using their trackpad. Within the website, I have set up a lar ...

Ways to run a javascript command just a single time

I have a function that makes an HTTP GET request to compare a given value with elements in an array. If there's no match, I want to add the value to another array. The issue is that duplicates are being added to the array because of multiple loop iter ...

How can I initiate a TextChange event in ASP.NET C# without losing focus?

I attempted to trigger the TextChange event using Ajax, but it doesn't seem to be working as I expected. I'm hoping someone here can lend a hand. <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> ...

The onUpdate function does not seem to be functioning as expected in the react-custom-scrollbars

In my React.js application, I am utilizing the "react-custom-scrollbars" component. My goal is to invoke a method each time a user scrolls. To achieve this, I have attempted using the onUpdate method. <div className="thumbs-panel"> <Scrollbar ...

Tips for showcasing checkbox options on an HTML page (utilizing ejs) following the retrieval of information from MongoDB and making it editable for the User

Currently, I store data in mongo for a multiple-choice question and indicate the correct answers. In mongo, I save them like this: question.options.option1.check = "on" for the correct answers. When I navigate to the "edit" page, I retrieve the specific ...

What type of response does an Ajax request generate when the browser is abruptly closed during the call?

What occurs to the response if an ajax request is sent, but before the server returns a response, the user closes the browser? I am puzzled as to why I receive it in the error callback, considering that the browser has been closed. ...

Continuous front-end promise awaiting response from back-end Node.js function

Currently, I am working on a basic React frontend where I need to fetch some data from my backend API powered by Node.js. This backend API calls an external API to get the required data. Although I have verified that the data is fetched successfully on the ...

Provide a boolean value of true or false to indicate whether all delete operations were successfully completed

Currently, I am using Sequelize, GraphQL, and Typescript for my coding. Within my database, I have two tables named RecordInformation and OtherDescription. The RecordInformation table contains a foreign key called "OtherID" which references the OtherDescri ...

Building an electron application with vue js to incorporate static images access

Looking for guidance on linking static images with vuejs in electron. Upon starting the app, I encountered the following response: The structure of my project folder is as follows: to-do-desktop: | |-.electron-vue |-build |-dist |-node_modules |-src --& ...

Learn about ng-show in AngularJS

Is there a way to hide this tag if it doesn't have a subcategory? I tried using the condition item.length != 0 but it doesn't seem to be working properly. <multi-select-tree class="multiselectStyle groupStyle" data-input-model="ca ...