Most of the action is in the function next. The other functions are provided for context. The global variable tally increments as it should when the right answer is selected. However the variable nr is not incremented and I can't figure out way it is not.
You can see that I commented out that the next function returned an object with tally and nr and assigned those values in the event listener. When I did it that way, it worked. But it should work the other way as well, right.
var nr = 0;
var tally = 0;
function onLoadEvent(nr) {
//alert('onload');
var quiz = document.getElementById('quiz');
var question = allQuestions[nr];
var next = quiz.lastElementChild;
var qHeader = "<h2>" + question.question + "</h2>";
var q = "";
for(var i=0;i<question.choices.length;i++){
q = q + '<p><label for="a' + i + '">' +
'<input type="radio" id="a' + i + '" name="q" value="' +
i + '">' + question.choices[i] + '</label></p>';
}
quiz.innerHTML = qHeader + q + next.outerHTML;
//next = document.getElementById('next');
}
function getChecked(){
var radios = document.getElementsByName('q');
var radio;
for(var i=0;i<radios.length;i++){
if(radios[i].checked){
radio = radios[i];
break;
}
}
return radio;
}
function next(nr){
if (getChecked() !== undefined) {
var answer = getChecked();
if(answer.value == allQuestions[nr].correctAnswer){
tally = tally + 1;
}
nr = nr + 1;
if (nr>=allQuestions.length){
alert("You got " + tally + " points!");
} else {
onLoadEvent(nr);
}
} else {
alert('You need to check a radio button');
}
//return {nr: nr, tally: tally};
}
var form = document.getElementById('quiz');
form.addEventListener('click', function(event){
if(event.target.id === 'next'){
next(nr);
//nr = obj.nr;
//tally = obj.tally;
} else if(event.target.id === 'prev'){}
}, false);
window.addEventListener('load', function(event){onLoadEvent(nr);}, false);
You are accepting parameters with same name nr which is hiding global scope nr.
Solution to your problem is remove nr as parameter. So use function onLoadEvent() instead of function onLoadEvent(nr)
Related
How do I remove just the current instance of the array, not all instances of the array?
var persons = [];
showAllButton.onclick = function() {
while (showList.firstChild)showList.removeChild(showList.firstChild);
Created new node instances.
for (var l in persons) {
var listNode = document.createElement("LI");
var btn = document.createElement("BUTTON");
btn.innerHTML = "Remove";
showList.appendChild(listNode);
showList.appendChild(btn);
Displays pushed instances correctly.
listNode.innerHTML =
'<p><b>Full Name:</b> ' + persons[l].firstName +' ' + persons[l].lastName + '</p>' +
'<p><b>Phone:</b> ' + persons[l].phone + '</p>' +
'<p><b>Address:</b> ' + persons[l].address + '</p>'
}
Tried a few variations of the following function but just empties the array, or at least wont return the amended array.
btn.onclick = function() {
var index = Array.indexOf(persons[l]);
persons.splice(index, 1);
return persons;
}
if (showAllButton.value=="Show Contacts") {
showAllButton.value = "Hide Contacts";
showList.style.display = "block";
}
else if (showAllButton.value = "Hide Contacts") {
showAllButton.value = "Show Contacts";
showList.style.display = "none";
}
}
probably bind l, remove the element at index l, then redraw the dom somehow.:
btn.onclick = function(l) { //take over the bound l
persons.splice(l, 1);
//some kind of redraw
showAllButton.click();
}.bind(null,l);//bind l
Something like this should work as expected (sorry, blind coding, have no time to test now)
var persons = [];
function removePerson(index) {
persons.splice(index, 1);
renderList();
}
function clearList() {
while (showList.firstChild) {
showList.removeChild(showList.firstChild);
}
}
function renderItem(person, index) {
var item = showList.appendChild(document.createElement("LI"));
var label = item.appendChild(document.createElement("SPAN"));
label.innerHTML = persons[i];
var btn = item.appendChild(document.createElement("BUTTON"));
btn.innerHRML = "Remove";
btn.onclick = removePerson.bind(null, index);
}
function renderList() {
clearList();
persons.forEach(renderItem);
}
Not a kind of best practices, but seems to be working.
Final Working Code, thank you!
showAllButton.onclick = function() {
while (showList.firstChild)showList.removeChild(showList.firstChild);
for (var l in persons) {
var list = showList.appendChild(document.createElement("LI"));
list.innerHTML =
'<p><b>Full Name:</b> ' + persons[l].firstName +' ' + persons[l].lastName + '</p>' +
'<p><b>Phone:</b> ' + persons[l].phone + '</p>' +
'<p><b>Address:</b> ' + persons[l].address + '</p>';
var btn = showList.appendChild(document.createElement("BUTTON"));
btn.innerHTML = "Remove";
btn.onclick = function(l) {
persons.splice(l, 1);
showAllButton.click();
}.bind(null,l);
}
In PHP it's easy to create variables.
for($i=1; $i<=$ges; $i++) {
${"q" . $i} = $_POST["q".i];
${"a" . $i} = $_POST["a".i];
}
The result is $a1 = $_POST["q1];
How is the right way for that in jQuery?
I need to create it dynamicly for an ajax dataset.
for (var i = 1; i < ges; ++i) {
var finalVar = "input[name='a" + i + "']:checked";
var qtext = $("#q"+ i).text();
if ($(finalVar).val() == null) {
qvar = 0
} else {
qvar = $(finalVar).val();
}
//write question text and value in q1, a1, q2, a2,...
//generate ajax data
params = params + "q" + i + ":" + "q" + i + ", " + "a" + i + ":" + "a" + i + ","
}
I want to set the question text in q1 and the answer in a1.
Well if am not wrong you want to accumulate answers related to questions from the HTML and want to send the data through ajax..
So u can do something like this:
var QnA = {};
$('.eventTrigger').click(function(e) {
e.preventDefault();
$('#parent').find('.QnA').each(function() {
QnA[$(this).find('.Que').text()] = $(this).find('.Ans').val();
})
console.log(QnA);
})
https://jsfiddle.net/jt4ow335/1/
The only thing you can do about it, is:
var obj = {}
for(var i = 0; i < 10; i++)
obj['cell'+i] = i
console.log(obj)
and pass obj as data
I've created a quiz where every question is a Question object which question has methods like print quiestion and so on. I've added my questions inside the javascript file but I want to move the questions to an external Json file.
However I can't find any article that covers how two create methods for the imported Json objects (the question objects) in this case. Here is a piece of code for the quiz object with one method before using getJson:
$(function(){
// <-- QUESTION OBJECT -->
function Question(question, choices, correctChoice, userAnswer, type) {
this.question = question;
this.choices = choices;
this.correctChoice = correctChoice;
this.userAnswer = userAnswer;
this.type = type; // either radio buttons or check boxes
// <-- write question method -->
this.writeQuestion = function() {
var questionContent;
questionContent = "<p class='question'>" + (currentQue + 1) + ". " + this.question + "</p>";
var checked = "";
if(this.type === "radio") {
for(var i=0; i < this.choices.length; i++) {
if((i+1) == this.userAnswer)
checked = "checked='checked'";
questionContent += "<p><input class='css-radio' id='radio" + (i+1) + "' " + checked + " type='radio' name='choices' value='choice'></input>";
questionContent += "<label class='css-label' for='radio" + (i+1) + "'>" + this.choices[i] + "</label></p>";
checked = "";
}
}
else {
for(var i=0; i < this.choices.length; i++) {
if ((i+1) == this.userAnswer[i])
checked = "checked='checked'";
questionContent += "<p><input class='css-checkbox' id='checkbox" + (i+1) + "' " + checked + " type='checkbox' name='choices' value='choice'></input>";
questionContent += "<label class='css-label-checkbox' for='checkbox" + (i+1) + "'>" + this.choices[i] + "</label></p>";
checked = "";
}
}
return $quizContent.html(questionContent);
};
You should create a constructor function that receives the json and defines all methods there, using the json you've provided, something rough like this:
function Question(questionJson) {
var data = questionJson;
//Public "methods" are defined to "this"
this.getCorrectAnswer = function() {
return data.correctAnswer;
};
//Private "methods
var doSomethingCrazy = function() {
return "crazy";
};
this.getSomethingCrazy = function() {
return doSomethingCrazy();
};
}
And then, lets say you have an array of questions:
var questions = [
{questionId: '1', correctAnswer: 'a', possibleAnswers: []},
{questionId: '2', correctAnswer: 'a', possibleAnswers: []},
];
You do:
var instances = [];
for (var q in questions) {
instances[q.questionId] = new Question(q);
}
This code worked:
var allQuestions = [];
var category = "history";
for(var i=0; i < jsonDataLength; i++) {
allQuestions[i] = new Question(); // create empty question Obj
var questionNr = "q" + (i+1).toString(); // store questionNr in variable
for(var properties in jsonData[category][questionNr]) // loop through questionObjs properties
allQuestions[i][properties] = jsonData[category][questionNr][properties];
// add them to empty QuestionObj
}
I have a function with this specific array in it.
var elementsArray = xmlDocument.documentElement.getElementsByTagName('track');
// console.log(elementsArray);
var arrayLength = elementsArray.length;
var output = "<table>";
for (var i=0; i < arrayLength; i++)
{
var title = elementsArray[i].getElementsByTagName('title')[0].firstChild.nodeValue;
var artist = elementsArray[i].getElementsByTagName('artist')[0].firstChild.nodeValue;
var length = elementsArray[i].getElementsByTagName('length')[0].firstChild.nodeValue;
var filename = elementsArray[i].getElementsByTagName('filename')[0].firstChild.nodeValue;
console.log(title + ' ' + artist + ' ' + length + ' ' + filename);
output += "<tr>";
output += ("<td onclick='songSelect(\"" + filename + "\")'>" + title + "</td><td>" + artist + "</td>");
output += "</tr>";
}
With this array how would i generate a previous and next button to move.
http://jsfiddle.net/xbesjknL/
Once could use a linked list or even the notion of C-like pointers that point at the prev/curr/next tracks. But alas this is Javascript and the client side is too processing burdened.
So you could just build your own simplified idea of pointers in a cursor like object that is constantly pointing at the current track's index, the previous track's index and the next. And you'd call the refresh method everytime the user clicks the prev or next buttons to update the cursor's pointers accordingly.
var cursor = {
prev:(elementsArray.length-1),
curr:0,
next:(1 % (elementsArray.length-1)),
refresh: function(button){ //button is either the btnPrev or btnNext elements
if (button.getAttribute("id") === "btnPrev") {
old_curr = this.curr;
this.curr = this.prev;
if ((this.curr-1) < 0)
this.prev = elementsArray.length-1;
else
this.prev = this.curr - 1;
this.next = old_curr;
} else {
old_curr = this.curr;
this.curr = this.next;
if ((this.curr+1) > (elementsArray.length-1))
this.next= 0;
else
if (elementsArray.length === 1)
this.next = 0;
else
this.next = this.curr+1;
this.prev = old_curr;
}
}
};
// example usage:
cursor.refresh(btnPrev);
elementsArray[cursor.curr]; // gives the previous track, which is now the current track
You can even simplify this even more by just keeping track of only the current track. Note
I know it sounds stupid, but i have no idea how to call my function from "onclick" function?
I made own class and what i wanna do is to call my function inside a class.
I have tried various stuff inside that onclick function:
function(){this.getWidth()}
this.getWidth()
Test.getWidth()
function Datagrid(_parent, _data)
{
this.table = [];
this.parent = $("#"+_parent)[0] ? $("#"+_parent) : ($("."+_parent)[0] ? $("."+_parent) : ($(+_parent)[0] ? $(_parent) : null));
this.data = _data;
this.Datagrid = function(parent,data)
{
this.setParent(parent);
if(data != null)
this.setData(data);
return this;
}
this.setParent = function(parent)
{
return this.parent = $("#"+parent)[0] ? $("#"+parent) : ($("."+parent)[0] ? $("."+parent) : ($(+parent)[0] ? $(parent) : null));
}
this.getParent = function()
{return this.parent;}
this.setData = function(data)
{this.data = data;}
this.buildTable = function()
{
var dtTbl = [];
dtTbl.push('<table class="TimeSheetmainTable" cellpadding="10" cellspacing="0" border="0">');
var style;
//Header//////////////////////
dtTbl.push('<tr class="header">');
for (var cell in this.data.row[0].cell) {
dtTbl.push('<td>' + this.data.row[0].cell[cell].id + '</td>');
}
dtTbl.push('</tr>');
//Content//////////////////////
for(var r in this.data.row)
{
if (r % 2 == 0) { style = 'class="r1" onmouseover="this.className=\'hover\'" onmouseout="this.className=\'r1\'"'; }
else { style = 'class="r2" onmouseover="this.className=\'hover\'" onmouseout="this.className=\'r2\'"'; }
dtTbl.push('<tr ' + style + ' >');
for(var c in this.data.row[r].cell)
{
dtTbl.push('<td alt="' + this.data.row[r].cell[c].id + '">' + this.data.row[r].cell[c].value + '</td>');
}
dtTbl.push('</tr>');
}
//Footer//////////////////////
dtTbl.push('<tr class="footer">');
for (var cell in this.data.row[0].cell) {
dtTbl.push('<td> </td>');
}
dtTbl.push('</tr></table>');
this.parent.html(dtTbl.join(''));
}
this.buildTableDiv = function()
{
var tableString = [];
//Header//////////////////////
tableString.push('<div class="container"><div class="header"><table><tr id="header">');
for (var cell in this.data.row[0].cell) {
tableString.push('<td>' + this.data.row[0].cell[cell].id + '</td>');
}
tableString.push('</tr></table></div>');
//Content//////////////////////
tableString.push('<div class="content"><table>');
var TD1 = new Object();
var TD2 = new Object();
for(var r in this.data.row)
{
if (r % 2 == 0) { style = 'class="r1" onmouseover="this.className=\'hover\'" onmouseout="this.className=\'r1\'"'; }
else { style = 'class="r2" onmouseover="this.className=\'hover\'" onmouseout="this.className=\'r2\'"'; }
for(var c in this.data.row[r].cell)
{
if(c == 0)
{ if(TD1.value != this.data.row[r].cell[c].value){
TD1.value = this.data.row[r].cell[c].value;
TD1.show = true;
}
else
TD1.show = false;
}
if(c == 1)
{ if(TD2.value != this.data.row[r].cell[c].value){
TD2.value = this.data.row[r].cell[c].value;
TD2.show = true;
}
else
TD2.show = false;
}
if(TD1.show && c == 0){//First line
tableString.push('<tr id="content" ' + style + ' >');
tableString.push('<td alt="' + this.data.row[r].cell[c].id + '"><input type="button" class="arrow_down" /> ' + this.data.row[r].cell[c].value + '</td>');
for(var c = 0; c < this.data.row[r].cell.length - 1; c++)
{
tableString.push('<td> </td>');
}
tableString.push('</tr>');
}
else if(TD2.show && c == 1)//Second line
{
tableString.push('<tr id="content" ' + style + ' >');
tableString.push('<td> </td><td alt="' + this.data.row[r].cell[c].id + '">' + this.data.row[r].cell[c].value + '</td>');
for(var c = 0; c < this.data.row[r].cell.length - 2; c++)
{
tableString.push('<td> </td>');
}
tableString.push('</tr><tr id="content" ' + style + ' ><td> </td><td> </td>');
}
else if(!TD2.show && c == 1)//third line (distincts second cells name)
{
tableString.push('<tr id="content" ' + style + ' >');
tableString.push('<td> </td><td alt="' + this.data.row[r].cell[c].id + '"> </td>');
}
else if(c > 1)//Rest filling (not ordered stuff)
{
tableString.push('<td alt="' + this.data.row[r].cell[c].id + '">' + this.data.row[r].cell[c].value.replace(""," ") + '</td>');
}
}
tableString.push('</tr>');
// $(".arrow_down").children(":nth-child(1)").click(function(){alert("test");});
}
tableString.push('</table></div>');
//Footer//////////////////////
tableString.push('<div class="footer"><table><tr id="footer">');
for (var cell in this.data.row[0].cell) {
tableString.push('<td> </td>');
}
tableString.push('</tr></table></div></div>');
this.parent.html(tableString.join(''));
// Setting width to all cells
for (var i in this.data.row[0].cell)
{
cell = parseInt(i)+1;
var h = this.parent.children(":first").children(".header").children("table").children("tbody").children("tr").children(":nth-child("+ cell +")").width();
var c = this.parent.children(":first").children(".content").children("table").children("tbody").children("tr").children(":nth-child("+ cell +")").width();
var f = this.parent.children(":first").children(".footer").children("table").children("tbody").children("tr").children(":nth-child("+ cell +")").width();
var width = h > c ? h : (c > f ? c : f);
this.parent.children(":first").children(".header").children("table").children("tbody").children("tr").children(":nth-child("+ cell +")").width(width);
this.parent.children(":first").children(".content").children("table").children("tbody").children("tr").children(":nth-child("+ cell +")").width(width);
this.parent.children(":first").children(".footer").children("table").children("tbody").children("tr").children(":nth-child("+ cell +")").width(width);
}
// this.activateScroller(0);
}
this.getScrollerWidth = function()
{
var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
// Append our div, do our calculation and then remove it
$('body').append(div);
var w1 = $('div', div).innerWidth();
div.css('overflow-y', 'scroll');
var w2 = $('div', div).innerWidth();
$(div).remove();
return (w1 - w2);
}
this.activateScroller = function(value)
{
var d = [];
d.push('<div style="height: ' + this.parent.children(":first").children(".content").height() + '; width:20px; background:#FFF"><div style="background:#333; height:200"> </div></div>');
this.parent.children(":first").children(".content").scrollTop(value);
}
expandParent = function()
{
alert(this.parent);
}
};
i am kinda makig datagrid based on javascript. i am not allowed to use jQuery UI.
My datagrid is made from tables. now i try to add a button inside a td element like User Name
The problem is that i cant access my function inside my class without making instance. is it even possible to do that without making an instance?
Once your html is generated using your generateHTML function, the handler for onclick on div looses context of what "this" is. To be more specific, this in onclick handler for div refers to that div node in DOM.
To access getWidth method you have to make it available to global context or (better solution) do something like this:
// new version of your generateHTML function
this.generateHTML() {
var str = [];
str.push('<div><input type="button" value="button"/></div>');
var that = this;
$("#testDiv").append(str.join('')).find('button:first').click(function() {that.getWidth()});
}
EDIT:
To further explain how code above works, here's simplified example with comments.
Test = function() {
this.generate = function() {
var newnode = $('<button>click me</button>');
$("body").append(newnode);
// "cache" this in a variable - that variable will be usable in event handler
var that = this;
// write event handler function here - it will have access to your methods by using "that" variable
newnode.click(function(e) {
// here this refers to button not Test class
// so we have to "reach" to outer context to gain access to all methods from Test
that.doSomething('learn');
})
}
this.doSomething = function(x) {
alert('do it: '+x);
}
}
// initialize part
// make instance of Test "class"
t = new Test();
// generate the button (clicking on a button will essentialy fire Test.doSomething function in a context of "t"
t.generate();