I'm trying to create a code that can increase and decrease via clcik of a button
html code but the problem is i cant get it to function I've tried different options.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<div id="body">
<h1>COUNTER</h1>
<span id="time">0</span><br>
<button id="lower" onclick="reduceone()" type="button">LOWER COUNT</button><BR>
<button id="add" onclick="addone()" type="button">ADD COUNT</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
javascript code:
$("#add").click(function (){
let count = 0;
count ++;
$("#time").text(count);
});
$(#lower).click(function(){
let count = 0;
count --;
$("#time").text(count)
});
Try this
let count = 0;
$("#add").click(function (){
count ++;
$("#time").text(count);
});
$(#lower).click(function(){
count --;
$("#time").text(count)
});
You have to make variable (count ) a global variable so all functions can access his value . If you put variable(count) in a function then only that function can access his value . Hope you understand
You need to share the state between two functions so each of them could see the shared state that they are changing.
Also, all id or class names should be between inverted commas like that "#lower"
let count = 0; // Shared state that both functions can see
$("#add").click(function (){
count++;
$("#time").text(count);
});
$("#lower").click(function(){ // "#lower" not #lower
count--;
$("#time").text(count)
});
Related
`Hello there, I'm trying to write a counter code in which I have two buttons (Increase and Decrease), I created the functions, and it works but the buttons disappear.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buttons practice</title>
<script src="/JavaScript/buttons_practice.js" defer></script>
</head>
<body>
<button id="todo-button" onclick="DoneChange()">Changing Text</button>
<div id="counter">0
<button id="up">Up</button>
<button id="down">Down</button>
</div>
<div id="counter">0</div>
</body>
</html>
const Counter = document.getElementById('counter');
const Up = document.getElementById('up');
const Down = document.getElementById('down');
let count = 0;
Up.addEventListener('click', function Increase(){
count = count + 1;
UpdateCounter();
});
Down.addEventListener('click', function Decrease() {
count = count -1;
UpdateCounter();
});
function UpdateCounter() {
Counter.innerText= count;
}
I was reading some similar questions, but I couldn't figure it out. Some answers aimed to the InnerText to be the Issue, however I can see this code works, I'm basically using the event listener so I can have Html exclusive to Html, it's modular and better at reading the code I think.
<div id="counter">0</div>
<button onclick="countUp()">Up</button>
<button onclick="countDown()">Down</button>
<script>
let count = 0;
function countUp() {
count = count + 1;
updateCount();
}
function countDown() {
count = count - 1;
updateCount();
}
function updateCount() {
let counter = document.getElementById('counter');
counter.innerText = count;
}
</script>
The buttons are inside the counter. Consequently, when you rewrite the contents of the counter (with innerText) you replace the buttons.
Don’t put the buttons inside the counter.
You have two elements with id counter in this block:
<div id="counter">0
<button id="up">Up</button>
<button id="down">Down</button>
</div>
<div id="counter">0</div>
When you do
Counter.innerText= count;
you override everything that you have within the first counter div that contains buttons, and as a result, they disappear.
in this excercise i create a counter that has a number display and 2 button to lower and increase number. i assign number to parseInt(num) to convert num object to number. i use alert to check type of number. typeof(number) return number but number return NaN. please someone explain.[edit]reading comment, i was able to solve the problem. i have upadated the solution
var low = document.getElementById("low")
var add = document.getElementById("add")
low.addEventListener("click", function () {
var num = document.getElementById("num")
var number = parseInt(num.innerText)
num.innerHTML = number - 1
})
add.addEventListener("click", function () {
var num = document.getElementById("num")
var number = parseInt(num.innerText)
num.innerHTML = number + 1
})
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="style.css"> -->
</head>
<body>
<div class="container">
<h1>counter</h1>
<h1 id="num">0</h1>
<div class="btn">
<button id="low">lower count</button>
<button id="add">add count</button>
</div>
</div>
<script src="js.js"></script>
</body>
</html>
You are trying to parseInt(num) but num is DOM element - not number. You want its content. You can get it with .innerText.
const num = document.getElementById("num")
console.log(num);
console.log(parseInt(num));
console.log(parseInt(num.innerText));
<h1 id="num">0</h1>
When i use the function to check if number is positive or negative it works fine but when i try to do it again nothing happens i have to refresh the whole page to make it work again. Any help is welcome!
const userNum = document.querySelector(".user-input").value;
const checkBtn = document.querySelector(".check-input");
const result = document.querySelector(".result");
function checkNum() {
if (userNum > 0) {
result.innerHTML = "Positive!!"
}
else if (userNum < 0) {
result.innerHTML = "Negativeee!!"
}
else if (userNum < 0) {
result.innerHTML = "Number is NULL"
}
else {
result.innerHTML = "Enter a Number!!"
}
return false;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>A Program to Check if number is <br></h1>
<h2>Positive, Negative or Null</h2>
</div>
<div class="check-number-type">
<input type="text" class="user-input">
<button onclick="checkNum()" class="check-input">Check</button>
</div>
<div class="show-result">
<p class="result"></p>
</div>
</div>
</body>
<script src="/script.js"></script>
</html>
The reason why you say you have to "reload" the page everytime is because your code that extracts the input value was placed outside of your checkNum function that determines if it's positive or negative.
You only retrieve the input once, when the script starts, instead of getting a fresh copy everytime you enter the checkNum function.
Just move this:
const userNum = document.querySelector(".user-input").value;
Inside the checkNum() function.
I want to create a new div element, with unique id from the latest array that i push every i click a create button , but it seem my code not working, here is my code below :
$(document).ready(function(){
var arr = [];
counter = 0;
$('#newDiv').on('click', function(){
$('.container').append('<div class="image">hallo</div');
counter ++;
arr.push(counter);
$('.image').attr('id',arr[arr.length-1]);
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="container"></div>
<button id="newDiv">create new div</button>
</body>
</html>
On each click you are setting id of each image element to last element in array, instead you can do something like this.
let arr = [], counter = 0;
$('#newDiv').on('click', function() {
arr.push(counter++)
const img = $('<div />', {
'class': 'image',
'id': arr.slice(-1)
}).text('hallo');
$('.container').append(img)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
<button id="newDiv">create new div</button>
Or you can first push counter to array and then take last element for array with slice and use it as id.
let arr = [], counter = 0;
$('#newDiv').on('click', function() {
arr.push(counter++)
const img = $(`<div class="image" id=${arr.slice(-1)}>hallo</div>`)
$('.container').append(img)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
<button id="newDiv">create new div</button>
First when you use classe query selector it would add the id to every element with that class so here is a work around you can use :
Add the add on the appending part
$(document).ready(function(){
var arr = [];
counter = 0;
$('#newDiv').on('click', function(){
counter ++;
arr.push(counter);
$('.container').append('<div id='+(arr.length-1)+' class="image">hallo '+(arr.length-1)+'</div');
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="container"></div>
<button id="newDiv">create new div</button>
</body>
</html>
Your original code is selecting all div with the image class and updating them all with the latest number.
I suggest creating the div adding the number to the new div only and then appending it to the container.
Please review the updated code below:
$(document).ready(function() {
var arr = [];
counter = 0;
$('#newDiv').on('click', function() {
counter++;
arr.push(counter);
// Create div
$('<div class="image"></div').text('hallo')
// Add ID attribute
.attr('id', arr[arr.length - 1])
// Apend new div to container
.appendTo('.container');
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="container"></div>
<button id="newDiv">create new div</button>
</body>
</html>
Can anyone help :
The scenario is when the user1 click the button it will increment
Example : user1 clicks 5 times and then the user2 when it clicks the next number will be 6. and then when the user1 click again it will be 7
i think it works with ajax and save to db, anyone can help me how to do it. Im a begginer in ajax and database
Here is the code i just know:
<html>
<body>
<button type="button" onClick="counter()">Next</button>
<p>Number: <a id="counter">0</a></p>
</body>
</html>
<script type="text/javascript">
var counter= 0;
function counter() {
counter += 1;
document.getElementById("counter").innerHTML = counter;
}
</script>
Please use session storage to store the incremental values.
like store the values using sessionStorage.setItem("userclicks",variablevalue);
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function load()
{
if(localStorage.getItem("counter")!=null)
{
counter = Number(localStorage.getItem("counter"));
document.getElementById("counterValue").innerHTML = counter;
}
}
var counter= 0;
function counterFn() {
counter = Number(localStorage.getItem("counter"));
console.log(counter);
counter += 1;
localStorage.setItem("counter",counter);
document.getElementById("counterValue").innerHTML = counter;
}
</script>
</head>
<body onload="load();">
<button type="button" onclick="counterFn()">Next</button>
<p>Number:<a id="counterValue">0</a></p>
</body>
</html>
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function load()
{
if(localStorage.getItem("counter")!=null)
{
counter = Number(localStorage.getItem("counter"));
document.getElementById("counterValue").innerHTML = counter;
}
}
var counter= 0;
function counterFn() {
counter = Number(localStorage.getItem("counter"));
console.log(counter);
counter += 1;
localStorage.setItem("counter",counter);
document.getElementById("counterValue").innerHTML = counter;
}
</script>
</head>
<body onload="load();">
<button type="button" onclick="counterFn()">Next</button>
<p>Number:<a id="counterValue">0</a></p>
</body>
</html>