JavaScript creating a radio button and a label - javascript

I am trying to create a radio button and a label with JavaScript and I got the radio button working, but the label doesn't appear next to it and I can't figure out what I am doing wrong. This is my code:
const x = document.createElement("INPUT");
x.setAttribute("type", "radio");
document.body.appendChild(x);
const y = document.createElement("LABEL");
const t = document.createTextNode("Label text");
y.textContent = "Label text";
y.setAttribute("for", "lord");
y.appendChild(t);

You need to append the label to the body but your code is appending it as child of radio button
const x = document.createElement("INPUT");
x.setAttribute("type", "radio");
x.setAttribute("id", "lord");
document.body.appendChild(x);
const y = document.createElement("LABEL");
const t = document.createTextNode("Label text");
y.textContent = "Label text";
y.setAttribute("for", "lord");
document.body.appendChild(t);

yo have to apppend to de document, like the radio button
document.body.appendChild(y);

Related

How to get the value of multiple checkboxes only

I am trying to get the value of multiple checkboxes, but I also have radio buttons included. I try to get the value like this:
const inputData = [];
document.querySelectorAll("input:checked").forEach((item) => {
inputData.push(item.value);
});
As a result, I get the values of both the radio buttons and the checkboxes.
This is how I created the radio buttons and the checkboxes:
else if (i.type === "single-select"){
for (const o of i.options){
const x = document.createElement("INPUT");
x.setAttribute("type", "radio");
x.setAttribute("id", "radioID");
x.value = o;
const y = document.createElement("LABEL");
const t = document.createTextNode(o);
y.appendChild(t);
const div = document.createElement("div");
div.style.height = "5px";
div.appendChild(x);
div.appendChild(y);
document.getElementById("radioButton").appendChild(div);
window.data.appendChild(x);
window.data.appendChild(y);
window.data.appendChild(div);
}
}
else if (i.type === "multi-select"){
for (const l of i.options){
const x = document.createElement("INPUT");
x.setAttribute("type", "checkbox");
x.value = l;
const y = document.createElement("LABEL");
const t = document.createTextNode(l);
y.appendChild(t);
const div = document.createElement("div");
div.style.height = "5px";
div.appendChild(x);
div.appendChild(y);
document.getElementById("checkbox").appendChild(div);
window.data.appendChild(x);
window.data.appendChild(y);
window.data.appendChild(div);
}
}
How can I get the values of multiple checkboxes only, without getting the values of the radio buttons?
Change your selector to be more targeted.
"input:checked"
to
"input[type=checkbox]:checked"

How to define the name of a radio button and get its checked value

I am trying to get the value of a radio button as JSON. This is my code:
for (const o of i.options){
const x = document.createElement("INPUT");
x.setAttribute("type", "radio");
x.setAttribute("id", "radioID");
x.name = RadioBtn;
const y = document.createElement("LABEL");
const t = document.createTextNode(o);
y.appendChild(t);
const div = document.createElement("div");
div.style.height = "5px";
div.appendChild(x);
div.appendChild(y);
document.getElementById("radioButton").appendChild(div);
window.data.appendChild(x);
window.data.appendChild(y);
window.data.appendChild(div);
}
const fifthQuestion = JSON.stringify($("input[name=RadioBtn]:checked").val());
console.log(fifthQuestion);
I get the following errors:
1. ReferenceError: RadioBtn is not defined
2. ReferenceError: $ is not defined
I seem not to be defining the name of the radio button the right way. How can I do that and get the input of the checked radio button?

Unable to generate Unique IDs and access them in document.getElementById()

function printPerson(nop) {
if (nop == null || nop == 0) {
document.getElementById("div1").innerHTML = "";
}
else {
for (var i = 0; i < nop; i++) {
var element = document.createElement("input");
var label = document.createElement("Label");
var button1 = document.createElement("input");
var button2 = document.createElement("input");
var br = document.createElement("br");
label.innerHTML = "User Name :";
// addition text box
element.setAttribute("type", "text");
element.setAttribute("name", "addition");
element.setAttribute("id", "cal");
// button 1
button1.setAttribute("type", "button");
button1.setAttribute("value", "+");
button1.setAttribute("onclick", "document.getElementById('cal').value += '+' ");
// button 2
button2.setAttribute("type", "button");
button2.setAttribute("value", "=");
button2.setAttribute("onclick", "document.getElementById('cal').value = eval(document.getElementById('cal').value)");
var para = document.getElementById("div1");
para.appendChild(label);
para.appendChild(element);
para.appendChild(br);
para.appendChild(button1);
para.appendChild(button2);
para.appendChild(br);
count++;
}
}
}
Here I am trying to create text boxes and buttons based on the user input but I was not able to give unique IDs for each and every dynamically generated fields so the actions are being performed only one first created text box
Try with -
element.setAttribute("id", "cal" + i);
The ids will be cal1, cal2 and so on.. And hope you will do the same for the name attribute.

