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);
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>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>