here's what happened. i was trying to develop a clicker game using html and css and js but the setInterval was not working while my console is going blank as if there were no errors.
first, i tried putting the function on top because last time when i put the var like this
setInterval(gg, cps)
let cps=0;
function upgrade2() {
removec(cpctwo*2)
newlv2()
cps-=99000;
}
function gg() {
document.getElementById("coins").innerHTML ++;
}
the console errored last time when i was using that so then i changes the var from the bottom to the top.
this is my current code html:
<div id="coin">
<h2> <code>$</code><code id="coins">0</code>
</h2>
<img src="https://st3.depositphotos.com/3027583/16082/v/950/depositphotos_160820424-stock-illustration-pixel-art-golden-coin-retro.jpg?forcejpeg=true" width="50" height="50" onclick="addc(cpc)">
</div>
<div id="upgrade">
<div id="morecoins"> Coins Lv
<span id="level">1</span>
<br> Cost:<span id="cost">0.5</span><br>
<button class="upgbtn" onclick="upgrade()">Upgrade
</button>
</s>
</div>
<div id="cps"> Income Lv
<span id="level2">1</span>
<br> Cost:<span id="cost2">2</span><br>
<button class="upgbtn" onclick="upgrade2()">Upgrade
</button>
</div>
</div>
<br>
<script src="scripts.js"></script>
<hr>
moreinfo:
<br><br>
New Update:<br>
1. turned "coins:" into "$"
<br>
2. new upgrade income/coins per second gui
<br>3. removed "title" <br>
fixed income upgrade cost and lv
<br><br>
engine version: V1.6
<br><br>
Heping Yang/Gleacc Corp
css:
#coin {
text-align: center;
}
.upgbtn {
padding: 4px 16px;
border: solid black 3px;
background: green;
border-radius: 12px;
}
#morecoins {
padding: 8px 12px;
border: solid black 3px;
background: yellowgreen;
border-radius: 12px;
}
#cps {
padding: 8px 12px;
border: solid black 3px;
background: yellowgreen;
border-radius: 12px;
}
js:
var coins = 0;
var cpc = 1;
var cpctwo = 1;
var lv = 1;
var cps = 100000;
function upgrade2() {
removec(cpctwo*2)
newlv2()
cps-=99000;
}
function gg() {
document.getElementById("coins").innerHTML ++;
}
setInterval(gg, cps);
function addc(x) {
coins += x;
var coinshtml = (document.getElementById("coins").innerHTML = `${coins}`);
}
function removec(x) {
coins -= x;
var coinsnewnew = (document.getElementById("coins").innerHTML = `${coins}`);
}
function newlv() {
lv += 1;
cpc +=24;
document.getElementById("cost").innerHTML = `${cpc/2}`;
document.getElementById("level").innerHTML = `${lv}`;
}
function upgrade() {
removec(cpc/2)
newlv()
}
let lv2 = 1;
function newlv2() {
lv2 += 1;
cpctwo +=8;
cps;
document.getElementById("cost2").innerHTML = `${cpctwo*2}`;
document.getElementById("level2").innerHTML = `${lv2}`;
}
Instead of .innerHTML method, add .textContent method so when you add a new coin the cast doesn't read the html so it won't output NaN. Instead, with .textContent method it will only get the text, for example, '5', and it will cast it without problems.
Related
I am stucked with the logic of one exercise from The Odin Project. I am actually working on a simple calculator and it's almost done (except for minor bugs I think) but I need to implement the last functionality and honestly I don't know where to start.
Basically the exercise says:
"Users should be able to string together several operations and get
the right answer, with each pair of numbers being evaluated at a time.
For example, 12 + 7 - 5 * 3 = should yield 42.
Your calculator should not evaluate more than a single pair of numbers
at a time. Example: you press a number button (12), followed by an
operator button (+), a second number button (7), and finally a second
operator button (-). Your calculator should then do the following:
first, evaluate the first pair of numbers (12 + 7), second, display
the result of that calculation (19), and finally, use that result (19)
as the first number in your new calculation, along with the next
operator (-)."
The thing is, I'm very lost and confused about this last step and when I try to operate like that on my calculator it simply does not work. It's like I have to priorize multiplying and dividing over adding and subtracting, right? Could anyone enlight me?
Here is the code:
const displayPrevResult = document.querySelector('.prev-result');
const displayCurrentResult = document.querySelector('.current-result');
const equal = document.querySelector('.equal');
const decimal = document.querySelector('.decimal');
const clear = document.querySelector('.clear');
const numberBtn = document.querySelectorAll('.number');
const operatorBtn = document.querySelectorAll('.operator');
let current = '';
let previous = '';
let opString = '';
numberBtn.forEach((button) => {
button.addEventListener('click', (e) => {
getNum(e.target.textContent);
})
})
operatorBtn.forEach((button) => {
button.addEventListener('click', (e) => {
getOp(e.target.textContent);
})
})
clear.addEventListener('click', clearCalc);
// Operate when clicking equal
equal.addEventListener('click', () => {
current = parseFloat(current);
previous = parseFloat(previous);
if (opString === '+') {
current = add(previous, current);
} else if (opString === '-') {
current = subtract(previous, current);
} else if (opString === 'x') {
current = multiply(previous, current);
} else if (opString === '÷') {
if (current === 0) {
clearCalc();
displayCurrentResult.textContent = 'ERROR';
return;
}
current = divide(previous, current);
}
displayCurrentResult.textContent = current;
})
function clearCalc() {
current = '';
previous = '';
displayCurrentResult.textContent = '0';
displayPrevResult.textContent = '';
}
// Store current number, get operator and display it
function getOp(opStr) {
opString = opStr;
previous = current;
displayPrevResult.textContent = previous;
current = '';
}
// Get the number and display it
function getNum(num) {
current += num;
displayCurrentResult.textContent = current;
}
// Operating functions
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
function multiply(a, b) {
return a * b;
}
function divide(a, b) {
return a / b;
}
function operate(a, b) {
return divide(b, a);
}
console.log(operate(22, 4));
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calcContainer {
background: linear-gradient(276deg, #40a179, #77cea9);
padding: 1em;
border-radius: 5px;
border: 1px solid #000;
}
button {
padding: 1em;
margin: 0.1em;
width: 40px;
background: #a2ffaf;
border: 1px solid #fff;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background: #72e782;
}
.clr {
background: #87e4bd;
}
.clr:hover {
background: #53ad88;
}
.clear {
margin: 0em 0.1em 0.5em 0.5em;
padding: 0;
}
.output-clear-container {
display: flex;
}
.output {
flex-grow: 1;
height: 40px;
background: #c2fcca;
border-radius: 5px;
border: 1px solid #fff;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
padding-right: 0.5em;
margin-bottom: 0.5em;
}
.par {
margin-bottom: 0.3em;
}
.prev-result {
font-size: 14px;
padding-bottom: 0.3em;
color:#40a179;
}
.current-result {
font-size: 18px;
}
<!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">
<link rel="stylesheet" href="styles.css">
<script src="main.js" defer></script>
<title>Calculator</title>
</head>
<body>
<div class="calcContainer">
<div class="output-clear-container">
<div class="output">
<div class="prev-result"></div>
<div class="current-result">0</div>
</div>
<button class="clear">AC</button>
</div>
<div class="par">
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator clr">÷</button>
</div>
<div class="par">
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operator clr">x</button>
</div>
<div class="par">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operator clr">-</button>
</div>
<div class="par">
<button class="decimal clr">.</button>
<button class="number">0</button>
<button class="equal clr">=</button>
<button class="operator clr">+</button>
</div>
</div>
</body>
</html>
Thank you very much.
I'm taking a beginner javascript/html/css course and don't have a super strong background in these. I'm trying to make a page that simulates a simple card game for a user versus the computer. The game takes digits that correspond to a card's suit and value and then displays them on the screen. Whoever has the higher card wins and a message is displayed.
This involves some things I'm not clear on, such as simple formatting or making the functions work together. I'm especially confused on where to put DOMs and how to even get a startbutton to work.
I'm using four functions:
randomizer
getcard
startgame
comparecard
In what ways can I make these interact with eachother? Are there any formatting issues in the css, html, etc.? Below is my initial code, I've tried too many variations and I'm just missing something I can't spot.
function randomizer(x) {
var y = x * Math.random();
var randNum = Math.round(y);
return randNum;
}
function getcard() {
var suit = randomizer(3);
var card = randomizer(13);
var wholeCard = suit + " " + card;
return wholeCard;
}
function startgame() {
var usercard;
var computercard;
usercard.getcard();
document.getElementByID("yourcard").innerHTML = usercard;
computercard.getcard();
document.getElementByID("computercard").innerHTML = computercard;
}
function comparecard() {
var usercard;
var computercard;
var winnermessage;
var usernum;
var computernum;
if (usernum > computernum) {
winnermessage = "You Win!";
} else if (usernum < computernum) {
winnermessage = "The Computer Wins!";
} else {
winnermessage = "It's a Tie!";
}
}
body {
font-family: Helvetica, Arial, sans-serif;
}
.cardcontain {
width: 80%;
margin: auto;
}
[class*="cardgrid"] {
float: left;
width: 45%;
text-align: center;
}
.cardgrid {
color: #aa4444;
}
.cardgrid2 {
display: block;
vertical-align: top;
color: #651e1e;
height: 110px;
font-size: 2em;
border: 2px solid #000000;
border-radius: 5px;
}
.cardgrid3 {
text-align: left;
color: #888888;
}
button {
background-color: #57ac75;
}
.winner::before {
display: block;
content: " ";
height: 400px;
}
.winner {
font-size: 24px;
font-weight: bolder;
color: #3f7a3b;
text-align: center;
}
<div class="cardcontain">
<h2 class="cardgrid">Computer Card</h2>
<h2 class="cardgrid">Your Card</h2>
</div>
<div class="cardcontain">
<div class="cardgrid2" id="computercard"></div>
<div class="cardgrid2" id="yourcard"></div>
</div>
<div class="cardcontain">
<div class="cardgrid">
<p> </p>
</div>
<div class="cardgrid"><button onclick="startgame()">Click here for your card</button></div>
</div>
<div class="cardcontain">
<div class="cardgrid3">
<h3>Key: first digit</h3>
<ul>
<li>0 = Spade</li>
<li>1 = Club</li>
<li>2 = Heart</li>
<li>3 = Diamond</li>
</ul>
</div>
<div class="cardgrid3">
<h3>Key: second digit</h3>
<ul>
<li>11 = Jack</li>
<li>12 = Queen</li>
<li>13 = King</li>
<li>14 = Ace</li>
</ul>
</div>
</div>
<p class="winner" id="winner"></p>
A few points
getcard probably needs to return the suit & value separately, as you need just the value to compare later on
Javascript is case sensitive so getElementByID is wrong (it is getElementById)
Where you had code like var usercard; and usercard.getcard(); makes no sense. getcard() is a standalone function which just returns a value so you probably wanted var usercard = getcard();
There are a bunch of other things which you will learn as you get better at javascript too broad for this answer
The below works along the lines I expect you thought
function randomizer(x) {
var y = x * Math.random();
var randNum = Math.round(y);
return randNum;
}
function getcard() {
var suit = randomizer(3);
var card = randomizer(13);
return {suit, card};
}
function startgame() {
var usercard = getcard();
var computercard = getcard();
document.getElementById("yourcard").innerHTML = usercard.suit + " " + usercard.card;
document.getElementById("computercard").innerHTML = computercard.suit + " " + computercard.card;
comparecard(usercard.card, computercard.card)
}
function comparecard(usernum, computernum) {
if (usernum > computernum) {
winnermessage = "You Win!";
} else if (usernum < computernum) {
winnermessage = "The Computer Wins!";
} else {
winnermessage = "It's a Tie!";
}
document.getElementById("winner").innerHTML = winnermessage;
}
body {
font-family: Helvetica, Arial, sans-serif;
}
.cardcontain {
width: 80%;
margin: auto;
}
[class*="cardgrid"] {
float: left;
width: 45%;
text-align: center;
}
.cardgrid {
color: #aa4444;
}
.cardgrid2 {
display: block;
vertical-align: top;
color: #651e1e;
height: 110px;
font-size: 2em;
border: 2px solid #000000;
border-radius: 5px;
}
.cardgrid3 {
text-align: left;
color: #888888;
}
button {
background-color: #57ac75;
}
.winner::before {
display: block;
content: " ";
height: 400px;
}
.winner {
font-size: 24px;
font-weight: bolder;
color: #3f7a3b;
text-align: center;
}
<div class="cardcontain">
<h2 class="cardgrid">Computer Card</h2>
<h2 class="cardgrid">Your Card</h2>
</div>
<div class="cardcontain">
<div class="cardgrid2" id="computercard"></div>
<div class="cardgrid2" id="yourcard"></div>
</div>
<div class="cardcontain">
<div class="cardgrid">
<p> </p>
</div>
<div class="cardgrid"><button onclick="startgame()">Click here for your card</button></div>
</div>
<div class="cardcontain">
<div class="cardgrid3">
<h3>Key: first digit</h3>
<ul>
<li>0 = Spade</li>
<li>1 = Club</li>
<li>2 = Heart</li>
<li>3 = Diamond</li>
</ul>
</div>
<div class="cardgrid3">
<h3>Key: second digit</h3>
<ul>
<li>11 = Jack</li>
<li>12 = Queen</li>
<li>13 = King</li>
<li>14 = Ace</li>
</ul>
</div>
</div>
<p class="winner" id="winner"></p>
Note: I have not fixed your randomizer but if you're generating playing cards I dont think you want to generate zeros... also if were going for realism you need to ensure the computer and player cant randomly pick the same card.
I created a basic voting system for a comment ratings bar. I'm trying to access the previous Sibling Element to update the votes but it's not working properly. IAre you're supposed to use event.currentTarget or event.target? Where did I go wrong? Thank you.
https://jsfiddle.net/donfontaine12/bm9njcLt/46/#&togetherjs=qocecyJqyy
HTML
<div id="comment_ratings_bar">
<div id="comment_rating_sign">+</div>
<div id="comment_rating_num">0</div>
<div id="comment_rating_percentage">[100.00%] </div>
<div class="green_up_arrow"></div>
<div class="red_down_arrow"></div>
</div>
<div id="comment_ratings_bar">
<div id="comment_rating_sign">+</div>
<div id="comment_rating_num">0</div>
<div id="comment_rating_percentage">[100.00%] </div>
<div class="green_up_arrow"></div>
<div class="red_down_arrow"></div>
</div>
<div id="comment_ratings_bar">
<div id="comment_rating_sign">+</div>
<div id="comment_rating_num">0</div>
<div id="comment_rating_percentage">[100.00%] </div>
<div class="green_up_arrow"></div>
<div class="red_down_arrow"></div>
</div>
<div id="comment_ratings_bar">
<div id="comment_rating_sign">+</div>
<div id="comment_rating_num">0</div>
<div id="comment_rating_percentage">[100.00%] </div>
<div class="green_up_arrow"></div>
<div class="red_down_arrow"></div>
</div>
CSS
#comment_ratings_bar {
width: 30%;
margin: 0px 20px;
padding: 0px 20px;
font-size: 110%;
font-weight: bolder;
font-family: 'B612 Mono', monospace;
color: lime;
background-color: black;
border: 0px solid black;
display: flex;
flex-direction: row;
justify-content: center;
}
.green_up_arrow {
display: flex;
flex-direction: row;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid lime;
cursor: pointer;
margin: 0em 0.25em;
}
.red_down_arrow {
display: flex;
flex-direction: row;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid red;
cursor: pointer;
margin: 0em 0.25em;
}
JavaScript
window.onload = function() {
let commentUpvotes = 0;
let commentDownvotes = 0;
let totalCommentVotes = commentUpvotes + commentDownvotes;
let commentRatingsBarAll = document.querySelectorAll("#comment_ratings_bar");
for (let c of commentRatingsBarAll) {
c.lastElementChild.previousElementSibling.addEventListener("click", updateCommentVotes);
c.lastElementChild.addEventListener("click", updateCommentVotes);
}
function updateCommentVotes(e) {
let siblings = getSiblings(e);
let sign = siblings[0].textContent;
let number = siblings[1].textContent;
let percentage = siblings[2].textContent;
if (sign && number && percentage) {
let actualNumber = parseFloat(number.replace(/,/g, ''));
if (e.target.className == "green_up_arrow") {
actualNumber++; commentUpvotes++; totalCommentVotes++;
} else {
actualNumber--; commentDownvotes++; totalCommentVotes++;
}
if (actualNumber < 0) { sign.replace("+", ""); }
percentage = "["
+ parseFloat((commentUpvotes / totalCommentVotes) * 100).toFixed(2) +"%]";
number = actualNumber.toLocaleString();
}
}
function getSiblings(element) {
if (element) {
let siblings = [];
let sibling = element.parentNode.firstElementChild;
while(sibling) {
if (sibling.nodeType === 1 && sibling !== element) {
siblings.push(sibling);
sibling = sibling.nextElementSibling;
}
}
return siblings;
}
}
}
Everything's working but inside the updateCommentVotes function, I should have been referencing the actual divs containing the textContent instead of the local variables (sign, number & percentage).
EDIT: It's a partial fix, I need each individual comment bar to refer to its own sign, number and percentage. It seems they all share the same number values. Any tips are appreciated. Although, I believe its because I hard coded the values from siblings. Thank you.
Check the code here: https://jsfiddle.net/donfontaine12/bm9njcLt/46/#
JavaScript
window.onload = function() {
let commentUpvotes = 0;
let commentDownvotes = 0;
let totalCommentVotes = commentUpvotes + commentDownvotes;
let commentRatingsBarAll = document.querySelectorAll("#comment_ratings_bar");
for (let c of commentRatingsBarAll) {
c.lastElementChild.previousElementSibling.addEventListener("click", updateCommentVotes);
c.lastElementChild.addEventListener("click", updateCommentVotes);
}
function updateCommentVotes(e) {
let siblings = getSiblings(e);
let sign = siblings[0].textContent;
let number = siblings[1].textContent;
let percentage = siblings[2].textContent;
if (sign && number && percentage) {
let actualNumber = parseFloat(number.replace(/,/g, ''));
if (e.target.className == "green_up_arrow") {
actualNumber++; commentUpvotes++; totalCommentVotes++;
} else {
actualNumber--; commentDownvotes++; totalCommentVotes++;
}
if (actualNumber < 0) { siblings[0].textContent.replace("+", ""); }
siblings[2].textContent = "["
+ parseFloat((commentUpvotes / totalCommentVotes) * 100).toFixed(2) +"%]";
siblings[1].textContent = actualNumber.toLocaleString();
}
}
function getSiblings(element) {
let siblings = [];
let sibling = element.target.parentNode.firstElementChild;
while(sibling) {
if (sibling.nodeType === 1 && sibling !== element) {
siblings.push(sibling);
sibling = sibling.nextElementSibling;
}
}
return siblings;
}
}
I'm trying to add font size increment+decrement functionality to my website and yeah, I did it.
Now the fact is when user click on increase button, the font size increasing continuously and the same thing happens to decrease button.
But I don't want this. I want when someone click on increase button, the font size will increase only once... and same for the decrease button.
JSFiddle link here
And heere is the code I'm working with.
This is the markup
<div id="settings">
<button class="resetFont clean-gray">Reset Font Size</button>
<button class="increaseFont clean-gray">Increase Font Size</button>
<button class="decreaseFont clean-gray">Decrease Font Size</button>
</div>
<br>
<br>
<div>
<h2>
This is a test heading
</h2>
<p>
This is a test paragraph
</p>
</div>
And this is the script
var defaultFontSize = $('html').css('font-size');
$(".resetFont").click(function () {
$('html').css('font-size', defaultFontSize);
});
$(".increaseFont").click(function () {
var fontSize = getFontSize();
var newFontSize = fontSize + 1;
setFontSize(newFontSize);
return false;
});
$(".decreaseFont").click(function () {
var fontSize = getFontSize();
var newFontSize = fontSize - 1;
setFontSize(newFontSize);
return false;
});
function getFontSize() {
var currentSize = $("html").css("font-size");
var currentSizeNumber = parseFloat(currentSize, 12);
if (currentSizeNumber > 24) {
currentSizeNumber = 24;
}
if (currentSizeNumber < 10) {
currentSizeNumber = 10;
}
return currentSizeNumber;
}
function setFontSize(size) {
$("html").css("font-size", size);
$(".actualSize").html(size);
}
You can update the increase/decrease button code like below
$(".increaseFont").click(function () {
var newFontSize = parseFloat(defaultFontSize) + 1;
setFontSize(newFontSize);
return false;
});
$(".decreaseFont").click(function () {
var newFontSize = parseFloat(defaultFontSize) - 1;
setFontSize(newFontSize);
return false;
});
js fiddle link
Hope it will help you.
Cache the minimum and maximum size you want to the text to go:
const minSize = parseFloat(defaultFontSize, 12) - 1;
const maxSize = parseFloat(defaultFontSize, 12) + 1;
And then check to see if the new decreased/increased size stays within those bounds:
// in the increasefont click handler
if (newFontSize <= maxSize) setFontSize(newFontSize);
// in the decreasefont click handler
if (newFontSize >= minSize) setFontSize(newFontSize);
Demo
You can disable the buttons when max or min font size is reached. Just ensure to reset them when the font size is reset.
const defaultFontSize = 12;
let actualFontSize = defaultFontSize;
setFontSize(defaultFontSize);
$(".resetFont").click(function() {
setFontSize(defaultFontSize);
$(".decreaseFont").removeAttr('disabled');
$(".increaseFont").removeAttr('disabled');
});
$(".increaseFont").click(function() {
actualFontSize += 1;
setFontSize(actualFontSize);
if (actualFontSize > defaultFontSize) {
$(this).attr('disabled','disabled');
$(".decreaseFont").removeAttr('disabled');
}
return false;
});
$(".decreaseFont").click(function() {
actualFontSize -= 1;
setFontSize(actualFontSize);
if (actualFontSize < defaultFontSize) {
$(this).attr('disabled','disabled');
$(".increaseFont").removeAttr('disabled');
}
return false;
});
function setFontSize(size) {
$("html").css("font-size", size + "px");
$(".actualSize").html(size);
}
body {
width: 80%;
margin: 0 auto;
}
#settings {
padding-right: 1.250em;
padding-top: 0.750em;
}
button.clean-gray {
background-color: #eeeeee;
border: #ccc solid 1px;
border-bottom: 1px solid #bbb;
border-radius: 3px;
color: #333;
font-family: 'Segoe UI', arial, helvetica, sans-serif;
font-weight: bold;
font-size: 0.875em;
text-align: center;
text-shadow: 0 1px 0 #eee;
}
button.clean-gray:hover {
background-color: #dddddd;
border: #bbb solid 1px;
border-bottom: 1px solid #999;
cursor: pointer;
text-shadow: 0 1px 0 #ddd;
}
button.clean-gray:active {
border: #aaa solid 1px;
border-bottom: 1px solid #888;
box-shadow: 0 0 5px 2px #aaaaaa inset, 0 1px 0 0 #eeeeee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="settings">
<button class="resetFont clean-gray">Reset Font Size</button>
<button class="increaseFont clean-gray">Increase Font Size</button>
<button class="decreaseFont clean-gray">Decrease Font Size</button>
</div>
<br>
<br>
<div>
<h2>
This is a test heading
</h2>
<p>
This is a test paragraph
</p>
</div>
I want to have multiple buttons use the same function. Here What I'm trying to do.
<button><a herf="#" onClick="myFunction('clk1',c1);">button</a></button>
<p id="clk1"></p>
With the buttons I want to change the variable and change the paragraph
<script>
var c1 = 0;
function myFunction(paragraph,varibl) {
varibl += 1;
document.getElementById(paragraph).innerHTML = varibl;
}
</script>
I've looked around and can't find any thing. this doesn't work and I don't know how to make it work.
the full code:
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<title>clicker clicker</title>
<style>
html {
text-align: center;
background-color: #d1d1d1;
font-family:Verdana;
}
.onebutton {
background-color: #f4f4f4;
border: 2px solid #5b5b5b;
color: #5b5b5b;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 32px;
cursor: pointer;
border-radius: 8px;
box-shadow:inset 0px 12px 22px 2px #ffffff;
}
.onebutton:active {
background-color: #e5e5e5;
}
.twobutton {
background-color: #f4f4f4;
border: 2px solid #5b5b5b;
color: #5b5b5b;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
box-shadow:inset 0px 12px 22px 2px #ffffff;
}
.twobutton:active {
background-color: #e5e5e5;
}
</style>
</head>
<body>
<h1>Clicker Clicker</h1>
<p id="number"></p>
<button class="onebutton"><a herf="#" onClick="clc();">click</a>
</button>
<br>
<p>clicker:100</p>
<button class="twobutton"><a herf="#"
onClick="upgrade('clk1',c1);">buy</a></button>
<p id="clk1"></p>
<p>clicker:1000</p>
<button class="twobutton"><a herf="#" onClick="upgrade('clk2',c2);">buy</a></button>
<p id="clk2"></p>
<script>
var number = 0;
var c1 = 0;
var c2 = 0;
document.getElementById("number").innerHTML = number;
function clc() {
number += 1;
document.getElementById("number").innerHTML = number;
}
function update() {
number += c1;
document.getElementById("number").innerHTML = number;
c1 += c2;
document.getElementById("clk1").innerHTML = c1;
}
function upgrade(what,clicker) {
window[clicker] += 1;
document.getElementById(what).innerHTML = clicker;
}
setInterval(update, 100);
</script>
</body>
</html>
this is here so it doesnt say i have to much code sdljnvaksjdnfblkajsdbfjmas dbfmha bsdmnfb admsf bds msadf
User can use object for easy modification of values inside function
<button><a herf="#" onClick="myFunction('clk1','c1');">button</a></button>
<p id="clk1"></p>
..
<button><a herf="#" onClick="myFunction('clk1','c2');">button</a></button>
<p id="clk1"></p>
..
<button><a herf="#" onClick="myFunction('clk1','c3');">button</a></button>
<p id="clk1"></p>
and the script
<script>
var c = {c1: 0, c2: 0, c3: 0}
function myFunction(paragraph,varibl) {
c[varibl] = c[varibl] + 1
document.getElementById(paragraph).innerHTML = c[varibl];
}
</script>
If you have to pass the variable using the signature and can't simply (as per the other answers) directly reference the correct one in the function, here's what you do.
JS always passes a variable by value, not reference. However, if you send an object, the "value" is actually a reference to the original object. So you can do something like this:
var counters = { a: 0 };
function test(key) {
counters[key]++;
console.log(counters);
}
<button onclick="test('a')">Click</button>
do this:
<button><a herf="#" onClick="myFunction('clk1');">button</a></button>
<p id="clk1"></p>
and then:
<script>
var c1 = 0;
function myFunction(paragraph) {
c1++;
document.getElementById(paragraph).innerHTML = c1;
}
</script>
each time you call this method, the variable goes up by one!
jsfiddle
<body>
<button><a herf="#" onClick="myFunction('clk1','c1');">Para 1</a></button>
<p id="clk1"></p>
<button><a herf="#" onClick="myFunction('clk2','c2');">Para 2</a></button>
<p id="clk2"></p>
<button><a herf="#" onClick="myFunction('clk3','c3');">Para 3</a></button>
<p id="clk3"></p>
<script>
var c = {c1:0, c2:0, c3:0};
function myFunction(paragraph,varibl) {
document.getElementById(paragraph).innerHTML = ++c[varibl];
}
</script>
</body>