Develop Reference

Javascript and Return Function

I am working on a lab for school and having a hard time getting a return value from another function. I think I am just missing one thing and cannot figure it out. The function is called from an HTML document and depending on the number inputted will return the letter grade. Below is my code:
function submitGradeForconversion() {
var numGradeElement = document.getElementById("numGrade");
var numGrade = Math.round(numGradeElement.value);
if (numGrade >= 0 && numGrade <= 100) {
document.getElementById("letterGrade").innerHTML = convertGrade(numGrade);
} else {
alert("Please enter a number between 0 and 100!")
}
}
function convertGrade(numGrade) {
if (numGrade >= 95) {
return numGrade(A);
}
}
The HTML is just a basic input box with a button to call the first function. Any assistance would be greatly appreciated. Thanks

function submitGradeForconversion() {
var numGradeElement = document.getElementById("numGrade");
var numGrade = Math.round(numGradeElement.value);
if (numGrade >= 0 && numGrade <= 100) {
document.getElementById("letterGrade").innerHTML = convertGrade(numGrade);
} else {
alert("Please enter a number between 0 and 100!")
}
}
function convertGrade(numGrade) {
if (numGrade >= 95) {
return "A";
}
if (numGrade >= 75) {
return "B";
}
if (numGrade >= 55) {
return "C";
}
if (numGrade >= 35) {
return "D";
}
if (numGrade >= 15) {
return "E";
} else{
return "F";
}
}
<input id="numGrade" onChange="submitGradeForconversion()" />
<div id="letterGrade">X</div>

do while doesn't work

I'm building a website but a JavaScript part doesn't work.
Look here the script:
do {
if (percen === 0) {
console.log();
} else if (percen === 1) {
document.getElementById("percen").innerHTML = "Text"
} else if (percen === 2) {
document.getElementById("percen").innerHTML = "Text"
} else if (clicks === 3) {
++percen;
} else if (clicks === 4) {
++percen;
} else if (clicks === 5) {
++percen;
} else if (clicks === 6) {
++percen;
} else if (clicks === 7) {
var percen = 0;
}
}
But when I run it in a HTML file it will not loop. The var "percen" will ++ when you use a button.

Try adding the 'while' portion of the 'do while' loop at the end:
do {
if (percen === 0) {
console.log();
}
// rest of your code
// ...
}
while (percen < 100);

You forgot the condition at the end.. It is while(condition) remember that the condition is checked at the end of the script so it will enter 1 time. If you want you can do a while syntax while(cond){yourscript}

How to show a div depending on the numbers of games

I have a question and I can't resolve it. Can you help me please?
So my php code :
$aTicketsGames = array(134, 137, 165, 136, 177, 181, 190);
$b_isRapidGame = false;
if(in_array($i_jeu, $aTicketsGames)){
$b_isRapidGame = true;
}
In .js after click on the button I do :
if(obj.google_analytics.is_rapid_game == true){
var i++;
if(i == 10){
document.getElementById('div1').setAttribute('class','display-block');
}
if(i==20){
document.getElementById('div2').setAttribute('class','display-block');
}
}
The idea is : suppose I have a variable i signifying the number of games played.
if i = 10,30,50,70,90.... show div1.
if i = 20,40,60,80,100.... show div2.
I'm newbie in .js and I have no idea how to impliment this. Help me please!!!!
Thx in advance.

Use style instead of class and use % for the if condition. Also, i should be set globally not locally.
var i = 0;
if(obj.google_analytics.is_rapid_game == true){
i++;
if(i % 20 == 10){
document.getElementById('div1').setAttribute('style','display-block');
}
else if(i % 20 == 0 && i > 0){
document.getElementById('div2').setAttribute('style','display-block');
}
}

See comments inline:
var i = 0; // Define it out of `if`.
if (obj.google_analytics.is_rapid_game === true) {
i++; // Increment by 1
if (i && (i % 20) === 0) { // If divisible by 20
$('#div2').show(); // Show `div2`
// OR
$('#div2').addClass('display-block'); // Add Class
} else if (i && (i % 10) === 0) { // If divisible by 10
$('#div1').hide(); // Hide `div1`
// OR
$('#div1').removeClass('display-block'); // Remove Class
}
}

var i = 0;
if (obj.google_analytics.is_rapid_game === true) {
i++;
if ((i % 20) === 0) {
$('#div2').show();**//or** $('#div2;).css('display','block');
$('#div1').hide();**//or** $('#div1;).css('display','none');
} else if ((i % 10) === 0) {
$('#div1').show();
$('#div2').hide();
}
}

Animation on canvas two loops at once

