如何获取段落文本，然后将其转换为HTML中的整数

Question

I have a simple paragraph as: <p id="amt1">0</p> and have a button called to add to the amount as: <button id="addbtn1">+</button> I want it such that when i press the button the text in the paragraph is updated to 1 and after pressing it again is updated to two

Any help would be great! Thanks!

Answer 1

http://codepen.io/anon/pen/JGxvZg

    $('#plus').click(function(){
       var x = Number($('#result').html());
      $('#result').html(x+1);
    });

Answer 2

var txtNode = document.querySelector('#number');
var btn = document.querySelector('#btn');
var count = 0;

btn.addEventListener('click', function() {
  txtNode.innerHTML = 'Number: ' + count++;
}, false);

Basically you create a button/input element for the button, and ap tag (or whatever element you want to hold the number) and save both elements into variables using querySelector (or any other getter).

Then what I did was initialized a counter variable.

Next, I added what's called an EventListener to the button element. These are used to perform events, so when you click, whatever function is passed will execute on click. Here I just set the p tag's innerHTML to the counter variable with the ++ operator after (means +1). And every time you click it adds 1 to the counter variable.

hope this helps.

here's a JSBIN: http://jsbin.com/puxefaxuki/edit?js,console,output

Answer 3

Html:

<p id="counter">0</p>
<button id="add">Add</button>

Javascript (remove comments for the code to work out of the fiddle):

//onload = function() {
  counter = document.getElementById('counter')
  add = document.getElementById('add')
  add.onclick = function() {
    counter.innerHTML = counter.innerHTML-0 +1
  }
//}

Fiddle: https://jsfiddle.net/grabantot/o9v1cw7L/