Can't validate this! Validation process keeps stopping - javascript

I'm having problems validating this piece of javascript code. JSlint keeps stopping after the first for instruction and I can't seem to figure out why. It seems as if the validator is picking on warnings rather than errors (such as "use space instead of tabs" or "expected +=1 instead of ++" which all seem fine to me). Also, I'm not sure if it does what it's supposed to but I can't check that until I get the validation done.
var prompt = document.getElementById("prompt");
var response = document.getElementById("response");
var warning = document.getElementById("warning");
var fixation = 'fixPlus.jpg';
var cueImage = ['fixPlus.jpg', 'midCue.jpg', 'bothCue.jpg', 'topCue.jpg', 'botCue.jpg'];
//images for stimuli were taken from wheedesign.com
var stImage = ['T_L_N.jpg', 'T_L_C.jpg', 'T_L_I.jpg', 'T_R_N.jpg', 'T_R_C.jpg', 'T_R_I.jpg', 'B_L_N.jpg', 'B_L_C.jpg', 'B_L_I.jpg', 'B_R_N.jpg', 'B_R_C.jpg', 'B_R_I.jpg'];
var condIdx[1];
var i;
for (i = 2, i <= 47; i++) {
condIdx.push(i);
}
var cueType = ['0', '1', '2']; //I will use a repetitive instruction instead of writing 000,111, etc
for (i = 0; i < 11; i++) {
cuetype[i] = 0;
}
for (i = 12; i < 23; i++) {
cueType[i] = 1;
}
for (i = 24; i < 35; i++) {
cueType[i] = 2;
}
for (i = 36; i < 41; i++) {
cueType[i] = 3;
}
for (i = 42; i < 47; i++) {
cueType[i] = 4;
}
var stType = ['0', '1', '2', '3', '4', '5', '6', '7'];
var ansKey = ['Z', 'Z', 'Z', 'Z', 'Z', 'Z', 'M', 'M', 'M', 'M', 'M', 'M'];
var promptTxt = 'Press Z for left and M for right';
var invalidTxt = ' -- Invalid key press!!!';
var correctTxt = 'correct answer!';
var incorrectTxt = 'incorrect answer!'
var waitTxt = 'Wait for the prompt!';
var tooSlow = 'Too slow!';
var toa = 400; //trial onset asynchrony in ms
var preCueFixTime[500, 600, 700, 800, 900, 1000, 1100, 1200]; //pre-cue fixation
var cueTime = 100; // cue in ms
var postCueTime = 400; //post-cue fixation
var maxStTime = 1500; //stimulus display (until a key is pressed or 1500ms has lapsed)
var promptTime = 1500; // duration of response prompt in ms
var nTrial = isPractice ? 1 : 24;
var trialCounter = 0; //to keep track of progress
var remainStr = ''; //remaining trials
var doneStr = ''; //trials completed
var indxChar = '='; //character used to indicate a trial
var remainColor = 'LightBlue'; //color to display remainStr
var doneColor = 'Navy';
var progTxt = 'Progress: '.fontcolor(doneColor);
var rspArr = []; //to store responses
var cssFile = '<link rel = "stylesheet" type = "text/css" href = "rngStyle.css">';
var blocks = 0;
function block_initiation() {
if (blocks < 7) {
warning.innerHTML = '';
response.innerHTML = '';
object.onclick = "trialBlock()" + 'Click here to begin a block of trials!';
blocks++;
updateProgress();
} else {
submitData();
}
}
function trialBlock() {
"use strict";
condIdx = shuffle(condIdx);
preCueFixTime = shuffle(preCueFixTime);
cueImage = shuffle(cueImage);
for (i = 0; i < 6; i++) {
var theTask = setInterval(function () {
aTrial();
}, toa);
}
}
function aTrial() {
"use strict";
if (trialCounter < nTrial) {
warning.innerHTML = '';
response.innerHTML = '';
getKeypress();
trialCounter++;
updateProgress();
} else {
submitData();
}
}
function getKeypress() {
"use strict";
rspArr.push(0);
// fixation - cue - fixation - stimulus - key press/too slow
var interval = window.setInterval(function () {
if (fixation.display == 'hidden') {
fixation.style.visibility = 'visible';
} else {
fixation.style.visibility = 'hidden';
}
}, preCueFixTime[trialCounter]); //display initial fixation
if (cueImage[trialCounter].display == 'hidden') {
cueImage[trialCounter].style.visibility = 'visible';
} else {
cueImage[trialCounter].style.visibility = 'hidden';
}
}, 100); //shows cue display for 100ms
prompt.innerHTML = promptTxt; //show the prompt text
setTimeout(function () {
prompt.innerHTML = '';
}, promptTime);
if (stImage[condIdx[trialCounter]].display == 'hidden') {
stImage[condIdx[trialCounter].style.visibility = 'visible';
} else {
stImage[condIdx[trialCounter]].style.visibility = 'hidden';
}
}, 1500);
setTimeout(function () {
tooSlow.innerHTML = '';
}, tooSlow);
var inputRecorded = false;
document.onkeydown = function (e) {
if (inputRecorded) {
warning.innerHTML = waitTxt;
cueImage[trialCounter].style.visibility = 'hidden';
return false; //to cancel the event
}
e = e || window.event;
var key_press = String.fromCharCode(e.keyCode);
var regex = /[MZ]/;
condIdx[trialCounter].innerHTML = '';
//stImage[indeces 1 to 6] should be Z and stImage[7-12] should be M
var stStart = new Date();
fixation + cueImage[trialCounter] + fixation + stImage[condIdx[trialCounter]];
setTimeout(function () {
fixation.innerHTML = '';
}, preCueFixTime[trialCounter]); //this will still show preCueFixTime in ascending order
if (key_press.search(regex) > -1) {
var stEnd = new Date();
var RT = stEnd.getTime() - stStart.getTime();
//something was pressed
if (condIdx[trialCount] < 7 && key_press == 'Z'
OR condIdx[trialCount] >= 7 && key_press == 'M') {
//correct!
var correct = true;
trialCond = [cond Idx, cueType, correct, RT];
rspArr[trialCount] = trialCond.join();
response.innerHTML = key_press;
clearInterval(tooSlow); // cancel Too Slow
clearInterval(stImage[trialCounter]); //cancel stimulus display
warning.innerHTML = correctTxt;
} else {
//incorrect!
var correct = false;
rspArr[rspArr.length - 1] = key_press;
response.innerHTML = key_press;
clearInterval(tooSlow); // cancel Too Slow
clearInterval(stImage[trialCounter]); //cancel stimulus display
warning.innerHTML = incorrectTxt;
}
} else {
warning.innerHTML = key_press + invalidTxt;
}
inputRecorded = true;
}; //document.onkeydown
}
function updateProgress() {
"use strict";
//alert (trialCounter + ' ' + remainStr);
if (trialCounter === 0) {
for (var i = 0; i < nTrial; i++) {
remainStr += indxChar;
}
} else {
doneStr += indxChar;
remainStr = remainStr.slice(0, -1);
}
progress.innerHTML = progTxt + doneStr.fontcolor(doneColor) + remainStr.fontcolor(remainColor);
}
function checkProgress() {
"use strict";
var j, tot = 0,
n = rspArr.length;
//alert(tot + ' ' + n);
for (j = n - 5; j < n; j++) {
if (rspArr[j] > 0) {
tot++;
}
}
var actionAttr, fbkTxtm, valueAttr;
if (tot > 3) {
actionAttr = 'action="rng04Task.php"';
fbkTxt = '<h2>Good! That ends the practice. </h2>';
valueAttr = 'value="Click here to formally begin the task"';
} else {
actionAttr = 'action="rng03Practice.php"';
fbkTxt = '<h2>You are not quite in sync with the prompts </h2>' + '<h2> Please try again </h2>';
valueAttr = 'value="Click here to have some more practice"';
}
document.write(cssFile +
'<form class="center"' + actionAttr + '>' + fbkTxt + '<input class = "myButton" type="submit"' + valueAttr + '>' + '</form>');
//alert(cssFile +
//'<form class="center"' + actionAttr + '>' + fbkTxt + '<input class = "myButton" type="submit"' + valueAttr + '>' + '</form>');
}
function shuffle(arr) {
"use strict";
for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return arr;
//function taken and adapted from http://jsfromhell.com/array/shuffle
};
function submitData() {
"use strict";
}

