Unable to display radio buttons on the webpage

I'm working on creating a pair of radio buttons in my JavaScript for a web application. Here's the code I have so far:


    //radio buttons start
    var AddRadio = function(options){
        var _dom_element = document.createElement("radio");

        for (var i = 0; i < options.length; i++) {
            var _option = document.createElement("radio");
            _option.value = options[i];
            _option.innerHTML = options[i];

            _dom_element.appendChild(_option);
        };

        this.getDomElement = function() {
            return _dom_element;
        }
    }
    //radio buttons end

var _temp_radio = new AddRadio(['Max Temp', 'Min Temp']);

container_element.appendChild(_temp_radio.getDomElement());

The issue I'm facing is that only the text 'Max Temp' and 'Min Temp' are visible, but the actual radio buttons themselves do not appear. Would greatly appreciate any help or suggestions!

Answer №1

radio buttons are used to select only one option at a time.

<input type="radio">.  

If you use the code

<radio> 

you're actually creating an incorrect tag.

Answer №2

To include a radio button in your HTML form, you can use the <input type="radio"/> tag.

For example:

let option = document.createElement('input');
option.type = 'radio';

For more information on creating forms in HTML, visit http://www.w3schools.com/html/html_forms.asp

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

Creating a new JavaScript object using a Constructor function in Typescript/Angular

Struggling with instantiating an object from an external javascript library in Angular/Typescript development. The constructor function in the javascript library is... var amf = { some declarations etc } amf.Client = function(destination, endpoint, time ...

Navigating to the top of a concealed container

I have been attempting to scroll a hidden div to the top without success. Below is the code snippet I've been using: function slideUpReset(div) { $(div).slideUp('fast', function() { $(div).scrollTop(0); }); } Unfortunately ...

Illumination causes surfaces to transform

In my simple scene, I have a ground and an interesting light source. However, when the light hits certain meshes, it creates some strange effects. The shadows are being cast correctly, but the other meshes affected by the light are showing unusual results. ...

Effortlessly retrieve elements by their IDs through inline function calls

I am curious to know why when inserting the id directly into the onclick function, the table is being called again? function See(table){ console.log(table); // how does the system automatically detect the element? } <table id='iamtable' b ...

Is there a way for me to access, edit, and update the user.json file?

I recently launched a next.js application and included a member registration feature that responds to requests from the front-end using next.js API routes. While testing it locally, the membership registration was successful. However, after deploying it to ...

Create a line break in an alert using PHP

<?php function alert($msg) { echo "<script type='text/javascript'>alert('$msg');</script>"; } if(array_key_exists('btnRegisterAdmins', $_POST)) { $fname = $_POST['FirstName']; $lname=$_POST['La ...

Ensuring Sequential AJAX Calls in jQuery for Optimal Performance

I recently transitioned some code to FastCGI for backend processing of AJAX requests from a jQuery-driven front end. While FastCGI has generally sped up the process, I've encountered a performance drawback when two jQuery AJAX requests are made in rap ...

Repeater in ASP controls the unique identification generation process

When designing my page, I encountered an issue with automatically generated IDs within the repeater item template. Let me explain: <asp:Repeater ID="rptThreads" runat="server" onitemcreated="rptThreads_ItemCreated"> <HeaderTemplate> ...

Exploring Handlebars.js: Understanding the Scope of Global Contexts

If I have a static list of cached users within my application under App.Users, there will likely be various instances where I need to display the list of users. Typically, I would just pass the list along with the context to the template. var tmpl = Handl ...

Guidance on incorporating CSS into ES6 template literals within a react framework

I am trying to implement the Material UI stepper in my React application. The step content is set up as a string literal. My goal is to include CSS styling for paragraphs within the step content. Many online resources suggest using \n to add a line ...

Is there a way for multiple <select> elements to have identical options in React?

Currently, I have a React component structured like this: export default function ExampleComponent() { return ( <div> <select required name="select1"> <option label=" "></opti ...

Understanding the extent of variables in Javascript

I'm struggling to comprehend the scope of 'this' in this particular situation. I can easily call each of these functions like: this.startTracking(); from within the time tracker switch object. However, when attempting to execute the code: Dr ...

Can a Django view be configured to output a JavaScript function?

I need to implement a JavaScript function in my view. The scenario is as follows: If a user clicks on the 'book' button without selecting an article, the book function should check the database and if it finds that no product has been chosen, it ...

Is it possible for two distinct devices to generate the same HWID using Pushwoosh Cordova API?

Our app relies on HWIDs generated by Pushwoosh to distinguish between devices. After reviewing traffic logs, I noticed a peculiar pattern of what appears to be the same device sending HTTP requests from various ISPs within short time intervals. It seems t ...

JavaScript - Exiting a loop within a callback function

const numbers = [36,19,69,27]; function addNumbersToArray(data, callback){ for(let i=0; i < data.length; i++){ callback(data[i]); } } let result = addNumbersToArray(numbers, function(number){ console.log(number); return number }); co ...

Leveraging Angular to retrieve images from Google Feed API

I'm currently working on developing an RSS reader and trying to integrate images from the Google Feed API. While I have successfully extracted the publishedDate and contentSnippet, I am facing difficulty in getting the image src. The code snippets bel ...

Looking to trigger a PHP page by clicking on a div?

Is there a way to trigger a PHP page call when a user clicks on a <DIV> with AJAX? Additionally, can the text of the DIV be changed to display "LOADING....." simultaneously? I lack knowledge about AJAX. Could you please provide me with more details ...

Kindly attach the npm-debug.log file along with your support inquiry

When I try to use the "watch" command, I encounter the following error: "Please include the following file with any support request: C:\wamp\www\chandco\wp-content\themes\chandco\npm-debug.log". Below are the files in q ...

Verify image loading using jQuery

<img src="newimage.jpg" alt="thumbnail" /> I am dynamically updating the src attribute of this image. Is there a way to verify if the image has been successfully loaded and take action once it is? Appreciate any guidance on this matter. ...

Enhancing Data Integrity with Codeigniter's Validation System

Looking for the most effective method to validate a form using PHP within the Codeigniter platform. Currently, I am exploring two options, each with its own drawbacks: Utilizing Form_validation in PHP (however, it clears the form fields upon any rule vi ...