CODEWITHSUNDEEP
javascript
Nik
Nik

Reputation: 193

Javascript Button Value not updating

I have this code with three buttons +, 0 and -.

On clicking + or -, the value of middle button is not updating.

The code is :

function add(){
  var x = document.getElementById("val");
  if(x <= 5){
     document.getElementById("val").innerHTML = x + 1;
  }
}
function sub(){
  var x = document.getElementById("val");
  if(x > 0){
     document.getElementById("val").innerHTML = x - 1;
  }
}  
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: white;
  background-color: grey;
  border: none;
  border-radius: 15px;
  box-shadow: 0 7px #999;
}


.text {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: white;
  background-color: #130613;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #999;
}


.button:hover {background-color: white
color: white;
}

.button:active {
  background-color: #262626;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
<h2>Animated Buttons - "Pressed Effect"</h2>

<button class="button" onclick="add();">+</button>
<button class="text"><p id="val">0</p></button>
<button class="button" onclick="sub();">-</button>

Please help me in pointing out my mistake, and please do suggest some good button colors for such body background :).

Thanks :)

Upvotes: 1

Views: 905

Answers (2)

Jeremy Thille
Jeremy Thille

Reputation: 26410

To answer your question and fix your existing code, here's what you need to do : (working snippet)

var btn = document.getElementById("val")


function add(){
  var x = parseInt(btn.textContent);
  if(x <= 5){
     btn.innerHTML = x + 1;
  }
}
function sub(){
  var x = parseInt(btn.textContent);
  if(x > 0){
     btn.innerHTML = x - 1;
  }
}
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: white;
  background-color: grey;
  border: none;
  border-radius: 15px;
  box-shadow: 0 7px #999;
}


.text {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: white;
  background-color: #130613;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #999;
}


.button:hover {background-color: white
color: white;
}

.button:active {
  background-color: #262626;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
<h2>Animated Buttons - "Pressed Effect"</h2>

<button class="button" onclick="add();">+</button>
<button class="text"><p id="val">0</p></button>
<button class="button" onclick="sub();">-</button>

However, this is a clumsy way of proceeding. A DOM element is not the place where you want to store a variable's value. Here's a cleaner way of doing things :

var btn = document.getElementById("val")
var x = 0

function add(){
  if(x <= 5){
    x++;
    updateButton();
  }
}
function sub(){
  if(x > 0){
     x--;
     updateButton();
  }
}

function updateButton(){
   btn.innerHTML = x;
}
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: white;
  background-color: grey;
  border: none;
  border-radius: 15px;
  box-shadow: 0 7px #999;
}


.text {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: white;
  background-color: #130613;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #999;
}


.button:hover {background-color: white
color: white;
}

.button:active {
  background-color: #262626;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
<h2>Animated Buttons - "Pressed Effect"</h2>

<button class="button" onclick="add();">+</button>
<button class="text"><p id="val">0</p></button>
<button class="button" onclick="sub();">-</button>

Upvotes: 1

Escoute
Escoute

Reputation: 396

function add(){
  var x = document.getElementById("val").innerHTML;
  if(x <= 5){
     document.getElementById("val").innerHTML = parseInt(x,10) + 1;
  }
}
function sub(){
  var x = document.getElementById("val").innerHTML;
  if(x > 0){
     document.getElementById("val").innerHTML = parseInt(x,10) - 1;
  }
}
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: white;
  background-color: grey;
  border: none;
  border-radius: 15px;
  box-shadow: 0 7px #999;
}


.text {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: white;
  background-color: #130613;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #999;
}


.button:hover {background-color: white
color: white;
}

.button:active {
  background-color: #262626;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
<body bgcolor="#191F2F">

<h2>Animated Buttons - "Pressed Effect"</h2>

<button class="button" onclick="add();">+</button>
<button class="text"><p id="val">0</p></button>
<button class="button" onclick="sub();">-</button>
<script>

</script>
</body>

You are getting that whole element in x, so to get that innerHTML to work, and it returns a string value so you need to parse it using parseInt

Upvotes: 4

Related Questions