Larry Monnroe Larry Monnroe - 3 months ago 7
HTML Question

How do I even javascript?

I want to make a website that tracks the amount of cigarettes you smoke in a day.
The overall goal is to help smokers cut back by reaching set goals for themselves.
The first important function is the number of cigarettes that are intended to be smoked that day. The second is a clicker that keeps track of the amount of cigarettes smoked that day.

Here's what I have:

<html>
<head>
<title>SMOKERS TOOL</title>
</head>
<body>

<h3>Daily goal</h3>

<input type="number" id="myNumber" value="1">

<p>This is how many smokes you're having today</p>

<button onclick="myFunction()">SUBMIT</button>

<p id="demo"></p>

<script>

function myFunction() {
var x = document.getElementById("myNumber").value;
document.getElementById("demo").innerHTML = x;

}
</script>

<script type="text/javascript">
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
</script>
<button type="button" style="height:200px;width:200px" onClick="onClick()">HIT ME EVERY TIME YOU SMOKE</button>
<p>THIS IS HOW MUCH YOU'VE SMOKED TODAY: <a id="clicks">0</a></p>

</body>


</html>


I'm really new to this sort of thing and I have a lot of questions that
I'm not quite sure how to ask yet but I was wondering how to
make some text appear like "You went over the goal!" when the Number of cigarettes smoked goes over the daily goal. Let me know if you guys have any recommendations as well. The SUBMIT text shows up as a button when
I save it as an html file. I'm doing everything with notepad.

Answer
  <html>
  <head>
      <title>SMOKERS TOOL</title>
  </head>
  <body>

  <h3>Daily goal</h3>

  <input type="number" id="myNumber" value="1">

  <p>This is how many smokes you're having today</p>

  <button onclick="myFunction()">SUBMIT</button>

  <p id="demo"></p>

  <script>

      function myFunction() {
          var x = document.getElementById("myNumber").value;
          document.getElementById("demo").innerHTML = x;

  }
  </script>

      <script type="text/javascript">
      var clicks = 0;
      var surpassedDailyGoal = false;

      function onClick() {
        var dailyGoal = document.getElementById("myNumber").value;


          clicks += 1;
          document.getElementById("clicks").innerHTML = clicks;

        if( clicks > dailyGoal && !surpassedDailyGoal ){
          surpassedDailyGoal = true;
          document.body.insertAdjacentHTML('beforeend', '<p>Stop smoking you chimney you...</p>');
        }
      };
      </script>
      <button type="button" style="height:200px;width:200px" onClick="onClick()">HIT ME EVERY TIME YOU SMOKE</button>
      <p>THIS IS HOW MUCH YOU'VE SMOKED TODAY: <a id="clicks">0</a></p>

  </body>
Comments