If/else statements not functioning - javascript

I cannot figure out why if/else statements are not executing properly. The code only runs through the if(i===1) loop but thats it. I'm doing a simple exercise wherein I check the number submitted and see if the users gets hotter or colder to a preset number.
<html>
<head>
<title>Test</title>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
var checkNum = Math.floor(Math.random() * 10);
alert("Random number is" + checkNum);
var i = 0;
var scopedVal;
var submitVal;
var hotCheck = function (submitVal) {
if(i === 1) {
alert("try again");
scopedVal = submitVal;
alert("scopedVal is" + scopedVal);
} else {
if(abs(scopedVal - checkNum) > abs(submitVal - checkNum)) {
alert("Hotter");
scopedVal = submitVal;
} else {
alert("colder");
scopedVal = submitVal;
}
}
};
$('.subm').on('click', function () {
i++;
alert(" i is" + i);
alert("button pressed");
submitVal = $(this).closest('#outsideContainer').find('.num').val();
if(submitVal === checkNum) {
alert("You got it");
} else {
hotCheck(submitVal);
}
});
});
</script>
<style>
body {
width: 900px;
color: white;
margin: auto;
}
#outsideContainer {
width: 400px;
color: grey;
margin: auto;
position: relative;
}
</style>
</head>
<body>
<div id="outsideContainer">
<form>
<input type="text" name="text" class="num">
<br/>
</form>
<div id="buttonSubm">
<button class="subm">Submit</button>
<div></div>
</body>
</html>
I'm assuming this is a simple fix and it is driving me nuts.

If you want to run the "else" code as well as the "if" code remove the else statement:
var hotCheck = function(submitVal){
if(i===1){
console.log("try again");
scopedVal = submitVal;
console.log("scopedVal is " + scopedVal);
};
if(Math.abs(scopedVal-checkNum)> Math.abs(submitVal - checkNum)){
console.log("Hotter");
scopedVal = submitVal;
} else {
console.log("colder");
scopedVal = submitVal;
};
};
Demo:
http://jsfiddle.net/hHC88/
You also needed to change abs. to Math.abs

The abs() method does not exist. You're dealing with all integers so you can probably just remove it or fully reference it Math.abs()

You have to replace the
if( abs(scopedVal-checkNum)> abs(submitVal - checkNum)){
to
if( Math.abs(scopedVal-checkNum) > Math.abs(submitVal - checkNum)){
abs() is a method to Math.
Try this

Related

Cannot call Jump Game function in JavaScript

so I am doing a Jump game, you can see task here: Jump game
So I found a lot of solutions and they have no errors, but the thing that whenever i call a function, in webpage i see only blank page. I want to see just simple text "you won" or "you lost". What I did wrong here? Function is good, no errors. Maybe problem that i don't know how to call this function or numbers should be in array somehow? Here is my code:
<head>
<meta charset="utf-8" />
<title>Jump Game</title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
background: "#eee";
display: block;
margin: 0 auto;
border: 2px solid black;
}
</style>
</head>
<body>
<script>
var canJump = function(nums) {
if (nums.length < 2) {
return true;
}
for (let i = 0; i < nums.length - 1; i++) {
if (i + nums[i] >= nums.length - 1) {
return true;
};
if (nums[i] === 0) {
return false;
}
if (i + nums[i] > i + 1 + nums[i + 1]) {
nums[i + 1] = nums[i] - 1;
};
};
};
if(canJump(1,2,3,4) === true) {
document.write("you won");
}
else if(canJump(1,2,3,4) === false) {
document.write("you lost");
}
</script>
</body>
Please help me.
if(canJump(1,2,3,4) === true) ... should be if(canJump([1,2,3,4]) === true).

Facebook Instant Game - Uploading bundled zip file gives SDK reference error from Web Hosting

When I try to upload my simple game/app, I get an error saying
"Games must reference one of our supported SDKs via our CDN."
I have given an SDK reference though. Isn't this the one?
<script src="https://connect.facebook.net/en_US/fbInstant.6.2.js"></script>
I went through the SDK reference of facebook docs as well but it didn't work for me?
Did anyone face same situation before or have an idea to fix this problem? thank you
I have a file index.html
INDEX.HTML
<html>
<head>
<title>
this is test
</title>
<style>
body {
width: 400px;
height: 400px;
position: 0;
background: yellow;
}
#heading1{
position: absolute;
}
</style>
</head>
<body>
<h1 id="heading1">
This is h1.
</h1>
<button onclick="myFunction()">Move the heading</button>
<script>
var ran = Mathfloor.Math.Random()*1;
function myFunction() {
var move= document.getElementById("heading1");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
var id1 = setInterval(framenext, 5);
} else {
pos++;
if (ran ==1) {
move.style.top = pos + "px"; }else {
move.style.left = pos + "px"; }
}
}
function framenext() {
if (pos == 0) {
clearInterval(id1);
var id = setInterval(framenext, 5);
} else {
pos--;
if (ran ==1) {
move.style.top = pos + "px"; }else {
move.style.left = pos + "px"; }
}
}
}
</script>
<script src="https://connect.facebook.net/en_US/fbInstant.6.2.js"</script>
</body>
</html>
fbapp-config.json
{
"instant_games":{
"navigation_menu_version": "NAV_FLOATING",
}
}
<body>
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
<h1 id="heading1">
This is h1.
</h1>
<button onclick="myFunction()">Move the heading</button>
<script>
window.onload = function () {
FBInstant.initializeAsync().then(function () {
FBInstant.setLoadingProgress(100);
});
FBInstant.startGameAsync().then(function () {
startGame();
})
};
</script>
<script>
var ran = Math.floor(Math.random() * 1);
your script codes here...
</script>
</body>
</html>
fbapp-config.json
{
"instant_games": {
"platform_version": "RICH_GAMEPLAY",
"orientation": "LANDSCAPE",
"navigation_menu_version": "NAV_FLOATING"
}
}
fbapp-config.json must have at least these three key-value pairs for
the game to start.
Tested to work successfully.

