create radio buttons using javascript-CodePudding

I tried to create radio buttons dynamiclly(for a quiz project i make) using javascript but im having a prblem with it. The radio button were created and i can see them on the screen, but for some reason i can not click them.

That's what i wrote:

    question  = '<input type="radio" id="option1" name="question_option" value="option1" style="align-content: center" >firstOption';
    question  = '<input type="radio" id="option2" name="question_option" value="option2" style="align-content: center" >secondOption';
    question  = '</br><input type="radio" id="option3" name="question_option" value="option3" style="align-content: center" >thirdOption';
    question  = '<input type="radio" id="option4" name="question_option" value="option4" style="align-content: center" >fourthOption';
    question  = '</form>';
    document.write(question);

CodePudding user response：

I'm really not sure what the details of your project are, but here's a rough example of how you could dynamically render radio buttons :D

const root = document.querySelector('#root');

const questions = [
    {
        name: 'choose an answer',
        options: [
            {
                name: 'first',
                isCorrect: false,
            },
            {
                name: 'second',
                isCorrect: false,
            },
            {
                name: 'third',
                isCorrect: true,
            },
            {
                name: 'fourth',
                isCorrect: false,
            },
        ],
    },
];

const createOptionRadio = (name) => {
    const container = document.createElement('div');

    const input = document.createElement('input');
    input.type = 'radio';
    input.className = 'question-option';
    input.value = name;
    input.id = name;
    input.name = 'question-option';

    const label = document.createElement('label');
    label.for = name;
    label.textContent = name[0].toUpperCase()   name.slice(1);

    container.appendChild(input);
    container.appendChild(label);

    return container;
};

const createQuestion = (questionObject) => {
    const container = document.createElement('div');
    container.className = 'question-container';

    const h3 = document.createElement('h3');
    h3.textContent = questionObject.name;
    container.appendChild(h3);

    const form = document.createElement('form');
    questionObject.options.forEach(({ name }) => form.appendChild(createOptionRadio(name)));
    container.appendChild(form);

    return container;
};

window.addEventListener('DOMContentLoaded', () => document.body.appendChild(createQuestion(questions[0])));

<div id="root"></div>

CodePudding user response：

Try to use like this .

$(function () { 
  $('#div-radio-btns').empty();
  
var question='';
  
  question='<form>' 
    '<input type="radio" id="option1" name="question_option" value="option1" style="align-content:center" >firstOption<br>' 
    '<input type="radio" id="option2" name="question_option" value="option2" style="align-content: center" >secondOption<br>' 
    '<input type="radio" id="option3" name="question_option" value="option3" style="align-content: center" >thirdOption<br>' 
    '<input type="radio" id="option4" name="question_option" value="option4" style="align-content: center" >fourthOption' 
    '</form>';
  
   $('#div-radio-btns').append(question);
  });

 
<div id="div-radio-btns"></div>

<script type="text/javascript" src="js/script.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>