Verá, cuando hago clic en el botón por primera vez, agrega 6, no cinco, y luego solo agrega 1 cada vez. No sé cómo solucionar esto porque no sé nada sobre javascript. Y cuando llega a 100 ¢, es posible que sea $ 1 y luego, si hace clic nuevamente, pasa a $ 1.01 y luego a $ 1.02 y así sucesivamente.
var number = 5 function plusOne(value) { number++; count.textContent = number.toString(); }
#coin { background-image: url("http://pngimg.com/uploads/coin/coin_PNG36868.png"); border: none; background-position: center; background-repeat: no-repeat; background-size: 200px 200px; background-color: white; width: 200px; height: 200px; } #coin:active { width: 190px; height: 190px; background-size: 190px 190px; }
<!DOCTYPE html> <html> <head> <title>Coin Clicker</title> </head> </html> <html> <body> <div> <span id="count">0</span><span>¢</span> </div> <div> <button id="coin" onclick="plusOne(value)" alt="coin"></button> </div> </body> </html>
Cambie el var number
a 1 si desea comenzar desde 1
Y agregue esto a la función para aumentar 5:
number = number + 5 ;
Y agregue esto a la función para aumentar 0.01:
numberChange = numberChange + 0.01 ;
para aumentar en 0,01 en lugar de number++
, ya que aumentará 1 en cada clic.
Puede preguntar por qué usó number += 0.01
mientras que la expresión anterior es diferente, bueno, es lo mismo que number= number + 0.01
. Funciona así :
var number = 1; number = 1 + 0.01 number = 1.01 then number = number + 0.01 number = 1.01 + 0.01 number = 1.02 then so on .....
toFixed(2)
es mostrar resultados hasta 2 decimales solo porque al agregar números decimales habrá una diferencia en cada iteración para eliminar eso.
Ver esto para .toFixed
var number = 90 var numberChange = 1 function plusOne(value) { number += 5; count.textContent = number.toString(); changeCurSign.innerHTML = "¢"; if (number > 99) { numberChange += 0.01; var reed = numberChange.toFixed(2) count.textContent = reed.toString(); changeCurSign.innerHTML = "$"; } }
#coin { background-image: url("http://pngimg.com/uploads/coin/coin_PNG36868.png"); border: none; background-position: center; background-repeat: no-repeat; background-size: 200px 200px; background-color: white; width: 200px; height: 200px; } #coin:active { width: 190px; height: 190px; background-size: 190px 190px; }
<!DOCTYPE html> <html> <head> <title>Coin Clicker</title> </head> </html> <html> <body> <div> <span id="count">0</span><span id="changeCurSign">¢</span> </div> <div> <button id="coin" onclick="plusOne(value)" alt="coin"></button> </div> </body> </html>
comience la variable en "0" porque cuando hace clic en el botón, el script ya agrega +5 a la variable. Es más fácil cambiar el valor de la variable usando number = number + 5;
Si desea una respuesta a su segunda pregunta, abra una segunda pregunta y muestre el intento de resolver la segunda pregunta.
var number = 0; function plusOne(value) { number = number + 5; count.textContent = number.toString(); }
#coin { background-image: url("http://pngimg.com/uploads/coin/coin_PNG36868.png"); border: none; background-position: center; background-repeat: no-repeat; background-size: 200px 200px; background-color: white; width: 200px; height: 200px; } #coin:active { width: 190px; height: 190px; background-size: 190px 190px; }
<!DOCTYPE html> <html> <head> <title>Coin Clicker</title> </head> </html> <html> <body> <div> <span id="count">0</span><span>¢</span> </div> <div> <button id="coin" onclick="plusOne(value)" alt="coin"></button> </div> </body> </html>
Cómo contar cinco cada vez en lugar de uno
number++
básicamente significa number + 1
. Simplemente cambie el valor inicial de number
a 0
y cambie number++
a number = number + 5
así:
function plusOne(value) { number += 5; // this is equivalent to "number = number + 5" count.innerHTML = number.toString(); }
Y cuando llega a 100 ¢, es posible que sea $ 1 y luego, si hace clic nuevamente, pasa a $ 1.01 y luego a $ 1.02 y así sucesivamente.
Simplemente agregue una segunda variable llamada digamos, dollar
y use una condición if/else para agregar el valor en dólares junto con la adición de 0.01
una vez que haya alcanzado los 100¢
de esta manera:
let number = 0; let dollar = 1; function plusOne() { if(number < 95) { number += 5; // this is equivalent to "number = number + 5" count.innerHTML = number.toString() + '</span><span>¢</span>'; } else { dollar += 0.01; count.innerHTML = dollar.toFixed(2).toString() + '</span><span>$</span>'; } }
Compruebe y ejecute el siguiente fragmento de código para ver un ejemplo práctico del código anterior:
let number = 0; let dollar = 1; function plusOne() { if(number < 95) { number += 5; // this is equivalent to "number = number + 5" count.innerHTML = number.toString() + '</span><span>¢</span>'; } else if(number < 100) { number += 5; // add 5 to number but start inserting the "dollar" value to html now count.innerHTML = dollar.toString() + '</span><span>$</span>'; } else { dollar += 0.01; count.innerHTML = dollar.toFixed(2).toString() + '</span><span>$</span>'; } } document.querySelector('#coin').addEventListener('click', plusOne);
#coin { background-image: url("http://pngimg.com/uploads/coin/coin_PNG36868.png"); border: none; background-position: center; background-repeat: no-repeat; background-size: 200px 200px; background-color: white; width: 200px; height: 200px; } #coin:active { width: 190px; height: 190px; background-size: 190px 190px; }
<div> <span id="count">0</span> </div> <div> <button id="coin" alt="coin"></button> </div>