Develop Reference

Change div bgcolor onkeypress

Trying to change the background color of all my divs using a onkeypress event. R = Red , B=White, V=Green. When press R it works but when i press V or B it gives me the alert.
I tried without return, with a switch(actualy im supposed to do this with a switch). Teacher cancelled class today so I wasnt able to check it out with him .And I Wont see him til next week. I tried things and other things for 2-3 hours and im totaly stuck Please help.. Thanks in advance
window.onkeypress = function colorchange(x)
{
if (x.keyCode == 114)
{ var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "red";
}return;
}
if (x.keycode == 118)
{
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "green";
}return;
}
if (x.keycode == 98)
{
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "white";
}return;
}
else
{
alert("this key doesnt do anything")
}
}
}

The variables are case-sensitive. You have keycode and it should be keyCode. Looks like you should also be using else if().
window.onkeypress = function colorchange(x) {
if (x.keyCode == 114) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "red";
}
return;
} else if (x.keyCode == 118) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "green";
}
return;
} else if (x.keyCode == 98) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "white";
}
return;
} else {
alert("this key doesnt do anything")
}
}
body {
background: #eee;
}
div {
width: 100px;
height: 100px;
background: #aaa;
}
<div></div>

You are comparing x.keycode instead of x.keyCode in the second and third if statements. You should also chain the conditions using else if.
window.onkeypress = function colorchange(x)
{
if (x.keyCode === 114) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "red";
}
return;
}
else if (x.keyCode === 118)
{
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "green";
}
return;
}
else if (x.keyCode === 98)
{
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "white";
}
return;
}
else
{
alert("this key doesnt do anything")
}
}
See working jsfiddle here.

How to reduce time of execution for javascript code

Below is my code which is taking time in the for loop to extract data from one object and filling another object. Is there any way to reduce the time of execution? I have tried a while loop but it is not helping that much. Kindly help
function SetGridWithData(result) {
if (!result) {
return;
}
CtrlBillableItem_SearhedBillableItems = result
var boxOfJson = [];
var j = 100;
if (result.length >= 100) {
if (PagingLastRecNum == 0) {
btnPrevious.style.display = 'none';
for (var i = 0; i < j; i++) {
boxOfJson.push(result[i]);
}
} else {
btnPrevious.style.display = 'inline';
var intializer = (j * PagingLastRecNum) + PagingLastRecNum;
var limiter = intializer + 99;
for (var i = intializer; i < limiter; i++) {
boxOfJson.push(result[i]);
}
}
} else {
btnPrevious.style.display = 'none';
btnNext.style.display = 'none';
for (var i = 0; i < result.length; i++) {
boxOfJson.push(result[i]);
}
}
}
I am trying to implement paging which is done, but 100 data per page first it will check page no 0 if it is then loop one and if other than 0 than else case.

You could try caching result.length at the beginning of your function (following the if check at the beginning)..
function SetGridWithData(result) {
if (!result) { return; }
var resultLength = result.length;
CtrlBillableItem_SearhedBillableItems = result
var boxOfJson = [];
var j = 100;
if (resultLength >= 100) {
if (PagingLastRecNum == 0) {
btnPrevious.style.display = 'none';
for (var i = 0; i < j; i++) {
boxOfJson.push(result[i]);
}
}
else {
btnPrevious.style.display = 'inline';
var intializer = (j * PagingLastRecNum) + PagingLastRecNum;
var limiter = intializer + 99;
for (var i = intializer; i < limiter; i++) {
boxOfJson.push(result[i]);
}
}
}
else {
btnPrevious.style.display = 'none';
btnNext.style.display = 'none';
for (var i = 0; i < resultLength; i++) {
boxOfJson.push(result[i]);
}
}
}

javascript for loop dosn't loop through users created

OK so I am making a register and login for a forum using javascript and localstorage. "School assignment" My problem is that when i created multiple user and store them in the localstorage, my for loop does not loop through them all, only the first one. So i can only access the forum with the first user i create.
function login () {
if (checklogin()) {
boxAlert.style.display = "block";
boxAlert.innerHTML = "Welcome" + "";
wallPanel.style.display = "block";
} else {
boxAlertfail.style.display = "block";
boxAlertfail.innerHTML = "Go away, fail";
}
}
function checklogin (){
for (var i = 0; i < aUsers.length; i++){
if (aUsers[i].email == inputLoginMail.value && aUsers[i].password == inputLoginPassword.value){
return true;
}else{
return false;
}
}
}

