html 我怎样才能在JS中创建一个类似于升级按钮的函数呢

eivgtgni 于 2023-02-10 发布在其他

关注(0)|答案(3)|浏览(134)

所以我想做一个点击器游戏，我现在的一部分，我想添加一个功能的'升级点击'按钮，以便当我点击它，它带走了'x'金额的钱，但它使我的点击产生'x'更多的钱
下面是我的代码：

"use strict";

let varible = 0
const button = document.getElementById('dollarButton');
button.addEventListener('click', myFunc);

function myFunc() {
  varible++;
    document.getElementById('score').innerHTML = "$" + varible
}

img
{
width:200px;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="dollarButton" style="

  border: none;
  top: 45%;
  left: 20%;
  position: absolute;
  cursor: pointer;

  "><img src="https://www.pngfind.com/pngs/m/94-940164_button-images-png-button-background-image-green-transparent.png" /></button>
  <h1 id="score">Time to Make Money!</h1>
  <div id="updaCash" class="button red">
    <span id="updaCash_text" class="color-white">Upgrade click</span>
  </div>
  <script src="script.js"></script>
</body>
</html>

Html

来源：https://stackoverflow.com/questions/75368925/how-could-i-make-a-function-in-js-that-works-like-a-upgrade-button

3条答案

按热度按时间

n6lpvg4x1#

你可能想在updaCash中添加一个事件监听器，每当点击它时就会触发，我还建议添加一个变量来跟踪每次点击增加了多少钱，例如：

- 脚本. js**

"use strict";

function myFunc() {
  varible += amountToAdd;
  document.getElementById('score').innerHTML = "$" + varible
}
    
function upgradeClick() {
    amountToAdd += 1; // 1 could be any other number you'd like 
}

let varible = 0;
const amountToAdd = 1;

const button = document.getElementById('dollarButton');
const upgradeButton = document.getElementById("updaCash");

button.addEventListener('click', myFunc);
upgradeButton.addEventListener("click", upgradeClick);

希望这对你有帮助!祝你在点击游戏中好运：d

赞(0）回复(0）举报 2023-02-10

yx2lnoni2#

您需要更改js代码。
因此，最终的Js code如下所示：

"use strict";

function myFunc() {
  varible += amountToAdd;
  document.getElementById('score').innerHTML = "$" + varible
}
    
function upgradeClick() {
    amountToAdd += 1;
}

let varible = 0;
const amountToAdd = 1;

const button = document.getElementById('dollarButton');
const upgradeButton = document.getElementById("updaCash");

button.addEventListener('click', myFunc);
upgradeButton.addEventListener("click", upgradeClick);

类似地，您的HTML code看起来如下所示：

<button id="dollarButton">
     <img src="https://fastly.picsum.photos/id/2/200/300.jpg?hmac=HiDjvfge5yCzj935PIMj1qOf4KtvrfqWX3j4z1huDaU" /></button>
  <h1 id="score">Time to Make Money!</h1>
  <div id="updaCash" class="button red">
    <span id="updaCash_text" class="color-white">Upgrade click</span>
  </div>
</button>

以及您的CSS code：

#dollarButton{
  border: none;
  top: 45%;
  left: 45%;
  position: absolute;
  cursor: pointer;
}

赞(0）回复(0）举报 2023-02-10

pu82cl6c3#

这里你必须使用另一个变量来跟踪金额。所以当你点击按钮时，x金额被添加，下一次你点击x时，更多的金额被添加。

"use strict";

let varible = 0  
let amount =1
const button = document.getElementById('dollarButton');
button.addEventListener('click', myFunc);

function myFunc() {
  varible+=amount;
  amount+=1 // replace 1 with x (value you want)
    document.getElementById('score').innerHTML = "$" + varible
}

img
{
width:200px;

}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="dollarButton" style="

  border: none;
  top: 45%;
  left: 20%;
  position: absolute;
  cursor: pointer;
  
  "><img src="https://www.pngfind.com/pngs/m/94-940164_button-images-png-button-background-image-green-transparent.png"/></button>
  <h1 id="score">Time to Make Money!</h1>
  <div id="updaCash" class="button red">
    <span id="updaCash_text" class="color-white">Upgrade click</span>
  </div>
  <script src="script.js"></script>
</body>
</html>

赞(0）回复(0）举报 2023-02-10

我来回答

html 我怎样才能在JS中创建一个类似于升级按钮的函数呢

3条答案

相关问题

热门标签

最新问答