I have successfully created dynamic table using JavaScript. Now I want to add a column which will be blank and editable to the user after header 6 column in the table with default header name.
I have to no clue how to do.
var passedArray = [
["header_1", "header_2", "header_3", "header_4", "header_5", "header_6"],
["dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg"],
["fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg"],
["sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs"],
["dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd"]
];
var html = "<table id = both_table>";
passedArray[0].forEach(function(key) {
let newVal = key.replace(/_/g, ' ').toUpperCase();
html += "<th>" + newVal + "</th>";
});
passedArray = passedArray.slice(1, );
passedArray.forEach(function(row) {
html += "<tr>";
Object.keys(row).forEach(function(key) {
html += "<td>" + row[key] + "</td>";
});
html += "</tr>";
});
html += "</table>";
normalizedDataTable.innerHTML = html;
#both_table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
margin-bottom: 3rem;
text-align-last: center;
}
#both_table td,
#both_tableth {
border: 1px solid #ddd;
padding: 8px;
}
#both_table tr:hover {
background-color: #ddd;
}
#both_table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4caf50;
color: white;
}
<div class="normalized_data_table" id="normalizedDataTable"></div>
Thank you in advance
You should wrap your table in a <form> and then add an <input type="text"/> in each row:
var passedArray = [
["header_1", "header_2", "header_3", "header_4", "header_5", "header_6"],
["dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg"],
["fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg"],
["sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs"],
["dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd"]
];
// wrap the table in a form
var html = "<form action='test.html'>"
html += "<table id = both_table>";
passedArray[0].forEach(function(key) {
let newVal = key.replace(/_/g, ' ').toUpperCase();
html += "<th>" + newVal + "</th>";
});
// add an header for your last column
html += "<th>Edit</th>"
passedArray = passedArray.slice(1, );
passedArray.forEach(function(row) {
html += "<tr>";
Object.keys(row).forEach(function(key) {
html += "<td>" + row[key] + "</td>";
});
// create an input field in each row
html += "<td><input type='text'/></td>"
html += "</tr>";
});
html += "</table>";
// create the submit button
html += "<button type='submit'>Submit form</button>";
// close the form
html += "</form>";
normalizedDataTable.innerHTML = html;
#both_table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
margin-bottom: 3rem;
text-align-last: center;
}
#both_table td,
#both_tableth {
border: 1px solid #ddd;
padding: 8px;
}
#both_table tr:hover {
background-color: #ddd;
}
#both_table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4caf50;
color: white;
}
<div class="normalized_data_table" id="normalizedDataTable"></div>
See also on JSFiddle.
Related
I have displayed my array of objects using dom manipulation. but it seems there is something wrong with the toggle function that i have called to the buttons.
i require each button to switch from "read" to "not read" but it only works for the first object displayed. the second one toggles the first but doesn't toggle itself? could i please get an explanation as well
let clicked = false;
function toggle(){
if(!clicked){
clicked = true;
document.getElementById("readbtn").innerHTML = "Not read";
}
else{
clicked = false;
document.getElementById("readbtn").innerHTML = "Read";
}
}
function Book(name, author, ReadOrNot) {
this.name = name
this.author = author
this.ReadOrNot = ReadOrNot
}
const book1 = new Book("The Hobbit", "J.R.R Tolkien", "Read")
const book2 = new Book("A Game of Thrones", "George R.R. Martin", "Not read")
let myLibrary = []
function addBookToLibrary(...arr) {
myLibrary.push(...arr)
}
addBookToLibrary(book1)
addBookToLibrary(book2)
console.log(myLibrary)
function addBookToTable(){
let tbody = document.querySelector('tbody')
myLibrary.forEach(b =>{
let tr = document.createElement('tr')
let content = '<td>' + b.name + '</td><td>' + b.author + '</td>'
if(b.ReadOrNot == 'Read'){
content += '<td><button id="readbtn" class="btn rdbtn" onclick="toggle()">Read</button></td>'
}
else if(b.ReadOrNot == 'Not read'){
content += '<td><button id="readbtn" class="btn rdbtn" onclick="toggle()">Not read</button></td>'
}
content += '<td><button class="btn delbtn">Delete</button></td>'
tr.innerHTML = content
tbody.appendChild(tr)
})
}
addBookToTable()
*{
box-sizing: border-box;
--darkblue: #465c6b;
--blue: #779bb3;
--lightgrey: rgb(244, 242, 242);
}
table{
border-collapse: collapse;
width: 30em;
background-color: white;
border-radius: 5px;
box-shadow: 0px 10px 30px 5px rgba(0,0,0,.15);
margin: 100px auto;
}
table thead td{
background-color: rgb(38, 36, 36);
color: whitesmoke;
border-bottom: .5px solid black;
font-size: 15px;
letter-spacing: 1px;
padding: 8px;
}
table tbody td {
padding: 8px;
}
table tbody tr td:nth-child(4){
text-align: center;
}
table tbody tr td:nth-child(3){
text-align: center;
}
table thead tr td:nth-child(3){
text-align: center;
}
table td{
font-size: 18px;
color: rgb(38, 36, 36);
}
.btn.delbtn{
background-color: #990026;
min-width: 100px;
}
<table>
<thead>
<tr>
<td>Name</td>
<td>Author</td>
<td>Status</td>
<td> </td>
</tr>
</thead>
<tbody>
</tbody>
</table>
I'm trying to populate a table with JSON data file but that will happen when I choose an option from select options because each one of them refers to a different JSON data file, what happens is that only the Header of the table that showed beacuse it's already in the html part.
this what I get
this how it should look like
this how my code look like
$('#mySelect').change(function() {
if ($(this).val() === 'poly') {
$("#table").show();
get_json_data('poly.json');
}
else{
$("#table").show();
get_json_data('mono.json');
}
});
function get_json_data(json_url) {
// var json_url = 'example.json';
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
console.log(data);
append_json(data);
}
}
xmlhttp.open("POST", json_url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
}
function append_json(data) {
var table = document.getElementById('gable');
data.forEach(function(object) {
var tr = document.createElement('tr');
tr.innerHTML =
'<td > <input type="radio" value ="' + object.RendementDuPanneau + '" name="choice" /> </td>' +
'<td>' + object.Fournisseur + '</td>' +
'<td>' + object.Modele + '</td>' +
'<td>' + object.PuissanceMaximale + '</td>' +
'<td>' + object.RendementDuPanneau + '</td>';
table.appendChild(tr);
});
var elements = document.getElementsByTagName('tr');
for (var i = 0; i < elements.length; i++) {
(elements)[i].addEventListener("click", function() {
const rb = this.querySelector('input[name="choice"]');
rb.checked = true;
let selectedValue = rb.value;
alert(selectedValue);
});
}
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Nunito', sans-serif;
color: #384047;
}
form {
max-width: 400px;
margin: 10px auto;
padding: 10px 20px;
background: #f4f7f8;
border-radius: 8px;
}
select {
background: rgba(255,255,255,0.1);
border: none;
font-size: 16px;
height: auto;
margin: 0;
outline: 0;
padding: 15px;
width: 100%;
background-color: #e8eeef;
color: #202529;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 30px;
}
legend {
font-size: 1.4em;
margin-bottom: 10px;
}
table {
border: 2px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
.my-custom-scrollbar {
position: relative;
height: 200px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
table thead th ,table tbody td
{
font-size : 12px;
}
tr:hover{
background-color:gray;
cursor:pointer;
}
table tbody td, table thead th {
text-align: center;
}
table tbody td:last-child, table thead th:last-child {
border-right: none;
}
table tbody td:first-child, table thead th:first-child {
width: 15px;
border-right: none;
}
table tbody td:nth-child(2), table thead th:nth-child(2) {
width: 100px;
border-left: none;
}
table tbody td:nth-child(3), table thead th:nth-child(3) {
width: 150px;
}
table tbody td:nth-child(4), table thead th:nth-child(4) {
width: 80px;
}
table tbody td:nth-child(5), table thead th:nth-child(5) {
width: 100px;
}
#media screen and (min-width: 480px) {
form {
max-width: 480px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<form action="index.html" method="post" id="formName" name="calculeForm">
<div id="selecttype" >
<legend>Type de panneau : </legend>
<select id="mySelect" name="typeP" >
<optgroup label="Votre Type De Panneau"></optgroup>
<option></option>
<option value="poly">Silicium polycristallin</option>
<option value="mono">Silicium monocristallin</option>
</select>
</div> <br>
<div class="table-wrapper-scroll-y my-custom-scrollbar" id="table" style="display:none;">
<table class="table table-bordered table-striped mb-0" id="gable">
<thead>
<tr>
<th></th>
<th>Fournisseur</th>
<th>Modèle</th>
<th>Puissance maximale</th>
<th>Rendement du panneau</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
this how my data look like
poly.json
[{"Fournisseur":"Jinko Solar","Modele":"JKM270PP-60","PuissanceMaximale":270,"RendementDuPanneau":"16,50"},{"Fournisseur":"Jinko Solar","Modele":"JKM275PP-60","PuissanceMaximale":275,"RendementDuPanneau":"16,80"},{"Fournisseur":"Jinko Solar","Modele":"JKM280PP-60","PuissanceMaximale":280,"RendementDuPanneau":"17,11"},{"Fournisseur":"Jinko Solar","Modele":"JKM285PP-60","PuissanceMaximale":285,"RendementDuPanneau":"17,41"},{"Fournisseur":"Jinko Solar","Modele":"JKM320PP-72","PuissanceMaximale":320,"RendementDuPanneau":"16,49"}]
mono.json
[{"Fournisseur":"Risen Energy","Modele":"RSM120-6-310P","PuissanceMaximale":310,"RendementDuPanneau":"18,40%"},{"Fournisseur":"Risen Energy","Modele":"RSM120-6-315P","PuissanceMaximale":315,"RendementDuPanneau":"18,70%"},{"Fournisseur":"Risen Energy","Modele":"RSM120-6-320P","PuissanceMaximale":320,"RendementDuPanneau":"19,00%"},{"Fournisseur":"Risen Energy","Modele":"RSM120-6-325P","PuissanceMaximale":325,"RendementDuPanneau":"19,30%"},{"Fournisseur":"Risen Energy","Modele":"RSM120-6-330P","PuissanceMaximale":330,"RendementDuPanneau":"19,60%"}]
I'm echoing a table from mySql. The TD border is not showing up no matter how I input the code. The thead border is showing up just fine.
This is what I have.
// Loop to show results
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td style=text-align:center>".$row['ETF'].
"</td>";
echo "<td style=text-align:center>".$row['ETF NAME'].
"</td>";
echo "<td style=text-align:center>".$row['1 YR Direction %'].
"</td>";
echo "<td style=text-align:center>".$row['Holding Name'].
"</td>";
echo "<td style=text-align:center>".$row['Industry'].
"</td>";
echo "<td style=text-align:center>".$row['Percent Holdings'].
"</td>";
"</tr>";
}
echo "</table>";
<style type="text/css">thead,
th {
font-weight: bold;
background-color: #992c29;
color: #f7f4f4;
border: 2px solid black;
tr,
td {
border: 2px solid black;
}
</style>
You have not closed your th selector, so the styles directly below it are considering invalid syntax, and will never execute.
Closing your th selector by adding in the missing curly brace (}) will resolve your issue:
th {
font-weight: bold;
background-color: #992c29;
color: #f7f4f4;
border: 2px solid black;
}
tr,
td {
border: 2px solid black;
}
In addition to this, ensure that no other selectors are overriding your styles with higher specificity.
Hope this helps! :)
Close off missing
thead,
th {
font-weight: bold;
background-color: #992c29;
color: #f7f4f4;
border: 2px solid black;
}
tr,
td {
border: 2px solid black;
}
I am tryin to build some HTML dynamically.The HTML as a div , within which there is a table and within one of the columns of the table , there is another table.
At present ,I am using .append method of jquery,which does not seem to be working. I am getting "unable to get property of childnodes of undefined".The application only makes use of IE. Could I be pointed in the right direction. What am I doing wrong here?
$("<div style='background-color: #757575 border: 1px solid gray; ").append("MainDiv");
$("<table style='width: 100%; height: 100%'>").append("MainDiv");
$("<tr>" + "<td>" +
"<table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
"<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
"<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
"</tr>" +
"</table></td></tr></table></div>").append("MainDiv");
You could use append() like :
var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});
var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
"<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
"<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
"</tr>" +
"</table></td></tr>");
container_div.append(table);
$("#MainDiv").append(container_div);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>
Hope this helps.
NOTE : I suggest to create a class for the shared style between all tds so the code will be more readable :
var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});
var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td style='width:70px;' class='col' nowrap>ID</td>" +
"<td style='width:100px' class='col'>Name</td>" +
"<td style='width: 90px;text-align:left;' class='col'>Status</td>" +
"</tr>" +
"</table></td></tr>");
container_div.append(table);
$("#MainDiv").append(container_div);
.col{
background-color: #999999;
font-weight: bold;
color: black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>
You are close but not quite there.
$('MainDiv').append('some html here')
The .append method works in such a way that you have a selector:
$('MainDiv')
This selects some DOM element that you have available to work with, you then call the .append method on it:
$('Some Selector').append('Some HTML');
this inserts the html denoted by append() as the last child element of the selector $('Some Selector'), more on this can be found here.
You might also want to consider putting all the HTML you want to add into an array of strings that you can then loop through and append each of them to some element. This isn't the best way to achieve your goal but is a good way to understand jQuery and some of it's DOM manipulation methods.
I have a function MultiChoiceQues(theSeq, theQues, theChoices theAns). I then add the theQues in a p tag followed by the unordered list of all the respective options with an input of type radio for each option.
In an array variable allQues[] I created multiple instance for the function MultiChoiceQues passing different arguments. Now, on load I'm showing all the questions with their respective options.
How can I access and highlight all the correct answers?
var content = "";
function MultiChoiceQues(theSeq, theQues, theChoices, theAns) {
content += '<p>' + theQues + '</p> <ul>';
theChoices.forEach(function(eachChoice) {
content += '<li><input type="radio" name="' + theSeq + '"/> ' + eachChoice + '</li>';
});
content += '</ul>';
return content;
console.log(content);
}
var allQues = [
new MultiChoiceQues(1, "Who is Prime Minister of England?", ["Obama", "Blair", "Brown", "Cameron"], 4),
new MultiChoiceQues(2, "What is the Capital of Brazil?", ["São Paulo", "Rio de Janeiro", "Brasília", "Salvador"], 3),
new MultiChoiceQues(3, "Who won the French open 2016 in Men’s Single category?", ["Novak Djokovic", "Andy Murray", "Rafael Nadal"], 1)
];
function ShowAllQues() {
document.getElementById("container").innerHTML = content;
}
function ShowAllAns() {
/* Highlight all the correct answers */
}
body {
background: #f2f2f3;
font-family: 'Century Gothic';
font-weight: 100;
color: #0193b7;
}
ul {
list-style: none;
}
ul li:hover {
cursor: pointer;
color: #5bb12f;
}
#container {
border: 10px solid #293e6a;
padding: 0 0 20px 30px;
box-shadow: 0 0 5px 5px #c4c4c4;
}
p {
font-family: 'Eras ITC';
color: #e792b5;
font-size: 20px;
font-weight: normal;
}
.flyingButton {
position: fixed;
right: 18px;
top: 80px;
height: 50px;
width: 100px;
background: #293e6a;
border-radius: 25px 0 0 25px;
border: none;
color: #f2f2f2;
cursor: pointer;
}
.flyingButton:hover {
background: #0193b7;
}
.flyingButton:focus {
outline: 0;
}
<body onload="ShowAllQues();">
<div id="container">
</div>
<input type="button" value="Answers" class="flyingButton" onclick="ShowAllAns(); return false;">
</body>
Add the getAnswer method to your MultiChoiceQues constructor.
function MultiChoiceQues(theSeq, theQues, theChoices, theAns) {
content += '<p>' + theQues + '</p> <ul>';
theChoices.forEach(function(eachChoice) {
content += '<li><input type="radio" name="'+ theSeq +'"/> ' + eachChoice + '</li>';
});
content+='</ul>';
this.getAnswer = function () {
return theAns;
}
}
Then this is your answers function.
function ShowAllAns(){
/* Highlight all the correct answers */
var answers = allQues.map(function (question) {
return question.getAnswer();
})
var question_lists = document.getElementById("container").getElementsByTagName('ul');
for (var i = 0; i < question_lists.length; i++) {
var answer_index = answers[i];
var items = question_lists[i].childNodes;
items[answer_index - 1].style.background = "red";
}
}
https://jsfiddle.net/1prr4m7f/3/
tl;dr:
Add Class <ul class="answerChoicesGroup">
Replace return content with this.answer = theAns;
Create var getting answerChoicesGroup: answerChoicesGroup = document.getElementsByClassName('answerChoicesGroup');
Insert in showAllAns() the following:
.
function ShowAllAns() {
/* Highlight all the correct answers */
for (i = 0; i < allQues.length; i++) {
// Get the current answer group
var answerGroup = answerChoicesGroup[i],
// Access the correct radio input answer by getting the answer index from `allQues`
correctAnswer = answerGroup.children[allQues[i].answer - 1];
// Do whatever you'd like with `correctAnswer`
correctAnswer.firstElementChild.checked = true;
correctAnswer.classList.add('answer');
}
}
Explanation
You are on the right track by return content. Instead of that, (which won't return content because you have the keyword new) I just did this.answer = theAns. answer can be any word you'd like.
The way to access answer would be like any object. i.e.
var muiltipleChoiceQuestion = new MultiChoiceQues(1, "Who is Prime Minister of England?", ["Obama", "Blair", "Brown", "Cameron"], 4),
alert(muiltipleChoiceQuestion.answer) // result: 4
The next thing I did was, added a class name to all the ul's called answerChoicesGroup, and created a variable for that too.
In showAllAns() function, I iterated through allQues, and accessed the correct answer by:
Get the current answer group. (var answerGroup)
Access the correct radio input answer by getting the answer index from allQues. (var correctAnswer)
Do whatever you'd like with correctAnswer.
Here's the code:
Here's how you would do it:
JSFiddle
var content = "";
function MultiChoiceQues(theSeq, theQues, theChoices, theAns) {
content += '<p>' + theQues + '</p> <ul class="answerChoicesGroup">';
theChoices.forEach(function(eachChoice) {
content += '<li><input type="radio" name="' + theSeq + '"/> ' + eachChoice + '</li>';
});
content += '</ul>';
this.answer = theAns;
}
var allQues = [
new MultiChoiceQues(1, "Who is Prime Minister of England?", ["Obama", "Blair", "Brown", "Cameron"], 4),
new MultiChoiceQues(2, "What is the Capital of Brazil?", ["São Paulo", "Rio de Janeiro", "Brasília", "Salvador"], 3),
new MultiChoiceQues(3, "Who won the French open 2016 in Men’s Single category?", ["Novak Djokovic", "Andy Murray", "Rafael Nadal"], 1)
],
answerChoicesGroup = document.getElementsByClassName('answerChoicesGroup');
function ShowAllQues() {
document.getElementById("container").innerHTML = content;
}
function ShowAllAns() {
/* Highlight all the correct answers */
for (i = 0; i < allQues.length; i++) {
// Get the current answer group
var answerGroup = answerChoicesGroup[i],
// Access the correct radio input answer by getting the answer index from `allQues`
correctAnswer = answerGroup.children[allQues[i].answer - 1];
// Do whatever you'd like with `correctAnswer`
correctAnswer.firstElementChild.checked = true;
correctAnswer.classList.add('answer');
}
}
body {
background: #f2f2f3;
font-family: 'Century Gothic';
font-weight: 100;
color: #0193b7;
}
ul {
list-style: none;
}
ul li:hover {
cursor: pointer;
color: #5bb12f;
}
#container {
border: 10px solid #293e6a;
padding: 0 0 20px 30px;
box-shadow: 0 0 5px 5px #c4c4c4;
}
p {
font-family: 'Eras ITC';
color: #e792b5;
font-size: 20px;
font-weight: normal;
}
.flyingButton {
position: fixed;
right: 18px;
top: 80px;
height: 50px;
width: 100px;
background: #293e6a;
border-radius: 25px 0 0 25px;
border: none;
color: #f2f2f2;
cursor: pointer;
}
.flyingButton:hover {
background: #0193b7;
}
.flyingButton:focus {
outline: 0;
}
.answer {
color: green;
}
<body onload="ShowAllQues();">
<div id="container">
</div>
<input type="button" value="Answers" class="flyingButton" onclick="ShowAllAns();">
</body>
Try this with jQuery:
var content="";
function MultiChoiceQues(theSeq, theQues, theChoices, theAns) {
content += '<p>' + theQues + '</p> <ul>';
theChoices.forEach(function(eachChoice,index) {
if(index == theAns-1){
content += '<li class="options answer"><input type="radio" name="'+ theSeq +'"/> ' + eachChoice + '</li>';
}else{
content += '<li class="options"><input type="radio" name="'+ theSeq +'"/> ' + eachChoice + '</li>';
}
});
content+='</ul>';
return content;
}
var allQues = [
new MultiChoiceQues(1, "Who is Prime Minister of England?", ["Obama", "Blair", "Brown", "Cameron"], 4),
new MultiChoiceQues(2, "What is the Capital of Brazil?", ["São Paulo", "Rio de Janeiro", "Brasília", "Salvador"], 3),
new MultiChoiceQues(3, "Who won the French open 2016 in Men’s Single category?", ["Novak Djokovic", "Andy Murray", "Rafael Nadal"], 1)
];
function ShowAllQues(){
document.getElementById("container").innerHTML=content;
}
function ShowAllAns(){
$(".answer").addClass("green");
}
body {
background: #f2f2f3;
font-family: 'Century Gothic';
font-weight: 100;
color: #0193b7;
}
ul{
list-style:none;
}
ul li:hover{
cursor:pointer;
color:#5bb12f;
}
#container {
border: 10px solid #293e6a;
padding: 0 0 20px 30px;
box-shadow: 0 0 5px 5px #c4c4c4;
}
p {
font-family: 'Eras ITC';
color: #e792b5;
font-size: 20px;
font-weight: normal;
}
.flyingButton {
position: fixed;
right: 18px;
top: 80px;
height: 50px;
width: 100px;
background: #293e6a;
border-radius: 25px 0 0 25px;
border: none;
color: #f2f2f2;
cursor:pointer;
}
.green{
color: #1B6F1B;
font-size: 18px;
}
.flyingButton:hover {
background: #0193b7;
}
.flyingButton:focus{
outline:0;
}
<body onload="ShowAllQues();">
<div id="container">
</div>
<input type="button" value="Answers" class="flyingButton" onclick="ShowAllAns();
return false;">