How to pulse an image and change the rate of pulsing?

I think this is working but not really. I also don't think that it is the best approach.
The timer serves as another function running while having the ability to change the pulsing rate of the image.
I have tried to use gifs instead of because they have different speeds, there isn't a smooth transition when switching between images.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<style>
#red-square {
position: absolute;
display: inline-block;
z-index: 1;
top : 200px;
right: 200px;
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="result"></div>
<div id="red-square"></div>
<button onclick="speedOne();">speed one</button>
<button onclick="speedTwo();">speed two</button>
<button onclick="speedThree();">speed three</button>
<script>
var counter = 0,
stopTimeoutTwo = null,
stopTimeoutThree = null,
currentSpeed = "speed one";
function runCounter() {
counter++;
result.textContent = counter;
if(currentSpeed == "speed one") {
if((counter%60) == 0) {
$("#red-square").hide();
}else if((counter%60) != 0) {
$("#red-square").show();
}
}
else if(currentSpeed = "speed two") {
if((counter%45) == 0) {
$("#red-square").hide();
}else if((counter % 45) != 0) {
$("#red-square").show();
}
}else if(currentSpeed = "speed three") {
if((counter%30) == 0) {
$("#red-square").hide();
}else if((counter%30) != 0) {
$("#red-square").show();
}
}
if(counter < 1e5) timer = setTimeout(runCounter, 0);
}
runCounter();
function stepOne() {
currentSpeed = "speed one";
}
function stepTwo() {
currentSpeed = "speed two";
}
function stepThree() {
currentSpeed = "speed three";
}
</script>
</body>
</html>
You can use setInterval to create your efect like so: Fiddle!
This is the JS I used:
var speed = 4000;
var inter;
var square = document.getElementById("red-square");
square.style.backgroundColor = "red";
function myTime(){
inter = setInterval(function(){
console.log(square.style.backgroundColor+" "+speed);
if(square.style.backgroundColor == "red"){
square.style.backgroundColor = "blue";
}
else{
square.style.backgroundColor = "red";
}
}, speed);
}
function changSpeed(s){
clearInterval(inter);
speed = s;
inter=null;
myTime();
}
myTime();
the rest is your code.

How to add random delay spikes to this?

