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;
}
Related
in this excercise i create a counter that has a number display and 2 button to lower and increase number. i assign number to parseInt(num) to convert num object to number. i use alert to check type of number. typeof(number) return number but number return NaN. please someone explain.[edit]reading comment, i was able to solve the problem. i have upadated the solution
var low = document.getElementById("low")
var add = document.getElementById("add")
low.addEventListener("click", function () {
var num = document.getElementById("num")
var number = parseInt(num.innerText)
num.innerHTML = number - 1
})
add.addEventListener("click", function () {
var num = document.getElementById("num")
var number = parseInt(num.innerText)
num.innerHTML = number + 1
})
<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>Document</title>
<!-- <link rel="stylesheet" href="style.css"> -->
</head>
<body>
<div class="container">
<h1>counter</h1>
<h1 id="num">0</h1>
<div class="btn">
<button id="low">lower count</button>
<button id="add">add count</button>
</div>
</div>
<script src="js.js"></script>
</body>
</html>
You are trying to parseInt(num) but num is DOM element - not number. You want its content. You can get it with .innerText.
const num = document.getElementById("num")
console.log(num);
console.log(parseInt(num));
console.log(parseInt(num.innerText));
<h1 id="num">0</h1>
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.
please help me solve this code guys I am stuck here I am new to JavaScript that's why I can't solve this simple error
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
var scr1 = 0;
var scr2 = 0;
var counter = 0;
window.onload = function () {
var YS = document.getElementById("YS");
var CS = document.getElementById("CS");
var mid = document.getElementById("mid");
YS.innerHTMLÂ = "Your Score : " + scr1 + counter ;
CS.innerHTML = "Com Score : " + scr2 ;
}
function srt() {
counter++;
}
</script>
</head>
<body>
<h2 class="scr1" id="YS">Your Score :</h1>
<h2 class="scr2" id="CS">Com Score :</h2>
<br />
<br />
<center>
<div class="mid" id="mid"><p>0</p></p></div>
<div class="srt" id="none" onclick="srt()">
<h4>Start</h4>
</div>
</center>
</body>
</html>
I hope you understand my question please help me if you can
Thanks In Advance
Your counter is increasing, but you didn't show the change when it's increasing.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script>
var scr1 = 0;
var scr2 = 0;
var counter = 0;
window.onload = function () {
var YS = document.getElementById("YS");
var CS = document.getElementById("CS");
var mid = document.getElementById("mid");
}
function srt() {
console.log(counter);
counter++;
YS.innerHTML = "Your Score : " + scr1 + counter ;
CS.innerHTML = "Com Score : " + scr2 ;
}
</script>
</head>
<body>
<h2 class="scr1" id="YS">Your Score :</h1>
<h2 class="scr2" id="CS">Com Score :</h2>
<br />
<br />
<center>
<div class="mid" id="mid"><p>0</p></p></div>
<div class="srt" id="none" >
<button onclick="srt()">Start</button>
</div>
</center>
</body>
</html>
next time, use console.log() to do debugging
On Start div click you need to update your other Div to show the updated value.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
var scr1 = 0;
var scr2 = 0;
var counter = 0;
window.onload = function () {
var YS = document.getElementById("YS");
var CS = document.getElementById("CS");
var mid = document.getElementById("mid");
YS.innerHTML = "Your Score : " + scr1 + counter ;
CS.innerHTML = "Com Score : " + scr2 ;
}
function srt() {
counter++;
mid.innerHTML = counter;
YS.innerHTML = "Your Score : " + scr1 + counter ;
CS.innerHTML = "Com Score : " + scr2 ;
}
</script>
</head>
<body>
<h2 class="scr1" id="YS">Your Score :</h1>
<h2 class="scr2" id="CS">Com Score :</h2>
<br />
<br />
<center>
<div class="mid" id="mid"><p>0</p></p></div>
<div class="srt" id="none" onclick="srt()">
<h4>Start</h4>
</div>
</center>
</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.
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!