Value from input box is not getting incremented or decremented?

Question

I have made 2 buttons one for increment and another for decrement but when I click on button + it does not increment value of the input box similarly it does not decrements the value from input box on clicking button -

main.js:

var currentvalue = document.getElementById("date").value;

console.log(currentvalue);


function increment () {
  var newvalue = parseInt(currentvalue) + 1;
  document.getElementById("date").value = newvalue;
}

function decrement () {
  var newvalue = parseInt(currentvalue) - 1;
  document.getElementById("date").value = newvalue;
}

index.html:

<body>

    <div id="center">
        <label for="name">Date</label>
        <p></p>
        <button type="button" class="btn btn-success" id="plus" onclick="increment()">+</button>
        <input type="text" id="date" value="1">
        <button type="button" class="btn btn-danger" id="minus" onclick="decrement()">-</button>

    </div>

<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

Screenshot:

Answer 1

Place this var currentvalue = document.getElementById("date").value; inside the function because outside function it will execute only once during load and then the value will be set in it

 function increment() { var currentvalue = document.getElementById("date").value; var newvalue = parseInt(currentvalue) + 1; document.getElementById("date").value = newvalue; } function decrement() { var currentvalue = document.getElementById("date").value; var newvalue = parseInt(currentvalue) - 1; document.getElementById("date").value = newvalue; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="center"> <label for="name">Date</label> <p></p> <button type="button" class="btn btn-success" id="plus" onclick="increment()">+</button> <input type="text" id="date" value="1"> <button type="button" class="btn btn-danger" id="minus" onclick="decrement()">-</button> </div>

Value from input box is not getting incremented or decremented?

Question

1 answers

solution1
2 ACCPTED 2018-02-24 07:12:38

Value from input box is not getting incremented or decremented?

Question

1 answers

solution1 2 ACCPTED 2018-02-24 07:12:38

solution1
2 ACCPTED 2018-02-24 07:12:38