您将如何使用 html 按钮添加到一个值？

Question

所以，我正在为网站编写代码，制作游戏，差不多。我一直在试验代码，试图让一个按钮向网站的“愤怒”值添加一个整数 (1)。我还希望每次更新时将愤怒的值发送到控制台。到目前为止，我还无法在控制台中获得任何信息。这只是我想看到最后的想法。这是代码：

var anger = 0;

var incrementAndSet = function () {
  anger = anger + 1;
  document.getElementById("btn").console.log ("Anger level:" + anger);
}

document.getElementById('btn').onclick = incrementAndSet;

incrementAndSet();
console.log(anger)

    <h1>Anger Minigame</h1>

    <p>
      This site is a game, meant for you to press the below button, 
      making the site angrier and angrier. 
    
      <button id="btn">Click Me</button>
    </p>

Answer 1

您的代码中没有 ID 为 'anger' 的元素。 js 中也存在错误，已在下面修复。

var anger = 0;

// Define a function,
// which you can reuse for the task (inc & set in the DOM)
var incrementAndSet = function() {
  anger = anger + 1;
  document.getElementById("anger").innerHTML = "Anger level:" + anger
  console.log("Anger level:" + anger);
}
// increment and set on click
document.getElementById('btn').onclick = incrementAndSet;

// initialize
incrementAndSet();

<div id='anger'>
0
</div>
<div id='btn'>Button</div>

Answer 2

快速修复您的代码。

我添加了一个新的div，它将显示当前的愤怒程度

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://glitch.com/favicon.ico" />

    <title>Hello world!</title>

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>
  <body>
    <!-- this is the start of content -->
    <h1>Anger Minigame</h1>
    <p>
      This site is a game, meant for you to press the below button, making the
      site angrier and angrier.

      <div id="count">0</div>
      <button id="btn">Click Me</button>
    </p>

    <script>
      var anger = 0;

      // Define a function,
      // which you can reuse for the task (inc & set in the DOM)
      var incrementAndSet = function () {
        anger = anger + 1;
        document.getElementById("count").textContent = anger
        console.log("Anger Level: " + anger)
      };

      // increment and set on click
      document.getElementById("btn").onclick = incrementAndSet;

      console.log(anger);
    </script>
  </body>
</html>

Answer 3

你犯了一些错误-

id anger 未在您的 Dom 中定义。
js文件内部错误

尝试下面的代码我已经解决了问题

window.addEventListener("load", () => {
  

  var anger = 0;

    // Define a function,
    // which you can reuse for the task (inc & set in the DOM)
    var incrementAndSet = function () {
      anger = anger + 1;
      document.getElementById("anger").innerHTML=anger;
      console.log(anger);
    }
    // increment and set on click
    document.getElementById('btn').onclick = incrementAndSet;

    // initialize
    incrementAndSet();

});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://glitch.com/favicon.ico" />

    <title>Hello world!</title>

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="style.css" />

    <!-- import the webpage's javascript file -->
    <script src="script.js" defer></script>
  </head>
  <body>
    <!-- this is the start of content -->
    <h1>
      Anger Minigame
    
    </h1>
    <p>
      This site is a game, meant for you to press the below button, 
      making the site angrier and angrier. </p>

      <p id="anger"></p>
    
<button id="btn">Click Me</button>
      
    </p>
  </body>
</html>

Answer 4

js 也有一个错误，已在下面修复。

var anger = 0;


      var incrementAndSet = function () {
        anger = anger + 1;
        document.getElementById("anger").innerHTML = "Anger level:" + anger;
      };

      document.getElementById("btn").onclick = incrementAndSet


      incrementAndSet();
      console.log(anger);

<div id="anger">  </div>
    <button id="btn">click</button>

您将如何使用 html 按钮添加到一个值？

How would you add to a value using an html button?

javascript

console

counting