how about:
function checklogin() {
var validLogin = false;
for (var i = 0; i < aUsers.length; i++) {
if (aUsers[i].email == inputLoginMail.value
&& aUsers[i].password == inputLoginPassword.value) {
validLogin = true;
break;
}
}
return validLogin;
}

Ouch! You are returning false on very first attempt. The best way is to set a variable and then check for it.
function checklogin() {
var z = 0;
for (var i = 0; i < aUsers.length; i++) {
if (aUsers[i].email == inputLoginMail.value && aUsers[i].password == inputLoginPassword.value) {
z = 1;
break;
} else {
z = 0;
}
if (z == 1) {
// User logged in
} else {
// Fake user
}
}

"Unable to get value of the property 'style'" when trying to change style in IE

Have written a function for cycling through the questions in a online quiz. I works fine in every browser but IE (god I wish IE would just curl up and die). Function is below.
function cycleQs() {
var qs = document.getElementsByName("quizQ");
var nextQBtn = document.getElementById("btnNextQ");
var i = 0;
var curQ = -1;
for (i = 0; i < qs.length; i++) {
if (qs[i].style.display == "block") {
curQ = i;
}
//qs[i].style.display = "none";
}
var valid = false;
if (curQ > -1) {
var qId = qs[curQ].id.replace("dv", "");
var inps = document.getElementsByName(qId);
if (inps.length > 0) {
if (inps[0].type == "radio") {
for (i = 0; i < inps.length; i++) {
if (inps[i].checked) {
valid = true;
}
}
} else if (inps[0].type == "hidden") {
valid = true;
for (i = 0; i < inps.length; i++) {
if (inps[i].value <= 0) {
valid = false;
}
}
}
} else {
valid = true;
}
} else {
valid = true;
}
if (valid == true) {
for (i = 0; i < qs.length; i++) {
qs[i].style.display = "none";
}
if (curQ < (qs.length - 1)) {
qs[curQ + 1].style.display = "block";
if (curQ == (qs.length - 2)) {
var scoreDv = document.getElementById("dvScore");
nextQBtn.style.display = "none";
var answers = getAnswers();
//alert(answers)
scoreDv.innerHTML = "Processing";
processResults(answers);
}
} else {
qs[0].style.display = "block"; // Problem occurs here when function first loads
}
} else {
alert("You must select an answer before you can proceed");
}
}
Any ideas of a work around for this?

document.getElementsByName is likely not returning anything, because of IEs implementation: see here
so qs[0] probably doesn't exist

Mark unmark javascript?

I've got a function to select all checkboxes in a table:
<script type="text/javascript">
function checkAll() {
var tab = document.getElementById("logs");
var elems = tab.getElementsByTagName("input");
var len = elems.length;
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
elems[i].checked = true;
}
}
}
But I can't get it to uncheck them all if they are checked. How could I do that?
<th width='2%'>Mark</th>";
Also in javascript is it possible to rename "Mark" to "Un-Mark" if I execute checkAll()?

This should do both of the things u want:
function checkAll(obj) {
var tab = document.getElementById("logs");
var elems = tab.getElementsByTagName("input");
var len = elems.length;
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
if(elems[i].checked == true){
elems[i].checked = false;
}
else{
elems[i].checked = true;
}
}
}
if(obj.innerHTML == 'Mark') { obj.innerHTML = 'Unmark' }
else { obj.innerHTML = 'Mark' }
}
html:
<th width='2%'>Mark</th>";

1) why don't u use some js framework, like jQuery?
2) to remove checked, use elems[i].removeAttribute('checked') or set elems[i].checked = false;
3) to rename, you have to set it's innerHTML or innerText to Un-Mark

Add a little more logic to see if they're already checked. This will invert their current checked state.
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
if (!elems[i].checked) {
elems[i].checked = true;
}
else elems[i].checked = false;
}
}
If you just want to uncheck all, simply use:
elems[i].checked = false;

This will check them all regardless of their current state, or uncheck them all, depending on the current text of "Mark" or "Unmark".
<script type="text/javascript">
function checkAll(obj) {
var tab = document.getElementById("logs");
var elems = tab.getElementsByTagName("input");
var len = elems.length;
var state = obj.innerHTML == 'Mark';
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
elems[i].checked = state;
}
}
obj.innerHTML = state ? 'Mark' : 'Unmark';
}
And then the HTML changes to:
<th width='2%'>Mark</th>";

To uncheck, try:
elems[i].checked = false;

i sugest you use jquery, everything is easier.
with jquery you just have to do something like this (+/-):
$(function(){
$('a.ClassName').click(function(){
var oTbl = $('#tableID');
$('input[type="checkbox"]', oTbl).attr("checked", "checked")
});
})