I'm trying to make an incremental type game. There is this website ,dmholley.co.uk, that gives the basic code.
The Problem: After buying cursors, the number of cursors does not change. It simply stays at 0.
Here is the index.html
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="interface.css" />
</head>
<body>
<button onclick="cookieClick(1)">Click Me!</button>
<br />
Cookies: <span id="cookies">0</span>
<br />
<button onclick="buyCursor()">Buy Cursor </button>
<br />
Cursors: <span id="cursors">0</span>
Cursor Cost: <span id="cursorCost">10</span>
<script type="text/javascript" src="main.js"></script>
</body>
Heres the main.js
var cookies = 0;
function cookieClick (number){
cookies = cookies + number;
document.getElementById("cookies").innerHTML = cookies;
};
var cursors = 0;
function buyCursor(){
var cursorCost= Math.floor(10*Math.pow(1.1,cursors));
if(cookies >= cursorCost){
cursors = cursors + 1;
cookies = cookies - cursorCost;
document.getElementByID('cursors').innerHTML = cursors;
document.getElementById('cookies').innerHTML = cookies;
};
var nextCost=Math.floor(10* Math.pow(1.1,cursors));
document.getElementById('cursorCost').innerHTML = nextCost;
};
window.setInterval(function(){
cookieClick(cursors);
}, 1000);
You have to click "Click me" at least 10 times for anything to happen.
Then click "Buy Cursor".
You will find you have an error in your code:
Note the case of the functions:
document.getElementByID('cursors').innerHTML = cursors;
document.getElementById('cookies').innerHTML = cookies;
Easy to fix!
Related
`Hello there, I'm trying to write a counter code in which I have two buttons (Increase and Decrease), I created the functions, and it works but the buttons disappear.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buttons practice</title>
<script src="/JavaScript/buttons_practice.js" defer></script>
</head>
<body>
<button id="todo-button" onclick="DoneChange()">Changing Text</button>
<div id="counter">0
<button id="up">Up</button>
<button id="down">Down</button>
</div>
<div id="counter">0</div>
</body>
</html>
const Counter = document.getElementById('counter');
const Up = document.getElementById('up');
const Down = document.getElementById('down');
let count = 0;
Up.addEventListener('click', function Increase(){
count = count + 1;
UpdateCounter();
});
Down.addEventListener('click', function Decrease() {
count = count -1;
UpdateCounter();
});
function UpdateCounter() {
Counter.innerText= count;
}
I was reading some similar questions, but I couldn't figure it out. Some answers aimed to the InnerText to be the Issue, however I can see this code works, I'm basically using the event listener so I can have Html exclusive to Html, it's modular and better at reading the code I think.
<div id="counter">0</div>
<button onclick="countUp()">Up</button>
<button onclick="countDown()">Down</button>
<script>
let count = 0;
function countUp() {
count = count + 1;
updateCount();
}
function countDown() {
count = count - 1;
updateCount();
}
function updateCount() {
let counter = document.getElementById('counter');
counter.innerText = count;
}
</script>
The buttons are inside the counter. Consequently, when you rewrite the contents of the counter (with innerText) you replace the buttons.
Don’t put the buttons inside the counter.
You have two elements with id counter in this block:
<div id="counter">0
<button id="up">Up</button>
<button id="down">Down</button>
</div>
<div id="counter">0</div>
When you do
Counter.innerText= count;
you override everything that you have within the first counter div that contains buttons, and as a result, they disappear.
I have started doing a game, kinda similar to 'Spend Bill Gates Money', but I've said to change it up a bit.
I've done the first item, and I've tried to edit it with JS, so everytime you press "Buy", it will remove 1 dollar from you, or, when you press "Sell" to give you 1 dollar. The problem is, everytime I click, it only counts once. Plus, if I press "Buy", then "Sell", it gives me instantly 11 dollars, instead of 10 dollars.
Filename: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>Spend you own money</title>
<script src="script.js">
</script>
<link rel="stylesheet" href="style.css">
<body>
<noscript>You need to enable javascript in order to have fun!</noscript>
<h1 class="center" id = "money">Money Left: 10</h1><!--Money = 100 000 000 000-->
<div class= "main">
<div class="pen">
<h2>Pen</h2>
<input type="submit" class="sell" value="Sell" onclick="sellpen()">
<!-- <input type="text" class="amount" value = 0 id = "amountpen" readonly="readonly" size="9%"> -->
<input type="submit" class="buy" value="Buy" onclick="amountpen()" >
</div>
</div>
</body>
</head>
</html>
Filename: script.js
var money = 10; //dollars
var pen = 1; // dollar
var mpen = money-pen;
var ppen = money+pen;
function amountpen() {
document.getElementById("money").innerHTML = "Money Left: " + mpen;
money = money-1;
}
function sellpen() {
document.getElementById("money").innerHTML = "Money Left: " +ppen;
money = money+
Your script.js would be like this:
var money = 10;
var pen = 1;
function amountpen() {
var mpen = money-pen;
document.getElementById("money").innerHTML = "Money Left: " + mpen;
money = money-1;
}
function sellpen() {
var ppen = money+pen;
document.getElementById("money").innerHTML = "Money Left: " +ppen;
money = money+1;
}
You can try with this JS code :
money = 10; //dollars
function amountpen() {
money--;
document.getElementById("money").innerHTML = "Money Left: " + money;
}
function sellpen() {
money++;
document.getElementById("money").innerHTML = "Money Left: " +money;
}
I am making a clicker game. When I display the moneyCurrent variable I get incorrect numbers. The numbers don't actually join. This is in the sellTech() function.
If you want the full project go to enter link description here techClicker
This is on repl.it and that is not the problem.
I have tried parseInt() and Number() and the numbers keep adding like
they are strings.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Tech Clicker</title>
<link rel="shortcut icon" type="image/png" href="IMAGE"/>
<link href="techClicker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Tech Clicker</h1>
<h2 id="moneyValueText">$0</h2>
<div id="ccDiv">
<input id="ccMakeButton"type="image" src="IMAGE"
onclick="ccClickFunc()" width="50"
height="50">
<p> </p>
<button id="ccSellButton"onclick="sellTech()">Sell Computer
Chips</button>
<h4 id="ccCounter">Computer Chips = </h4>
</div>
<div id="usbDiv">
<input id="mcMakeButton"type="image"
src="IMAGE"
onclick="mcClickFunc()" width="38"
height="26">
<p> </p>
<button id="mcSellButton"onclick="sellTech()">Sell Memory Chips</button>
<h4 id="mcCounter">Memory Chips = </h4>
</div>
<script src="clickGainFunc.js"></script>
<script src="sellTechV2.js"></script>
</body>
</html>
var ccPrice = 0.25
var ccSellAmount
var mcPrice = 0.35;
var mcSellAmount;
//JAVASCRIPT
function sellTech(){
ccSellAmount = cc * ccPrice;
mcSellAmount = mc * mcPrice;
moneyCurrent = ccSellAmount + mcSellAmount;
document.getElementById("moneyValueText").innerHTML = moneyCurrent;
cc = 0;
mc = 0;
document.getElementById("ccCounter").innerHTML = "Computer Chips = " + cc;
document.getElementById("mcCounter").innerHTML = "Memory Chips = " + mc;
}
I expected that the numbers would add up and not drop in value.
This is a little hard to explain so go to
https://techclicker--beraemirkoklu.repl.co/
and then click on the computer chip once. And then sell it. 0.25. If you sell 2, 0.5. if you sell 1, again .25. I am trying to fix that too.
Can anyone help :
The scenario is when the user1 click the button it will increment
Example : user1 clicks 5 times and then the user2 when it clicks the next number will be 6. and then when the user1 click again it will be 7
i think it works with ajax and save to db, anyone can help me how to do it. Im a begginer in ajax and database
Here is the code i just know:
<html>
<body>
<button type="button" onClick="counter()">Next</button>
<p>Number: <a id="counter">0</a></p>
</body>
</html>
<script type="text/javascript">
var counter= 0;
function counter() {
counter += 1;
document.getElementById("counter").innerHTML = counter;
}
</script>
Please use session storage to store the incremental values.
like store the values using sessionStorage.setItem("userclicks",variablevalue);
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function load()
{
if(localStorage.getItem("counter")!=null)
{
counter = Number(localStorage.getItem("counter"));
document.getElementById("counterValue").innerHTML = counter;
}
}
var counter= 0;
function counterFn() {
counter = Number(localStorage.getItem("counter"));
console.log(counter);
counter += 1;
localStorage.setItem("counter",counter);
document.getElementById("counterValue").innerHTML = counter;
}
</script>
</head>
<body onload="load();">
<button type="button" onclick="counterFn()">Next</button>
<p>Number:<a id="counterValue">0</a></p>
</body>
</html>
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function load()
{
if(localStorage.getItem("counter")!=null)
{
counter = Number(localStorage.getItem("counter"));
document.getElementById("counterValue").innerHTML = counter;
}
}
var counter= 0;
function counterFn() {
counter = Number(localStorage.getItem("counter"));
console.log(counter);
counter += 1;
localStorage.setItem("counter",counter);
document.getElementById("counterValue").innerHTML = counter;
}
</script>
</head>
<body onload="load();">
<button type="button" onclick="counterFn()">Next</button>
<p>Number:<a id="counterValue">0</a></p>
</body>
</html>
EDIT: The "Create New Startup" button works with the "run code snippet" button in Stack Overflow, but not with index.html in chrome...
I have a button that's not firing the JS function.
Here's the HTML:
<button onclick="chooseStartup()" id="create">Create New Startup</button>
And here's the JS function:
var startupX = ['Uber', 'Google', 'Amazon', 'Apple', 'Facebook', 'Twitter'];
var startupY = ['Slack', 'Trello', 'Tesla', 'Hyperloop', 'Harvest'];
function chooseStartup() {
var x = startupX[Math.floor(Math.random()*startupX.length)];
var y = startupY[Math.floor(Math.random()*startupY.length)];
document.getElementById('startupX').innerHTML = x;
document.getElementById('startupY').innerHTML = y;
};
Any idea why it's not working?
After I fix this issue, how would I go about making the favorite button save the generated sentence -- and then clicking the print button to display all the saved favorites?
All my code is below
var startupX = ['Uber', 'Google', 'Amazon', 'Apple', 'Facebook', 'Twitter'];
var startupY = ['Slack', 'Trello', 'Tesla', 'Hyperloop', 'Harvest'];
function chooseStartup() {
var x = startupX[Math.floor(Math.random()*startupX.length)];
var y = startupY[Math.floor(Math.random()*startupY.length)];
document.getElementById('startupX').innerHTML = x;
document.getElementById('startupY').innerHTML = y;
};
<!DOCTYPE html>
<html>
<head>
<title>Mad Lib</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h1 id="xForY"></h1>
<h1>A startup that is
<span id="startupX"></span>, but for
<span id="startupY"></span>
</h1>
<div id="inputs">
<button onclick="chooseStartup()" id="create">Create New Startup</button>
<button id="save">Favorite Startup</button>
<button id="print">Print Favorites</button>
</div>
<h2 id="favorites">
</h2>
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='js/madlib-console.js'></script>
</body>
</html>
To favorite and then print it do the following: STEP 1
Change from this:
<button id="save">Favorite Startup</button>
<button id="print">Print Favorites</button>
To this:
<button onclick="doFav()" id="save">Favorite Startup</button>
<button onclick="printFav()" id="print">Print Favorites</button>
STEP 2
Insert the following code on the <script></script> portion of your HTML:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
} return ""; }
function doFav(){setCookie('myFav','A startup that is '+document.getElementById('startupX').innerHTML+' but for '+document.getElementById('startupY').innerHTML,1);}
function printFav(){document.getElementById('favorites').innerHTML = getCookie('myFav');}
Then pay attention because the setting of cookies locally is disabled by default. If you try this code online you will see that it runs without errors.