CODEWITHSUNDEEP
javascriptconsolecounting
Camashima
Camashima

Reputation: 37

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

So, I'm writing a code for a website, making a game, pretty much. I've been experimenting with code, trying to make a button add an integer (1) to the value "anger" of the site. I also want the value of anger to be sent to the console every time it's updated. So far, I haven't been able to get anything in the console. It's just an idea I'm trying to see to the end. Here's the code:

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>

Upvotes: 1

Views: 426

Answers (4)

abdeljalil khalal
abdeljalil khalal

Reputation: 13

Also there is an error in js which is fixed below.

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>

Upvotes: 0

Gulshan Aggarwal
Gulshan Aggarwal

Reputation: 999

You have made some mistakes-

  1. id anger is not defined in your Dom.
  2. mistake inside js file

try out the code below I have fixed the issue

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>

Upvotes: 0

TheFishTheySay
TheFishTheySay

Reputation: 279

A quick fix in your code.

I have added a new div which will show the current level of anger

<!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>

Upvotes: 1

flyingturtles
flyingturtles

Reputation: 903

There is no element with id 'anger' in your code. Also there is an error in js which is fixed below.

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>

Upvotes: 2

Related Questions