I'm trying to code a game and I want to make it so that when you click a button, it increases the number. My game is like a mining game and you click to get ores and at the top right is a box which tells you what you are mining and you can see what you are mining, except when I click the mine button, it comes with the error which says ReferenceError: hello is not defined. The function hello is the function which gives you the ores.
I have tried fixing up some other functions which give you helpers in exchange for help but it didn't change anything, also I checked on stack overflow, but there wasn't anything that could help me. (Keep in mind I am 10 years old)
HTML:
<div class="mwrapper">
<button id="minebutton" onclick="hello()">Mine!</button>
</div>
JavaScript:
//defining the vars.
var stonei = 0;
var deepness = 0;
var stone = 0;
var silveri = 0;
var silver = 0;
var goldi = 0;
var gold = 0;
var platinumi = 0;
var platinum = 0;
var diamondi = 0;
var diamond = 0;
var alexandritei = 0;
var alexandrite = 0;
var amethysti = 0;
var amethyst = 0;
var unobtaniumi = 0;
var unobtanium = 0;
var emeraldi = 0;
var emerald = 0;
var tubi = 0;
var tub = 0;
var blockN;
var block = 0;
var money = 0;
var stoneSold = 0;
var silverSold = 0;
var goldSold = 0;
var clickers = 0;
var moneyEver = 0;
var BpS = 0;
//defining element to shorten code later
var blockEl = document.getElementById("block");
var btxtEL = document.getElementById("btxt");
var moneyEl = document.getElementById("money");
//changing what the 'Block you are mining' says
var findBlock = function(b) {
if (b === 0) {
blockEl.style.backgroundColor = "grey";
btxt.innerHTML = "Stone";
blockN = "stone";
}
else if (b === 1) {
blockEl.style.backgroundColor = "silver";
btxt.innerHTML = "Silver";
blockN = "silver";
}
else if (b === 2) {
blockEl.style.backgroundColor = "gold";
btxt.innerHTML = "Gold";
blockN = "gold";
}
else if (b === 3) {
blockEl.style.backgroundColor = "rgb(90, 89, 89)";
btxt.innerHTML = "Platinum"
blockN = "platinum";
}
else if (b === 4) {
blockEl.style.backgroundColor = "rgb(185, 242, 255)";
btxt.innerHTML = "Diamond"
blockN = "diamond";
}
else if (b <= 10) {
btxt.innerHTML = "Not coded yet";
}
//hehe
else {
btxt.innerHTML = "WHAAAA?????????";
}
}
//adds materials to the left sidebar
var createBlock = function(b) {
if (b === 0) {
stonei += 1;
stone += 1;
document.getElementById("stonei").innerHTML = stonei;
document.getElementById("stone").innerHTML = stone;
}
else if (b === 1) {
silveri += 1;
silver += 1;
document.getElementById("silveri").innerHTML = silveri;
document.getElementById("silver").innerHTML = silver;
}
else if (b === 2) {
goldi += 1;
gold += 1;
document.getElementById("goldi").innerHTML = goldi;
document.getElementById("gold").innerHTML = gold;
}
else if (b === 3) {
platinumi += 1;
platinum += 1;
document.getElementById("platinumi").innerHTML = platinumi;
document.getElementById("platinum").innerHTML = platinum;
}
else if (b === 4) {
diamondi += 1;
diamond += 1;
document.getElementById("diamondi").innerHTML = diamondi;
document.getElementById("diamond").innerHTML = diamond;
}
//not coded rest
}
//From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
//for finding the block when you mine
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}
//when you click the mine button it does this
var hello = function() {
if (deepness === stone + silver + gold + platinum + diamond && stone >= stonei && silver >= silveri && gold >= goldi && platinum >= platinumi && diamond >= diamondi && stoneSold == stone - stonei && moneyEver == money + clickers &&typeof hsjsahjkd === 'undefined' || hsjsahjkd === null) {
if (deepness <= 50) {
block = 0;
findBlock(block);
deepness += 1;
createBlock(block)
}
else if (deepness >= 50, deepness < 150) {
block = getRandomInt(0, 2);
findBlock(block);
deepness += 1;
createBlock(block)
}
else if (deepness >= 150, deepness < 250) {
block = getRandomInt(0, 3);
findBlock(block);
deepness += 1;
createBlock(block)
}
else if (deepness >= 250, deepness < 350) {
block = getRandomInt(0, 4);
findBlock(block);
deepness += 1;
createBlock(block)
}
else if (deepness >= 350) {
block = getRandomInt(0, 5);
findBlock(block);
deepness += 1;
createBlock(block)
}
}
else {
btxt.innerHTML = "Cheater.";
stonei = 0;
deepness = 0;
stone = 0;
silveri = 0;
silver = 0;
goldi = 0;
gold = 0;
platinumi = 0;
platinum = 0;
diamondi = 0;
diamond = 0;
alexandritei = 0;
alexandrite = 0;
amethysti = 0;
amethyst = 0;
unobtaniumi = 0;
unobtanium = 0;
emeraldi = 0;
emerald = 0;
tubi = 0;
tub = 0;
stoneSold = 0;
silverSold = 0;
goldSold = 0;
clickers = 0;
moneyEver = 0;
BpS = 0;
console.log("You cheated. The game restarted.")
if (typeof hsjsahjkd == 'undefined') {
var hsjsahjkd = 1;
}
else {
hsjsahjkd += 1;
}
document.getElementById("cheat").innerHTML = hsjsahjkd;
}
}
Sorry, but the functions needed are quite long. If you want to see the whole code, go to megagames.me/games/mining.html
I expected the out put of hello() to increment some of the ores, but it gave ReferenceError: hello is not defined.
Make sure your JavaScript is linked in the head tag or above the button. Otherwise you'll be calling a function that doesn't exist yet. An easy way to remember is to think of it as a book, you read from top to bottom the same way JavaScript executes top to bottom.
Also, try using Let and Const instead of Var and try using Switch Cases instead of if else all over. :-)
Related
When running this code I currently getting the error "TypeError: Invalid value for y-coordinate. Make sure you are passing finite numbers to setPosition(x, y)." all of my functions do work are are declared properly. When I use a println and print out letYPos it prints out "NaN" but when I call the function again it prints out the correct value. Does anyone know how I can fix this or if there even is a way to fix this?
var count = 0;
var letYPos = 0;
var y = 3;
function testing()
{
var letXPos = 25;
letYPos += 75;
if (count == 6)
{
println("You have ran out of guesses, the correct anwser was: " + secretWord);
return;
}
var input = readLine("Enter your word: ");
if (input == null)
{
println("You have to enter a word! ");
return;
}
if (input.length != 5)
{
println("That is not a five letter word, please try again.");
return;
}
var x = 3;
for (var i = 0; i < input.length; i++)
{
if (input.includes(secretWord.charAt(i)))
{
var index = input.indexOf(secretWord.charAt(i));
}
if (index == 0) { yellow(3, y ) }
if (index == 1) { yellow(83, y ) }
if (index == 2) { yellow(163, y) }
if (index == 3) { yellow(243, y) }
if (index == 4) { yellow(323, y) } index = null;
}
for (var i = 0; i < input.length; i++)
{
if (input.charAt(i) == secretWord.charAt(i))
{
green(x, y);
}
x += 80;
}
y += 80;
for (var i = 0; i < input.length; i++)
{
for (var a = 0; a <= 5; a++)
{
var txt = new Text(input.charAt(a), font);
txt.setPosition(letXPos, letYPos);
add(txt);
letXPos += 80;
}
}
if (input == secretWord)
{
println("That's Correct, Congratulations!");
return;
}
count++;
setTimeout(testing, 100);
}
I'm using a number of boxes that are floating around the screen, I want for them to bounce away from each other when they collide and I am testing this by just changing their colours instead when they collide, for some reason their colour changes at the start(their starting colour is white and if they collide it should change to red but they start and stays red). Is there something I am doing wrong? I would also like for everything to be done within the constructor function. I am sorry for not commenting my code as yet.
function BoxSplash()
{
this.sample = [];
var test = false;
this.col = color(129)
this.changeColour = function()
{
this.col = color(random(0,255),random(0,128),random(0,255))
}
this.intersect = function(other)
{
for(var i = 0; i < numberss; i++)
{ var currentBox = this.sample[i]
var d = dist(currentBox.x,currentBox.y,other.x,other.y)
if(d < currentBox.width + other.width)
{
return true;
}
else
{
return false
}
}
noLoop()
}
this.draw = function()
{
stroke(255)
line(0,windowHeight/2,windowWidth,windowHeight/2)
stroke(0)
for(var i = 0; i < numberss; i++)
{
var box = {
x:random(0,windowWidth - 50),
y:random(windowHeight/2 ,windowHeight - 50),
width:50,
height:50,
speedX:random(1,5),
speedY:random(1,5)
}
this.sample.push(box)
}
//use numberss variable to work with gui
for(var i = 0; i < numberss; i++)
{
fill(this.col)
rect(this.sample[i].x,this.sample[i].y,50,50)
}
this.move()
}
this.move = function()
{
for(var i = 0; i < numberss; i++)
{
var shape = this.sample[i]
shape.x += shape.speedX
shape.y += shape.speedY
if(shape.x + shape.width >= windowWidth || shape.x <= 0 )
{
shape.speedX = -shape.speedX
}
if(shape.y + shape.height >= windowHeight || shape.y <= windowHeight/2)
{
shape.speedY = -shape.speedY;
}
for(var j = 0; j < numberss; j++)
{
var others = this.sample[j]
var d = dist(shape.x,shape.y,others.x,others.y)
if( i != j && d < shape.width + others.width)
{
test = true;
}
else
{
test = false
}
if(test)
{
this.col = color(255,0,0)
}
}
}
}
}
You should visit this link and transform their circles into your boxes.
1st: Calculate dist(object1.x, object.y, object2.x, object2.y) and save into a variable called d
2nd:
if (d < object1.h + object2.h) {
// Enter your code here
}
My function seem not to work and I am not sure why. It should return true or false but it doesnt. I am trying to calculate if the value is lower than 0 and if so return false, true otherwise.
function tickets(peopleInLine){
// ...
var twentyfive = 0;
var fifty = 0;
var hundred = 0;
function checkforsales() {
if ((twentyfive < 0) || (fifty < 0) || (hundred < 0)) {
return false
} else {
return true
}
}
for (let i = 0; i < peopleInLine.length; i++) {
if(peopleInLine[i] === 25) {
twentyfive = twentyfive + 25;
} else if (peopleInLine[i] === 50) {
fifty = fifty + 50;
twentyfive = twentyfive - 25;
checkforsales();
} else {
hundred = hundred + 100;
checkforsales();
}
}
}
console.log(tickets([25, 100]));
function tickets(peopleInLine){
// ...
var twentyfive = 0;
var fifty = 0;
var hundred = 0;
function checkforsales() {
if ((twentyfive < 0) || (fifty < 0) || (hundred < 0)) {
return false
} else {
return true
}
}
for (let i = 0; i < peopleInLine.length; i++) {
if(peopleInLine[i] === 25) {
twentyfive = twentyfive + 25;
} else if (peopleInLine[i] === 50) {
fifty = fifty + 50;
twentyfive = twentyfive - 25;
} else {
hundred = hundred + 100;
}
}
return checkforsales();
}
console.log(tickets([25, 100]));
You need to return checkforsales function as below
function tickets(peopleInLine){
// ...
var twentyfive = 0;
var fifty = 0;
var hundred = 0;
function checkforsales() {
if ((twentyfive < 0) || (fifty < 0) || (hundred < 0)) {
return false
} else {
return true
}
}
for (let i = 0; i < peopleInLine.length; i++) {
if(peopleInLine[i] === 25) {
twentyfive = twentyfive + 25;
} else if (peopleInLine[i] === 50) {
fifty = fifty + 50;
twentyfive = twentyfive - 25;
} else {
hundred = hundred + 100;
}
}
return checkforsales();
}
I started learning JavaScript today, and to test it I made a page that changes the image shown when I click on a div. Everything was working fine, but I wanted to know how I could add an input element to specify how many steps I want to jump every time I click the button. I came up with an idea, however it isn't working. Seems like the variable is kind of "accumulating" values when I console.log it. I will link the codes, first one works and the second one doesn't. The first ones uses fixed values, and the square changes colors as it should be doing (the images don't really matter). The second one should jump steps: typing 1 would make it the same as the first one, typing 2 would make it jump one color.
https://jsfiddle.net/u2s3pqxL/1/
window.onload = function(){
var x = 0;
document.getElementById("teste").onclick = function(){myFunction()};
function myFunction(){
if (x == 0){
document.getElementById("teste").style.backgroundColor = "red";
document.getElementById("taiga").style.opacity = 1;
document.getElementById("nanachi").style.opacity = 0;
document.getElementById("azami").style.opacity = 0;
document.getElementById("kcalb").style.opacity = 0;
document.getElementById("moge-ko").style.opacity = 0;
x += document.getElementById("number").value;
} else if (x == 1){
document.getElementById("teste").style.backgroundColor = "blue";
document.getElementById("taiga").style.opacity = 0;
document.getElementById("nanachi").style.opacity = 1;
document.getElementById("azami").style.opacity = 0;
document.getElementById("kcalb").style.opacity = 0;
document.getElementById("moge-ko").style.opacity = 0;
x += document.getElementById("number").value;
} else if (x == 2){
document.getElementById("teste").style.backgroundColor = "yellow";
document.getElementById("taiga").style.opacity = 0;
document.getElementById("nanachi").style.opacity = 0;
document.getElementById("azami").style.opacity = 1;
document.getElementById("kcalb").style.opacity = 0;
document.getElementById("moge-ko").style.opacity = 0;
x += document.getElementById("number").value;
} else if (x == 3){
document.getElementById("teste").style.backgroundColor = "purple";
document.getElementById("taiga").style.opacity = 0;
document.getElementById("nanachi").style.opacity = 0;
document.getElementById("azami").style.opacity = 0;
document.getElementById("kcalb").style.opacity = 0;
document.getElementById("moge-ko").style.opacity = 1;
x += document.getElementById("number").value;
} else if (x == 4){
document.getElementById("teste").style.backgroundColor = "black";
document.getElementById("taiga").style.opacity = 0;
document.getElementById("nanachi").style.opacity = 0;
document.getElementById("azami").style.opacity = 0;
document.getElementById("kcalb").style.opacity = 1;
document.getElementById("moge-ko").style.opacity = 0;
x = 0;
}
console.log(x);
};
};
https://jsfiddle.net/c3s1opb7/7/
window.onload = function(){
var x = 0;
document.getElementById("teste").onclick = function(){myFunction()};
function myFunction(){
if (x == 0){
document.getElementById("teste").style.backgroundColor = "red";
document.getElementById("taiga").style.opacity = 1;
document.getElementById("nanachi").style.opacity = 0;
document.getElementById("azami").style.opacity = 0;
document.getElementById("kcalb").style.opacity = 0;
document.getElementById("moge-ko").style.opacity = 0;
x += 1;
} else if (x == 1){
document.getElementById("teste").style.backgroundColor = "blue";
document.getElementById("taiga").style.opacity = 0;
document.getElementById("nanachi").style.opacity = 1;
document.getElementById("azami").style.opacity = 0;
document.getElementById("kcalb").style.opacity = 0;
document.getElementById("moge-ko").style.opacity = 0;
x += 1;
} else if (x == 2){
document.getElementById("teste").style.backgroundColor = "yellow";
document.getElementById("taiga").style.opacity = 0;
document.getElementById("nanachi").style.opacity = 0;
document.getElementById("azami").style.opacity = 1;
document.getElementById("kcalb").style.opacity = 0;
document.getElementById("moge-ko").style.opacity = 0;
x += 1;
} else if (x == 3){
document.getElementById("teste").style.backgroundColor = "purple";
document.getElementById("taiga").style.opacity = 0;
document.getElementById("nanachi").style.opacity = 0;
document.getElementById("azami").style.opacity = 0;
document.getElementById("kcalb").style.opacity = 0;
document.getElementById("moge-ko").style.opacity = 1;
x += 1;
} else if (x >= 4){
document.getElementById("teste").style.backgroundColor = "black";
document.getElementById("taiga").style.opacity = 0;
document.getElementById("nanachi").style.opacity = 0;
document.getElementById("azami").style.opacity = 0;
document.getElementById("kcalb").style.opacity = 1;
document.getElementById("moge-ko").style.opacity = 0;
x = 0;
}
console.log(x);
};
};
What should I do to make the second one work?
In your code, you have:
x += document.getElementById("number").value;
with this, you asked in your var "x" to add the value of your input.. with type String...
For example, you have the value "1" in the input and 0 in your varaible "x"..
If you follow your code, the result after this expression:
x += document.getElementById("number").value;
Your result will be: 01
and you, you want: 1
because you add a type String in your variable type Integer..
You must parse the varaible in Integer with this parseInt():
x += parseInt(document.getElementById("number").value);
After pasting the following code, my browser crashed. I have absolutely no idea why. I am a new to Javascript.
Here is my code:
var randarray = new Array();
var l = 0;
var flag;
var numofpost = 5;
function randomposts(json) {
var total = parseInt(json.feed.openSearch$totalResults.$t, 10);
for (i = 0; i < numofpost;) {
flag = 0;
randarray.length = numofpost;
l = Math.floor(Math.random() * total);
for (j in randarray) {
if (l == randarray[j]) {
flag = 1;
}
}
if (flag == 0 && l != 0) {
randarray[i++] = l;
}
}
document.write('<ul class="rp-menu">');
for (n in randarray) {
var p = randarray[n];
var entry = json.feed.entry[p - 1];
for (k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
var item = "<li>" + "" + entry.title.$t + "</li>";
document.write(item);
}
}
}
document.write('</ul>');
}
The increment of i in your first for loop is behind a condition, so if it never resolves to true, you'll have an infinite loop