I suspect it's failing on:
var condIdx[1];
As I don't think that's valid js syntax. You are attempting to declare a variable name, and provide a size/or access an index, in the same line, without an equality statement?

Related

Blogger random post display to prevent no posts infinite loop

How can I get Blogger to display random posts, while preventing an infinite loop when there are no posts to display?
Here is my JavaScript code which I am attempting to use:
<script>
var dt_numposts = 10;
var dt_snippet_length = 100;
var dt_info = 'true';
var dt_comment = 'Comment';
var dt_disable = '';
var dt_current = [];
var dt_total_posts = 0;
var dt_current = new Array(dt_numposts);
function totalposts(json) {
dt_total_posts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/summary?max-results=100&orderby=published&alt=json-in-script&callback=totalposts\"><\/script>');
function getvalue() {
for (var i = 0; i < dt_numposts; i++) {
var found = false;
var rndValue = get_random();
for (var j = 0; j < dt_current.length; j++) {
if (dt_current[j] == rndValue) {
found = true;
break
}
};
if (found) {
i--
} else {
dt_current[i] = rndValue
}
}
};
function get_random() {
var ranNum = 1 + Math.round(Math.random() * (dt_total_posts - 1));
return ranNum
};
function random_list(json) {
a = location.href;
y = a.indexOf('?m=0');
for (var i = 0; i < dt_numposts; i++) {
var entry = json.feed.entry[i];
var dt_posttitle = entry.title.$t;
if ('content' in entry) {
var dt_get_snippet = entry.content.$t
} else {
if ('summary' in entry) {
var dt_get_snippet = entry.summary.$t
} else {
var dt_get_snippet = "";
}
};
dt_get_snippet = dt_get_snippet.replace(/<[^>]*>/g, "");
if (dt_get_snippet.length < dt_snippet_length) {
var dt_snippet = dt_get_snippet
} else {
dt_get_snippet = dt_get_snippet.substring(0, dt_snippet_length);
var space = dt_get_snippet.lastIndexOf(" ");
dt_snippet = dt_get_snippet.substring(0, space) + "…";
};
for (var j = 0; j < entry.link.length; j++) {
if ('thr$total' in entry) {
var dt_commentsNum = entry.thr$total.$t + ' ' + dt_comment
} else {
dt_commentsNum = dt_disable
};
if (entry.link[j].rel == 'alternate') {
var dt_posturl = entry.link[j].href;
if (y != -1) {
dt_posturl = dt_posturl + '?m=0'
}
var dt_postdate = entry.published.$t;
if ('media$thumbnail' in entry) {
var dt_thumb = entry.media$thumbnail.url
} else {
dt_thumb = "https://blogspot.com/"
}
}
};
document.write('<img alt="' + dt_posttitle + '" src="' + dt_thumb + '"/>');
document.write('<div>' + dt_posttitle + '</div>');
if (dt_info == 'true') {
document.write('<span>' + dt_postdate.substring(8, 10) + '/' + dt_postdate.substring(5, 7) + '/' + dt_postdate.substring(0, 4) + ' - ' + dt_commentsNum) + '</span>'
}
document.write('<div style="clear:both"></div>')
}
};
getvalue();
for (var i = 0; i < dt_numposts; i++) {
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/summary?alt=json-in-script&start-index=' + dt_current[i] + '&max-results=1&callback=random_list\"><\/script>')
};
</script>
Expected output:
?
Actual output:
?
It looks like your post is mostly code; please add some more details.
It looks like you're trying to populate dt_current with dt_numposts = 10 elements. I modified getvalue() as follows, so that dt_numposts is capped at dt_total_posts, which may be 0. This allows the outer for loop to exit.
function getvalue() {
dt_numposts = (dt_total_posts < dt_numposts) ? dt_total_posts : dt_numposts;
// ...
I couldn't test this, because I don't have an example /feeds/posts/summary?max-results=100&orderby=published&alt=json-in-script&callback=totalposts JSON resource, but it works for zero posts. Whether is works for dt_numposts > 0, you'll need to test!

How to detect joy-con input/motion controls in HTML5 JavaScript

I am trying to create an HTML5 JavaScript game that uses Nintendo Switch Joy-Cons and motion controls. The problem is, I don't know how to detect motion controls from Joy-Cons when they are connected to my PC.
I've managed to achieve button inputs with Xbox controllers, PS4, and Joy Con using Gamepad API, but is it possible to do so with Joy-Con motion controls?
Here is the code for Gamepad API if you want to see it(Again, I'm aiming for Joy-Con motion controls):
var haveEvents = 'ongamepadconnected' in window;
var controllers = {};
function connecthandler(e) {
addgamepad(e.gamepad);
}
function addgamepad(gamepad) {
controllers[gamepad.index] = gamepad;
var d = document.createElement("div");
d.setAttribute("id", "controller" + gamepad.index);
var t = document.createElement("h1");
t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
d.appendChild(t);
var b = document.createElement("div");
b.className = "buttons";
for (var i = 0; i < gamepad.buttons.length; i++) {
var e = document.createElement("span");
e.className = "button";
//e.id = "b" + i;
e.innerHTML = i;
b.appendChild(e);
}
d.appendChild(b);
var a = document.createElement("div");
a.className = "axes";
for (var i = 0; i < gamepad.axes.length; i++) {
var p = document.createElement("progress");
p.className = "axis";
//p.id = "a" + i;
p.setAttribute("max", "2");
p.setAttribute("value", "1");
p.innerHTML = i;
a.appendChild(p);
}
d.appendChild(a);
var start = document.getElementById("start");
if (start) {
start.style.display = "none";
}
document.body.appendChild(d);
requestAnimationFrame(updateStatus);
}
function disconnecthandler(e) {
removegamepad(e.gamepad);
}
function removegamepad(gamepad) {
var d = document.getElementById("controller" + gamepad.index);
document.body.removeChild(d);
delete controllers[gamepad.index];
}
function updateStatus() {
if (!haveEvents) {
scangamepads();
}
var i = 0;
var j;
for (j in controllers) {
var controller = controllers[j];
var d = document.getElementById("controller" + j);
var buttons = d.getElementsByClassName("button");
for (i = 0; i < controller.buttons.length; i++) {
var b = buttons[i];
var val = controller.buttons[i];
var pressed = val == 1.0;
if (typeof(val) == "object") {
pressed = val.pressed;
val = val.value;
}
var pct = Math.round(val * 100) + "%";
b.style.backgroundSize = pct + " " + pct;
if (pressed) {
b.className = "button pressed";
//Pressed down code here
} else {
b.className = "button";
//Release button code here
}
}
var axes = d.getElementsByClassName("axis");
for (i = 0; i < controller.axes.length; i++) {
var a = axes[i];
a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
a.setAttribute("value", controller.axes[i] + 1);
}
}
requestAnimationFrame(updateStatus);
}
function scangamepads() {
var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
for (var i = 0; i < gamepads.length; i++) {
if (gamepads[i]) {
if (gamepads[i].index in controllers) {
controllers[gamepads[i].index] = gamepads[i];
} else {
addgamepad(gamepads[i]);
}
}
}
}
window.addEventListener("gamepadconnected", connecthandler);
window.addEventListener("gamepaddisconnected", disconnecthandler);
if (!haveEvents) {
setInterval(scangamepads, 500);
}
Using this link for reference
Wei Gao explained this in a React Knowledgeable meetup last week.
You can learn how she did it through her presentation or her slides.
You can visit the talk page for more information.

Other js function is ignoring my realtime calc function

I am at a lost here and have tried everything. My realtime calculation was being done into separate js file, but since I started using bootstrap template, it is not being executed. I have read through it and tried different thing but nothing is happening.
Php for calling realtime calc
<!-- ======================== PHONE INSURANCE ======================== -->
<select name="insurance" id='insurance' onChange="portInDatabase();">
<option disabled >Select Insurance</option>
<option value="None">None</option>
<option value="7">Yes</option>
</select><br>
<!-- ======================== PHONE CASE ======================== -->
<select name="case" id='case' onChange="portInDatabase()" onclick='portInDatabase()'>
<option disabled >Select Phone Case</option>
<option value="None">None</option>
<option value="25">Regular</option>
<option value="30">Wallet</option>
</select><br>
<!-- ======================== SCREEN PROTECTOR ======================== -->
<select name="screen" id='screen' onChange="portInDatabase();">
<option disabled >Select Screen Protector</option>
<option value="None">No</option>
<option value="15">Yes</option>
</select><br>
<!-- ======================== TOTAL FROM JS ======================== -->
<div id='total'></div>
Js for Real time calc(sorry for the long code)
// Array for plan prices
var plan_prices = new Array();
plan_prices["None"]= 0;
plan_prices["35"]=35;
plan_prices["50"]=50;
plan_prices["60"]=60;
// Array for insurance where "None" is the id from the html and it is equivalent
// to value 0 and so on
var insurance_phone = new Array();
insurance_phone["None"]=0;
insurance_phone["7"]=7;
//Array for phone case for price calculation
var phone_case = new Array();
phone_case["None"]=0;
phone_case["25"] = 25;
phone_case["30"] = 30;
//Array for screen protector
var screen_protector = new Array();
screen_protector["None"]=0;
screen_protector["15"] = 15;
// function for getting the plan price from the dropList
function getPlanPrice() {
var planSelected = 0;
var selectForm= document.forms["device"];
var selectedDevice3=selectForm.elements["plan"];
planSelected = plan_prices[selectedDevice3.value];
return planSelected;
}// end getPlanPrice
// function for getting the price when it is selected in the html dropList. This
// selection will single out the price we need for calculation.
function getInsurancePrice() {
var insuranceSelected = 0;
var selectForm= document.forms["device"];
var selectedDevice4=selectForm.elements["insurance"];
insuranceSelected = insurance_phone[selectedDevice4.value];
return insuranceSelected;
}// end getInsurancePrice
// Get the price for the selected option in the dropList to calculate.
function getCasePrice() {
var caseSelected = 0;
var selectForm= document.forms["device"];
var selectedDevice5=selectForm.elements["case"];
caseSelected = phone_case[selectedDevice5.value];
return caseSelected;
}// getCasePrice
// function to get the price for the screen.
function getScreenPrice() {
var screenSelected = 0;
var selectForm= document.forms["device"];
var selectedDevice6=selectForm.elements["screen"];
screenSelected = screen_protector[selectedDevice6.value];
return screenSelected;
}// getScreenPrice
// This function splits the data in the database to calculate the price for the
// device when port in is selected or when upgrade is selected and then it also checks
// whether anything else is selected in the form and does the real time calculation and
// outputs the result.
function portInDatabase(){
console.log("PortInDatabase started..")
debugger;
var price1, price2, price3, price4, price5, price6 = 0;
var port = 0;
var newAct = 0;
var up = 0;
var down = 0;
var act= 25; //Activation fee
// if the selection is a number then execute this
if(!isNaN(getPlanPrice())){
price2= getPlanPrice();
}
if(!isNaN(getInsurancePrice())){
price3= getInsurancePrice();
}
if(!isNaN(getCasePrice())){
price4= getCasePrice();
}
if(!isNaN(getScreenPrice())){
price5= getScreenPrice();
}
// This if statement is executed when Port is selected in the dropList and then
// it splits the rows which is connected to the device accordingly and then checks
// whether any of the other dropLists are selected so it can then calulate them and output it.
debugger;
if (document.getElementById('myport').selected == true){
var selDev = document.getElementById('selectDevice').value;
var port = selDev.split('#')[4]; // number of row in the database
port= parseFloat(port) +parseFloat(selDev.split('#')[1]*0.092)+price2 + price3 + price4 +price5+act;
port = port.toFixed(2); // rounds the decimal to 2
debugger;
document.getElementById('total').innerHTML= "Your Total: " +port;
}//end if
// for new Activation selection
else if(document.getElementById('srp').selected == true){
var selDev = document.getElementById('selectDevice').value;
var newAct = selDev.split('#')[1];
newAct= parseFloat(newAct) +parseFloat(selDev.split('#')[1]*0.092)+price2 + price3 + price4 +price5+act;
newAct = newAct.toFixed(2);
document.getElementById('total').innerHTML= "Your Total: " +newAct;
}//elseif
//for upgrade selection
else if(document.getElementById('upgrade').selected == true){
var selDev = document.getElementById('selectDevice').value;
var up = selDev.split('#')[2];
up = parseFloat(up) +parseFloat(selDev.split('#')[1]*0.092)+price2 + price3 + price4 +price5+act;
up = up.toFixed(2);
document.getElementById('total').innerHTML= "Your Total: " +up;
}//2nd elseif
//for down selection
else if(document.getElementById('down').selected == true){
var selDev= document.getElementById('selectDevice').value;
var down= selDev.split('#')[6];
down = parseFloat(port) +parseFloat(selDev.split('#')[1]*0.092)+price2 + price3 + price4 +price5+act;
down = down.toFixed(2);
document.getElementsById('total').innerHTML= "Your Total: " +down;
}//end 3rd elseif
else{
return false;
}//end else
}// end portInDatabase
JS of styling that is preventing real time calc
var CuteSelect = CuteSelect || {};
FIRSTLOAD = true;
SOMETHINGOPEN = false;
CuteSelect.tools = {
canRun: function() {
var myNav = navigator.userAgent.toLowerCase();
var browser = (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
if(browser) {
return (browser > 8) ? true : false;
} else { return true; }
},
uniqid: function() {
var n= Math.floor(Math.random()*11);
var k = Math.floor(Math.random()* 1000000);
var m = String.fromCharCode(n)+k;
return m;
},
hideEverything: function() {
if(SOMETHINGOPEN) {
SOMETHINGOPEN = false;
targetThis = false;
var cells = document.getElementsByTagName('div');
for (var i = 0; i < cells.length; i++) {
if(cells[i].hasAttribute('data-cuteselect-options')) {
var parent = cells[i].parentNode;
cells[i].style.opacity = '0';
cells[i].style.display = 'none';
}
}
}
},
getStyle: function() {
var css = '';
var stylesheets = document.styleSheets;
var css = '';
for(s = 0; s < stylesheets.length; s++) {
var classes = stylesheets[s].rules || stylesheets[s].cssRules;
for (var x = 0; x < classes.length; x++) {
if(classes[x].selectorText != undefined) {
var selectPosition = classes[x].selectorText.indexOf('select');
var optionPosition = classes[x].selectorText.indexOf('option');
var selectChar = classes[x].selectorText.charAt(selectPosition - 1);
var optionChar = classes[x].selectorText.charAt(optionPosition - 1);
if(selectPosition >= 0 && optionPosition >= 0 && (selectChar == '' || selectChar == '}' || selectChar == ' ') && (optionChar == '' || optionChar == '}' || optionChar == ' ')) {
text = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText;
css += text.replace(/\boption\b/g, '[data-cuteselect-value]').replace(/\bselect\b/g, '[data-cuteselect-item]');
continue;
}
if(selectPosition >= 0) {
var character = classes[x].selectorText.charAt(selectPosition - 1);
if(character == '' || character == '}' || character == ' ') {
text = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText;
css += text.replace(/\bselect\b/g, '[data-cuteselect-item]');
}
}
if(optionPosition >= 0) {
var character = classes[x].selectorText.charAt(optionPosition - 1);
if(character == '' || character == '}' || character == ' ') {
text = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText;
css += text.replace(/\boption\b/g, '[data-cuteselect-value]');
}
}
}
}
}
return css;
},
createSelect: function(item) {
// Create custom select
var node = document.createElement("div");
if(item.hasAttribute('id')) { // Catch ID
node.setAttribute('id', item.getAttribute('id'));
item.removeAttribute('id');
}
if(item.hasAttribute('class')) { // Catch Class
node.setAttribute('class', item.getAttribute('class'));
item.removeAttribute('class');
}
// Hide select
item.style.display = 'none';
// Get Default value (caption)
var caption = null;
var cells = item.getElementsByTagName('option');
for (var i = 0; i < cells.length; i++) {
caption = cells[0].innerHTML;
if(cells[i].hasAttribute('selected')) {
caption = cells[i].innerHTML;
break;
}
}
// Get select options
var options = '<div data-cuteselect-title>' + caption + '</div><div data-cuteselect-options><div data-cuteselect-options-container>';
var cells = item.getElementsByTagName('option');
for (var i = 0; i < cells.length; i++) {
if(cells[i].hasAttribute('disabled')) { continue; }
if(cells[i].hasAttribute('class')) { var optionStyle = ' class="' + cells[i].getAttribute('class') + '"'; } else { var optionStyle = ''; }
if(cells[i].hasAttribute('id')) { var optionId = ' id="' + cells[i].getAttribute('id') + '"'; } else { var optionId = ''; }
if(cells[i].hasAttribute('selected')) { options += '<div data-cuteselect-value="' + cells[i].value + '" data-cuteselect-selected="true"' + optionStyle + optionId + '>' + cells[i].innerHTML + '</div>'; }
else { options += '<div data-cuteselect-value="' + cells[i].value + '"' + optionStyle + optionId + '>' + cells[i].innerHTML + '</div>'; }
}
options += '</div></div>';
// New select customization
node.innerHTML = caption;
node.setAttribute('data-cuteselect-item', CuteSelect.tools.uniqid());
node.innerHTML = options; // Display options
item.setAttribute('data-cuteselect-target', node.getAttribute('data-cuteselect-item'));
item.parentNode.insertBefore(node, item.nextSibling);
// Hide all options
CuteSelect.tools.hideEverything();
},
//settings of the options, their position and all
show: function(item) {
if(item.parentNode.hasAttribute('data-cuteselect-item')) { var source = item.parentNode.getAttribute('data-cuteselect-item'); }
else { var source = item.getAttribute('data-cuteselect-item'); }
var cells = document.getElementsByTagName('select');
if(item.hasAttribute('data-cuteselect-title')) {
item = item.parentNode;
var cells = item.getElementsByTagName('div');
}
else { var cells = item.getElementsByTagName('div'); }
for (var i = 0; i < cells.length; i++) {
if(cells[i].hasAttribute('data-cuteselect-options')) {
targetItem = cells[i];
cells[i].style.display = 'block';
setTimeout(function() { targetItem.style.opacity = '1'; }, 10);
cells[i].style.position = 'absolute';
cells[i].style.left = item.offsetLeft + 'px';
cells[i].style.top = (item.offsetTop + item.offsetHeight) + 'px';
}
}
item.focus();
SOMETHINGOPEN = item.getAttribute('data-cuteselect-item');
},
selectOption: function(item) {
var label = item.innerHTML;
var value = item.getAttribute('data-cuteselect-value');
var parent = item.parentNode.parentNode.parentNode;
var target = parent.getAttribute('data-cuteselect-item');
var cells = parent.getElementsByTagName('div');
for (var i = 0; i < cells.length; i++) {
if(cells[i].hasAttribute('data-cuteselect-title')) { cells[i].innerHTML = label; }
}
// Real select
var cells = document.getElementsByTagName('select');
for (var i = 0; i < cells.length; i++) {
var source = cells[i].getAttribute('data-cuteselect-target');
if(source == target) { cells[i].value = value; }
}
//CuteSelect.tools.hideEverything();
},
writeStyles: function() {
toWrite = '<style type="text/css">' + CuteSelect.tools.getStyle() + ' [data-cuteselect-options] { opacity: 0; display: none; }</style>';
document.write(toWrite);
}
};
CuteSelect.event = {
parse: function() {
var cells = document.getElementsByTagName('select');
for (var i = 0; i < cells.length; i++) { CuteSelect.tools.createSelect(cells[i]); }
},
listen: function() {
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) { CuteSelect.tools.hideEverything(); }
};
document.onclick = function(event) {
FIRSTLOAD = false;
if((!event.target.getAttribute('data-cuteselect-item') && !event.target.getAttribute('data-cuteselect-value') && !event.target.hasAttribute('data-cuteselect-title')) || ((event.target.hasAttribute('data-cuteselect-item') || event.target.hasAttribute('data-cuteselect-title')) && SOMETHINGOPEN)) {
CuteSelect.tools.hideEverything();
return;
}
//when selected the option dropdown list closes
var action = event.target;
if(event.target.getAttribute('data-cuteselect-value')) {
CuteSelect.tools.selectOption(action);
CuteSelect.tools.hideEverything();
}
else { CuteSelect.tools.show(action); }
return false;
}
},
manage: function() {
if(CuteSelect.tools.canRun()) { // IE Compatibility
CuteSelect.event.parse();
CuteSelect.event.listen();
CuteSelect.tools.writeStyles();
}
}
};
// document.onload(function() {
CuteSelect.event.manage();
// });
I did not want to post this long question, but I am lost and do not know what to do. Thanks and sorry.

variable assignment doesn't work javascript

In the following code, the console.log from the line 92 and 93 (switchPosition function) doesn't provide the same result. I am, I have to admit, stuck.
Any thoughts, ideas, explanations?
Thanks you for the time taken,
var Carrousel = (function () {
var self = {},
config = {
item: 3, // item to be displayed
scroll: 2 // number of items to be scrolled
},
container = null,
items = null,
nbItems = null,
nbSlide = null,
position = [],
searchPositionDepending = []
;
self.init = function (opts) {
options = opts || {}
execute();
}
// Private Method
execute = function () {
container = document.getElementById('carrousel');
items = document.getElementsByClassName('flux');
var containerWidth = container.offsetWidth;
var containerHeight = items[0].offsetHeight * 1.5;
container.style.height = '' + containerHeight + '';
nbItems = document.getElementsByClassName('flux').length;
nbSlide = nbItems / config.item;
// Initialisation du Carrousel
for (i = 0; i < nbItems; i++) {
items[i].style.width = '' + (containerWidth / config.item) + '';
items[i].style.display = 'none';
items[i].style.position = 'absolute';
items[i].style.top = "0";
items[i].style.left = "0";
items[i].setAttribute('data-position', '' + (i + 1) + '');
items[i].setAttribute('data-number', '' + i + '');
}
searchPosition();
placement();
document.getElementById('next').onclick = function () {
next();
searchPosition();
switchPosition();
placement();
// position();
}
document.getElementById('previous').onclick = function () {
// previous();
// searchPosition();
// position();
}
}
searchPosition = function () {
for (i = 0; i < config.item; i++) {
searchPositionDepending[i] = (function () { //Appending a function searchPosition per item displayed
for (j = 1; j <= config.item; j++) { //Passing through the first items to get their position
if (items[i].dataset.position === '' + j + '') {
position[j] = items[i];
return true;
} else {
}
}
;
})();
}
}
switchPosition = function () {
for (i = 0, j = 0; i < nbItems; i++, j++) {
if (items[i].dataset.position === '' + j + '') {
position[i] = position[i];
}
}
for (i = config.item, j = 1; i < nbItems; i++, j++) { //Replacing in good order, except for the one that are place into the variable position[];
items[i] = items[j];
}
for (i = (nbItems - config.item +1), j = 1; i <= nbItems; i++, j++) { //Replacing in good order the one that are place into variable position[];
items[i] = position[j];
console.log(i);
console.log(j);
console.log(position[j]);
console.log(items[i]);
}
for (i = 0; i < nbItems; i++) {
console.log(items[i]);
}
console.log(items[10]);
}
placement = function () {
for (i = 1; i <= config.item; i++) {
var rect = items[0].getBoundingClientRect();
item_width = Math.floor(rect.width);
item_height = Math.floor(rect.height);
var x = item_width * (i - 1) * 1.1;
items[i].style.display = 'block';
items[i].style.transform = "translate3D(" + x + "px, 0px, 0px)";
}
}
next = function () {
for (i = config.item, j = 1; i < nbItems; i++, j++) { //Updating all dataset position, except for the items that are displayed.
items[i].dataset.position = j;
}
for (i = 1, j = 2; i <= config.item; i++, j--) {
position[i].dataset.position = nbItems - j;
position[i].style.display = "none";
}
}
return self;
})();

Hello i am doing a memory game with javascript

Hello i am doing a memory game with javascript and i can't do the timer,i want to make a timer which start counting when I load the first time and ends when he finds all pairs and i don't know what to do,if someone could help me
here is my code :
var array_cartas = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E', 'F'
var valores_cartas = [];
var idCartas = [];
var cartas_viradas = 0;
function iniciar_temporizador() {
temporizador = 0;
minutos = Math.floor(temporizador / 60);
segundos = (temporizador - minutos * 60) + '';
}
Array.prototype.memory_tile_shuffle = function () {
var i = this.length,
j, temp;
while (--i > 0) {
j = Math.floor(Math.random() * (i + 1));
temp = this[j];
this[j] = this[i];
this[i] = temp;
}
}
function novoJogo() {
cartas_viradas = 0;
var saida = '';
array_cartas.memory_tile_shuffle();
for (var i = 0; i < array_cartas.length; i++) {
saida += '<div id="tile_' + i + 'onclick="virar_carta(this,\'' + array_cartas[i] + ' \')"></div>';
}
document.getElementById('memory_board').innerHTML = saida;
}
function virar_carta(tile, val) {
if (tile.innerHTML === "" && valores_cartas.length < 2) {
tile.style.background = '#FFF';
tile.innerHTML = val;
if (valores_cartas.length == 0) {
valores_cartas.push(val);
idCartas.push(tile.id);
} else if (valores_cartas.length === 1) {
valores_cartas.push(val);
idCartas.push(tile.id);
if (valores_cartas[0] === valores_cartas[1]) {
cartas_viradas += 2;
// limpa ambas as listas
valores_cartas = [];
idCartas = [];
if (cartas_viradas === array_cartas.length) { //
alert("Parabéns acabou o jogo");
document.getElementById('memory_board').innerHTML = "";
novoJogo();
}
} else {
function virar_para_costas() {
var tile_1 = document.getElementById(idCartas[0]);
var tile_2 = document.getElementById(idCartas[1]);
tile_1.style.background = 'url(tile_bg.jpg) no-repeat';
tile_1.innerHTML = "";
tile_2.style.background = 'url(tile_bg.jpg) no-repeat';
tile_2.innerHTML = "";
valores_cartas = [];
idCartas = [];
}
setTimeout(virar_para_costas, 500);
}
}
}
Use setInterval to make a variable increase every second. Get it's value when finished to show completion time.
$(function(){
var seconds = 0;
setInterval(function(){
seconds++;
$('input').val(seconds);
}, 1000);
});
See my example here on JSFIDDLE
At the same point you game is complete and shows the "Game Over" screen, make a new var called finishTime or something, and get the value of the var seconds which we are using in the above script.
So to put it another way, when the game is finished, do this:
var finishTime = seconds;

Categories

Resources