CODEWITHSUNDEEP
javascriptphpajax
owwyess
owwyess

Reputation: 175

JS variable wont update onclick

I have this code with a list of some items, every item on the list has a button corresponding to that item. When the button is clicked on, a variable rotation shall be plussed by 1. This works! But only once? It has to be plussed by 1 every time the user clicks on it, and not just once. Meanwhile, it also saves the information in a database, hence I have used AJAX to achieve that.

My first code I want to show is in a PHP file and looks like this:

foreach($finalArray as $arr){
    echo '<li id="item-' . $arr['number'] . '" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' . $arr['name'] . ' 
    <img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg" onclick="rotateObject(this,\''. $arr['src']. '\', \''. $arr['rotation']. '\')">'; 
}

I parse the value rotation here, together with a src variable that we wont get further into. In the AJAX call which updates the database, I want it to plus the rotation with 1 too. I have this AJAX code so far:

function rotateObject(e, src, rotation)
{
// Some irrelevant code...
var img_algo = 1;
var img_rotation = parseInt(rotation, 10) + img_algo;


xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //Changing the current src from whatever it is, to the src that corresponds to the button clicked on.
            var getEle = document.getElementsByClassName('item' + img_id)[0];
            var imagePath = img_rotation + ".png";
            getEle.src = imagePath + xmlhttp.responseText;
        }
    }

As I said, the value get plussed by 1 the first time a user clicks on the button, but not the second time. Any suggestions on what it might be? Thanks in advance.

EDIT:

Actually I think it updates? It just doesn't know how to plus the variable more than once, when I debug the code, it just updates the rotation and set it to the same value everytime the button is clicked on, instead of plussing it with one? Hmm

Current status:

<img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg"  rel="'.$arr['rotation'].'" onclick="rotateObject(this,\''. $arr['src']. '\')">';

var img_algo = 1;
var rotation = document.getElementsByClassName('item' + img_id)[0].getAttribute('rel');
var img_rotation = parseInt(rotation, 10) + img_algo;

returns NaN

reason for this is probably that rel="'.$arr['rotation']. is "undefined". It says that when the button is clicked on.

Even more current status:

    <img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg"  rel="'.$arr['rotation'].'" onclick="rotateObject(this,\''. $arr['src']. '\')">';

var img_algo = 1;
var rotation = document.getElementById('item' + img_id).getAttribute('rel');
var img_rotation = rotation + img_algo;
    document.getElementById('item-' + img_id).setAttribute("rel", img_rotation);

I found out that var rotation = document.getElementsByClassName('item' + img_id)[0].getAttribute('rel'); returns null

Even more current status:

Upvotes: 0

Views: 248

Answers (2)

Devasish
Devasish

Reputation: 1957

//changes in your foreach loop

'<img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg"  rel="'.$arr['rotation'].'" onclick="rotateObject(this,\''. $arr['src']. '\')">'

// changes in side you function

var img_algo = 1;

//------------please try this (not necessay to pass the 3rd argument this.rel)--------------//
var rotation = document.getElementsByClassName("theImgTagClass")[0].getAttribute('rel');

var img_rotation = parseInt(rotation, 10) + img_algo;
document.getElementById('IdOfImgTag').setAttribute("rel", img_rotation);

Upvotes: 1

Devasish
Devasish

Reputation: 1957

I think OnClick="rotateObject()" in this function the third argument value in not updating each time. thats why every time you click its passing the same 'rotation' value, getting incremented every time but the result is same.

I suggest to use an extra attribute like rel="current_rotation_value". and inside your rotateObject(e, src, rotation) function get the current rotation value from this 'rel' attribute and update it each time incremented.

//changes in your foreach loop

'<img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg"  rel="'.$arr['rotation'].'" onclick="rotateObject(this,\''. $arr['src']. '\',this.rel)">'

// changes in side you function

var img_algo = 1;
var img_rotation = parseInt(rotation, 10) + img_algo;
document.getElementById('IdOfImgTag').setAttribute("rel", img_rotation);

Upvotes: 0

Related Questions