Global for the main game loop
var requestAnimFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
Below you can see that this function should start an animation. What it does however it speeds through the animation without enough time to see it. This I think is because the main game loop overrides it. I Do not know how to solve this?
function DrawSpawnAnimation() {
anim();
}
function anim() {
//alert(explodeY);
ctxAnimation.drawImage(spriteSheet, ExplodeFrame * 100, 2740,100,100,explodeX,explodeY,100,100);
if(ExplodeFrame == 5)
{
ctxAnimation.drawImage(spriteSheet, 6, 2851,100,106,(Player.x - 50) + 10,(Player.y - 50) + 10,100,100);
}
else if(ExplodeFrame == 6)
{
ctxAnimation.drawImage(spriteSheet, 106, 2851,100,106,(Player.x - 50) + 10,(Player.y - 50) + 10,100,100);
}
else if(ExplodeFrame == 7)
{
ctxAnimation.drawImage(spriteSheet, 206, 2851,100,106,(Player.x - 50) + 10,(Player.y - 50) + 10,100,100);
}
else if(ExplodeFrame == 8)
{
ctxAnimation.drawImage(spriteSheet, 306, 2851,100,106,(Player.x - 50) + 10,(Player.y - 50) + 10,100,100);
}
else if(ExplodeFrame == 9)
{
ctxAnimation.drawImage(spriteSheet, 406, 2851,100,106,(Player.x - 50) + 10,(Player.y - 50) + 10,100,100);
}
if (ExplodeFrame < 9) {
ExplodeFrame++;
setTimeout(anim, 1000 / 15);
}
else
{
Death = false;
ctxAnimation.drawImage(spriteSheet, 506, 2851,100,106,(Player.x - 50) + 10,(Player.y - 50) + 10,100,100);
ExplodeFrame = 0;
}
//alert("hi");
}
In this function if the player is dead it calls the explode animation.
function Loop(){
if (isPlaying == true)
{
//document.addEventListener('click', pauseClicked ,false); //WARNING REMOVE THIS WHEN YOU CLICK MENU OR EXIT LEVEL IN ANYWAY
Platforms = [];
Lavas = [];
Flags = [];
Teleporters = [];
Prepare();
if(level == 1)
{
Level1();
}
else if(level == 2)
{
Level2();
}
else if (level ==3)
{
Level3();
}
else if (level == 4)
{
Level4();
}
else if (level ==5)
{
Level5();
}
else if (level ==6)
{
Level6();
}
else if (level ==7)
{
Level7();
}
else if (level ==8)
{
Level8();
}
else if (level ==9)
{
Level9();
}
else if (level ==10)
{
Level10();
}
else if (level ==11)
{
Level11();
}
else
{
stopLoop();
}
if(ElevatorOn == true)
{
drawElevators();
}
if(LavaElevatorOn == true)
{
drawLavaElevators();
}
if(TeleportersOn == true)
{
drawTeleporters();
}
movePlayer();
checkCol();
if(Death == false)
{
drawPlayer();
}
drawGUI();
if(Death ==true)
{
DrawSpawnAnimation();
requestAnimFrame(Loop);
}
else
{
requestAnimFrame(Loop); //this calls it again
}
}
}

I don't have time to look at the animation frame problem right now, but there are two other things you should definitely do:
Format and indent your code. It's not very consistent. There are many JavaScript beautifiers you can find with a search for "javascript beautifier". Pick one and run your code through it, and then as you make future changes keep the formatting consistent—or run it through the beautifier again.
Simplify, simplify, simplify! For example, consider this code (reformatted here):
if( level == 1 ) {
Level1();
} else if( level == 2 ) {
Level2();
} else if( level == 3 ) {
Level3();
} else if( level == 4 ) {
Level4();
} else if( level == 5 ) {
Level5();
} else if( level == 6 ) {
Level6();
} else if( level == 7 ) {
Level7();
} else if( level == 8 ) {
Level8();
} else if( level == 9 ) {
Level9();
} else if( level == 10 ) {
Level10();
} else if( level == 11 ) {
Level11();
} else {
alert( "Game over - Still in development - Wayne Daly 2013" );
stopLoop();
}
You can replace all that code with:
var levelFun = levelFunctions[level];
if( levelFun ) {
levelFun();
} else {
alert( "Game over - Still in development - Wayne Daly 2013" );
stopLoop();
}
and then where you have all the Level(), Level2(), etc. functions defined, replace them all with:
var levelFunctions = [
null, // there is no level 0
function() {
// level 1 function
},
function() {
// level 2 function
},
...
];
You can also simplify that long list of if(ExplodeFrame == N) tests to all use a common bit of code. Just calculate the second parameter to ctxAnimation.drawImage() with ( ExplodeFrame - 5 ) * 100 + 6 instead of all the if tests and hard coded values.

Jquery script targets all my divs in a count script, Want it to work individually for each div

I got a jquery script that counts words and adjusting the font-size based on the amount of words. The problem is that it counts all the attributes with h1 in the parent. I want it to count individually for each h1. The originally script is marked as h1:first. Here is the script where it counts all h1 in the class wofa:
$(function(){
var $quote = $(".wofa h1");
var $numWords = $quote.text().split(" ").length;
if (($numWords >= 1) && ($numWords < 3)) {
$quote.css("font-size", "1px");
}
else if (($numWords >= 3) && ($numWords < 6)) {
$quote.css("font-size", "5px");
}
else if (($numWords >= 20) && ($numWords < 30)) {
$quote.css("font-size", "10x");
}
else if (($numWords >= 30) && ($numWords < 40)) {
$quote.css("font-size", "15px");
}
else {
$quote.css("font-size", "1px");
}
});

UPDATED Working Example FIDDLE
You can use the .each() function
$('.wofa').each(function() {
var quote = $(this).find('h1');
var numWords = quote.text().split(" ").length;
console.log(numWords);
if ((numWords >= 1) && (numWords < 3)) {
quote.css("font-size", "1px");
} else if ((numWords >= 3) && (numWords < 6)) {
quote.css("font-size", "5px");
} else if ((numWords >= 20) && (numWords < 30)) {
quote.css("font-size", "10x");
} else if ((numWords >= 30) && (numWords < 40)) {
quote.css("font-size", "15px");
} else {
quote.css("font-size", "1px");
}
});

I tried the .each() method with your selector and nothing was selected.
I ended using $('.wofa, h1).each():
$('.wofa, h1').each(function() {
var words = $(this).html().split(" ");
alert($(this).html() + ' has ' + words.length + ' words');
});
Here's a working version on jsfiddle:
http://jsfiddle.net/russianator/jKPdQ/