Hi I finally got my progress bar the way I want, is there a way to make it have delay spikes? like its actually loading data, for now this is just for looks on my website but I would like it to look authentic. heres the code. the max delay I would need and want is 500 milliseconds.
<html><head>
<style>
#adLinkb,
#adLinkb2 {
font-size: 12px;
color: #fff;
font-family:sans-serif;
}
</style>
</head>
<body>
<div id="adLinkb" style="border: 1px solid black;width:212;background-color:black;border-color:white"></div>
<br>
<div id="adLinkb2" style="border: 1px solid black;width:212;background-color:black;border-color:white"></div>
<script type="text/javascript">
function buildBar(id, callback) {
var currentAdb = 0;
var imgCtb = 70;
function cycleb() {
var output = '';
for (var i = 0; i < imgCtb; i++) {
output += i > currentAdb ? ' ' : '/';
}
output += '';
document.getElementById(id).innerHTML = output;
++currentAdb;
if (currentAdb == imgCtb) {
window.clearInterval(myInterval);
if (typeof callback == 'function') {
callback();
}
}
}
var myInterval = window.setInterval(cycleb, 100);
}
function callback1() {
buildBar('adLinkb2', callback2);
}
function callback2() {
//window.location... stuff here
alert('redirect should go here');
}
buildBar('adLinkb', callback1);
</script>
</body></html>
You can replace the setInterval with a setTimeout and re-schedule with a random timeout
window.setTimeout(cycleb,10+Math.random()*300);
the fiddle: http://jsfiddle.net/martijn/qqf90r3f/
alternative spike:
if(Math.random()>0.9)
{
// 10% change on a spike
window.setTimeout(cycleb,10+Math.random()*1000);
}
else{
window.setTimeout(cycleb,10+Math.random()*10);
}
http://jsfiddle.net/martijn/qqf90r3f/1/

User Controls not working for image loop

i have tried it within the loop function but it says the function isn't being used so i put it outside still doesnt work and i dont know how to fix it as i thought that would work, rmember first day on javascript, thanks for the help in advance and please no jquery.
<html>
<head>
<style type="text/css">
#PictureContainer {
height: 300px;
width: 500px;
margin: 0 auto;
overflow: hidden;
display: inline-block;
}
#SliderWrapper {
width: 628px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
#image {
height: 300px;
width: 500px;
}
#Next {
float: right;
}
#Before {
float: left;
}
</style>
</head>
<body>
<div id="SliderWrapper">
<img id="Next" src="Forward.png" alt="Forward">
<img id="Before" src="Back.png" alt="Back">
<div id="PictureContainer">
<img id="image" src="html.png" alt="HTML">
</div>
</div>
<script language="javascript" type="text/javascript">
var i = 1;
function loop() {
i = i+1;
if(i == 5){
i = 1;
}
if (i == 1) {
document.getElementById('image').src = "html.png";
} else if(i == 2) {
document.getElementById('image').src = "css3.png";
} else if (i == 3) {
document.getElementById('image').src = "WebdevLogo's.jpg";
} else {
document.getElementById('image').src = "WebdevLogo's.jpg";
}
}
var pictureloop = setInterval(loop, 3000);
function Forward() {
if(i == 5) {
i = 1;
} else {
i = i+1;
}
}
function Back() {
if(i == 1) {
i = 4;
} else {
i = -1;
}
}
</script>
</body>
</html>
You have a function called loop, but you never call it, so it's never changing the source attribute of the image. In the forward and back functions, add a call to the loop function at the end. There are also a few problems internally with Back() that I've fixed.
function Forward() {
if(i == 5) {
i = 1;
} else {
i++;
}
loop();
}
function Back() {
if(i == 1) {
i = 5;
} else {
i--;
}
loop();
}
Within the loop() function, consider using a switch block instead of all those else ifs. Also in the loop function, use the increment operator - i++; - which increases the value by 1, rather than the manual statement i = i+1; Also, the if i==5 statement is redundant. You already have it in your Forward function.
this is more of a question for https://codereview.stackexchange.com/ but here are a few things that would make this code cleaner.
instead of duplicating image setting code, declare an array of images.
var images = ['img1.png','img2.png'];
var currentImage = 0;
function forward() {
currentImage++;
if (currentImage > images.length-1) currentImage == 0;
setImage()
}
function setImage() {
document.getElementById('image').src = images[currentImage];
}
setInterval(forward, 5000);

Categories

Resources