javascript - 创建一个增加 100 onclick 的按钮

Question

我今天开始使用 JavaScript 进行编码，目前正在制作一个按钮，将 100 添加到 shark 中的 shark[0] > 数组。我正在使用数组来存储我拥有的数据。

我遇到的问题是首先保存更改的数组，然后用正确的数量更改数组。试图用谷歌搜索但找不到答案。感谢您的帮助。

shark = [1200, 993, 0, 0]
shark[3] = shark[0] * (shark[1] - shark[2])
shark[0] = sharkAdd(shark[0], 1++, 100)

function sharkAdd(value, x, hundra) {
  var value = parseInt(document.getElementById('sharkAmount').innerHTML = shark[0], 10);
  value + x++ * 100;
}

shark.toString();
document.getElementById("sharkAmount").innerHTML = shark[0];
document.getElementById("sharkPrice").innerHTML = shark[1];
document.getElementById("sharkCost").innerHTML = shark[2];
document.getElementById("sharkProfit").innerHTML = shark[3];

<小时/>

HTML(这不是完整的 HTML):

<button onclick="sharkAdd()" class="button button1" >Add 100 Sharks</button>    
<td id="sharkAmount">1100</td>

Answer 1

在执行此操作时，您似乎有点困惑，有一些无法编译的代码、冗余的东西以及奇怪的变量分配，实在太多，无法在这里剖析和解释。

然而，这实际上是一项非常简单的工作。我已经详细注释了代码，以帮助您理解每一行的作用。

为了简单起见，我省略了原始代码中与问题不直接相关的部分。

//this section outside the function will run immediately when your page is loaded into the browser.
//initialise the data array (as a global variable)
var shark = [1200];
//get a reference to the "sharkAmount" HTML element (as a global variable)
var sharkAmountDisplay = document.getElementById('sharkAmount');

//initialise the display with the current value from the array
sharkAmountDisplay.innerHTML = shark[0];

//code inside this function will run only when it's called (e.g. from your "onclick" event in the HTML)
function sharkAdd(value) {
  //"value" will be the "100" passed in by "sharkAdd(100)" in the HTML
  //now, add the value to the existing value and store it in the array
  shark[0] = shark[0] + value;
  //update the display with the new value from the array
  sharkAmountDisplay.innerHTML = shark[0];
}

<button onclick="sharkAdd(100)" class="button button1">Add 100 Sharks</button>
<br/><br/>
No. of sharks: <div id="sharkAmount"></div>