HTML and JavaScript App

Question

I want to make an app with HTML and Javascript. I am not master at these. So I need a bit of help. The image of the app

enter image description here

Now what I want is when I will click on any place inside orange area the number in middle will increase by 1. How can I do that using javascript. My code is given below:

<html>

<head>
  <title>Tabjih</title>
  <style>
    html,
    body,
    .container {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .container {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: orange;
    }
    p {
      font-size: 200px;
    }
  </style>
</head>

<body>
  <div class="container">
    <p id="text">0</p>
  </div>
</body>

</html>

Please suggest me javascript code needed to add to this to achieve wht i want.

Try this link it will help you.. http://stackoverflow.com/questions/3076679/javascript-event-registering-without-using-jquery — MPG, Jul 20 '15 at 08:47

Tushar · Accepted Answer · 2015-07-20T08:45:52.420

Bind click event listener on the container element using addEventListener
Get the current value from the text element
Cast the value to integer using parseInt()
Increment the value by one
Update the value in text element

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById('container').addEventListener('click', function() {

    // Get the current value from the element
    var value = parseInt(this.innerText, 10) || 0;

    // increment the value by one, and update it in DOM
    document.getElementById('text').innerText = ++value;

    return false;
  });
});

html,
body,
.container {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: orange;
}
p {
  font-size: 200px;
}

<html>

<head>
  <title>Tabjih</title>
</head>

<body>
  <div id="container" class="container">
    <p id="text">0</p>
  </div>
</body>

</html>

This is really the best answer I found with steps cleared. Thanks @Tushar. But can you help me one more time? Actually I am not much literate in HTML and so so. When I click the orange area it increases but sometimes the text is being selected. How can I stop this thing? — Md Abeer Hussain, Jul 20 '15 at 12:08
@AbeerHussain You cannot, this is default behavior of browsers. You can at least use `return false` in the event handler. — Tushar, Jul 20 '15 at 12:10

score 0 · Answer 2 · answered Jul 20 '15 at 08:52

0

document.getElementsByClassName("container")[0].addEventListener("click",function(){

document.getElementById('text').innerHTML = parseInt(document.getElementById('text').innerHTML)+1;
});

http://jsfiddle.net/s6qc2w3g/12/

answered Jul 20 '15 at 08:52

AshBringer

2,614
2
20
42

HTML and JavaScript App

2 Answers2