How to change Object value on click?

Question

Im populating/inserting jsonObjects[i].type in a menu with a div called #changetotypes. Im getting values r, c and e from jsonObjects[i].type in a menu, know I wanna be able to click on does value r, c and e and change the values to the clicked value. Know I can click on a object and It is displaying the value r, c or e. So If I click on a object It gets/display the value jsonObjects[i].type r, c or e in a menu that the object have. Know how can I change my clicked objects value example from r to c?

<li>
    <a href="#">Typs</a>
        <ul>
            <li>
                <a href="#"><span id="currenttype" title=""></span></a>
                <ul id="changetotypes"></ul>
            </li>
        </ul>
</li>

function populateTypes() {

    for(i = 0; i < jsonObjects.length; i++) {

        if(availableTypes.indexOf(jsonObjects[i].type) < 0) {

            availableTypes.push(jsonObjects[i].type);
            $("#changetotypes").append('<li><a href="#">' + jsonObjects[i].type + '</a></li>');
        }
    }
}

Are you trying to achieve something like this? [jsFiddle](http://jsfiddle.net/GKDev/73UyJ/2/) — Givi, Jan 26 '14 at 15:16
@Givi Hi! Something like your code Yes... I can not get your code to work, Its says ele (ele.insertAdjacentHTML("afterbegin", str);) is null. But in your working code sample its something like that Yes. — Mr Toni WP, Jan 26 '14 at 16:12

score 0 · Answer 1 · answered Jan 29 '14 at 00:38

0

You need to add a click event listener for each #changetotypes children's, then change the inner html of that child.

You may have to give an id to each children to know how to get a reference for each one.

Hope it helps.

answered Jan 29 '14 at 00:38

PaulNunezM

3,217
3
14
10

Hi! Thanks, Im gonna try your suggest. – Mr Toni WP Jan 29 '14 at 10:44

score 0 · Accepted Answer · edited May 23 '17 at 12:28

You can try something like the following (jsFiddle). Assuming jsonObjects comes from somewhere else.

function populateTypes() {
    var availableTypes = [];
    for(var i = 0; i < jsonObjects.length; i++) {
        if(availableTypes.indexOf(jsonObjects[i].type) < 0) {
            availableTypes.push(jsonObjects[i].type);
            $('<li><a href="#">' + jsonObjects[i].type + '</a></li>')
            .data('type', jsonObjects[i].type)
            .on('click', function(){ $('#currenttype').text($(this).data('type')); })
            .appendTo('#changetotypes');
        }
    }
}

Here when we create the <li/> element for a specific type, we add a click handler at the same time that changes the text of the currenttype element.

We store the type we want to change currenttype to in the data of our <li/> element so we don't have to worry about closures in the loop, but there are other ways to solve that problem as well, like creating a function that returns a function (see link) or using the contents of the <a/> element (as in $('a', $(this)).text()).

Great. Is it something that should be changed in the answer here for future viewers, or does it only have to do with the rest of your code which was left out for the purpose of this question? — Avalanche, Jan 30 '14 at 17:45
The answer has to do with the rest of my code... Thanks again — Mr Toni WP, Feb 01 '14 at 14:46

How to change Object value on click?

2 Answers2