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>