I have made this script, but there is a problem.
When i click addbutton the variable on console log recieve the update (1, 2 ,3 ,4) for every click.
But var fieldHTML remains 1 forever, why?
var a = 1;
$(addButton).click(function(){ //Once add button is clicked
a++;
console.log(a);
});
var fieldHTML = a;
Because var fieldHTML = a; copies the value of a to fieldHTML.
It doesn't create a reference.
Changing the value of a (after you've set the value of fieldHTML) won't change the value of fieldHTML.
You need to apply an id or class to the selector, wrap it into document ready, and also pass the new value of "a" to a function that can then manipulate the fieldHTML value. Check out the snippet note that I used alerts to demonstrate the increasing count rather thanconsole.log - simply because its in the snippet.
$(document).ready(function(){
var a = 1;
$('#addButton').click(function(){ //Once add button is clicked
a++;
alert("a = " + a);
update_fieldHTML(a);
});
})
function update_fieldHTML(value){
var fieldHTML = value;
alert("fieldHTML =" + fieldHTML);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addButton">Click Me</button>
var addButton = $("#btn");
var viewButton = $("#btn-2");
var setButton = $("#btn-3");
var a = 1;
var fieldHTML = a; // on load, addign a value to fieldHTML variable | fieldHTML = 1
$(addButton).click(function() { //Inc by 1
a++;
console.log('a : '+a);
});
$(viewButton).click(function() { //Show fieldHTML value in console
console.log('fieldHTML : '+fieldHTML);
});
$(setButton).click(function() { // reassign a value to the fieldHTML variable | on click event
fieldHTML = a;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btn'>Inc a</button>
<button id='btn-3'>Set fieldHTML</button>
<button id='btn-2'>View fieldHTML</button>
var fieldHTML = a; was executed on the window load event. After you increment a value you have to reassign its value to fieldHTML somehow.var addButton = $("#btn");
var viewButton = $("#btn-2");
var a = 1;
var fieldHTML = a;
$(addButton).click(function() {
fieldHTML = increment();
alert('a : ' + a);
});
$(viewButton).click(function() {
alert('fieldHTML : '+fieldHTML);
});
function increment(){
return ++a;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btn'>Inc a</button>
<button id='btn-2'>View fieldHTML</button>
ais pointing to a new value, butfieldHTMLis still pointing to old one.