Checkbox label is being displayed on next line

I have a checkboxlist, and I created a javascript function that will add checkbox to the checkboxlist,
here's the code
function add1()
{
var ques = document.getElementById('Questions_que1');
var container = document.getElementById('Questions_wh1');
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "que1";
checkbox.value = ques.value;
checkbox.id = "id";
var label = document.createElement('label');
label.htmlFor = "id";
label.appendChild(document.createTextNode(ques.value));
container.appendChild(checkbox);
container.appendChild(label);
}
but the problem is that the checkbox label is being displayed on the next line instead of after the checkbox on the same line..
what am I doing wring here???

Javascript -> Attempting to dynamically add radio buttons from an array

So I'm working on my very first 'real' JavaScript project -> the famed Quiz app :)
I'm passing questions and answers via an array, and I want make sure to allow for a variable number of answer options. To do this, I'm using a For loop and the createElement method to add and populate the appropriate HTML for each answer in the array. To my eyes, what I've built actually works great. And after running the function I can see the resultant HTML elements in the right place and with all the appropriate tagging in my console. However, the inner DIV text won't render on screen! Very confused. What am I missing? Please help!
My JS code:
<body>
<form id="form1">
</form>
<script>
var answers = ["answer1", "answer2", "answer3", "answer4", "answer5"];
function createRadioButtonFromArray(array) {
var len = array.length;
var form = document.getElementById("form1");
for (var i = 0; i < len; i++){
var radio = document.createElement("input");
radio.type = "radio";
radio.name = "choices";
radio.class = "radioButtons";
radio.value = i;
radio.id = "choice" + i;
var radioText = document.createElement("div");
radioText.id = "c" + i;
radioText.class = "choiceText";
form.appendChild(radio);
radio.appendChild(radioText);
document.getElementById("c" + i).innerHTML=array[i];
}
}
</script>
</body>
And here's a screenshot of my console AFTER I run the function, for reference:
You're plan is nearly working but Input elements have no content! So the div's will not be rendered at all!
Create a div that contains your radio button and the input text on the same level:
var radio = document.createElement("input");
radio.type = "radio";
radio.name = "choices";
radio.class = "radioButtons";
radio.value = i;
radio.id = "choice" + i;
var radioText = document.createElement("div");
radioText.id = "c" + i;
radioText.class = "choiceText";
radioText.innerHTML = array[i];
radioText.appendChild(radio);
form.appendChild(radioText);
Add label after or before radio button. Label will let you check radio button by clicking on it's text
var radio = document.createElement("input");
radio.type = "radio";
radio.name = "choices";
radio.class = "radioButtons";
radio.value = i;
radio.id = "choice" + i;
var radioText = document.createElement("label");
radioText.id = "c" + i;
radioText.setAttribute("for", "choice" + i);
radioText.class = "choiceText";
form.appendChild(radio);
form.appendChild(radioText);
document.getElementById("c" + i).innerHTML=array[i];
<input> cannot contain any DOM elements or DOM nodes. But if you want to have checkboxes associated with some text, I suggest you to use <input> with <label for=""> where label.for is name of input element. For combining them you can put them into some container(i.e. <div>):
By default on label with set property for raises click event on element with the same name property value as for property value. This means that you do not need to add additional click event handlers for <label> elements.
var checkId = 1;
var container = document.createElement("div");
var radio = document.createElement("input");
radio.type = "radio";
radio.name = "choices"+checkId;
radio.class = "radioButtons";
radio.value = i;
radio.id = "choice" + i;
var label = document.createElement("label");
label.innerHTML = array[i];
// Set attribute for
label.setAttribute("for","choices"+checkId);
//Increase counter for check element name.
checkId++;
container.appendChild(radio);
container.appendChild(label);
form.appendChild(container);

Categories