Getting clicked id and using it in another function

Question

I've got a few boxes containing image, text and checkbox:

<label name="skill" id="testbox" class="box tooltip" onclick="toggleCheckbox('test');"  style="background-image:url('red.png')">
<span><img class="callout" src="callout.png"><script>document.write (test);</script></span>
<div class="margin">
    <img src="">
    test<input name="choice" value="1" id="test" type="checkbox" onchange="onCheckboxChanged(); checkTotal();" disabled>
</div>

I try to take the id (testbox) when I click anywhere in the label and use it in this function:

var onCheckboxChanged = function(checkbox){
var test = document.getElementById('test');
var testbox = document.getElementById('testbox');
var structure = document.getElementById('structure');
var structurebox = document.getElementById('structurebox');

if(structure.checked){
    test.disabled = false;
    structurebox.style.backgroundImage='url(green.png)';
}
else{
    test.disabled = true;
    structurebox.style.backgroundImage='url(grey.png)';
}

if(test.disabled){
    testbox.style.backgroundImage='url(red.png)';
}
else {
    if(test.checked){
        testbox.style.backgroundImage='url(green.png)';
    }
    else{
        testbox.style.backgroundImage='url(grey.png)';
    }
}
};

I can just copy/paste the code and change id's but I've got over 70 boxes and there will be more. I tried:

document.getElementsByName("skill")[0].getAttribute('id')

but it probably takes all id's from boxes with name "skill". I guess I should use something similar to this and it works but I don't know how to connect it to my code so I can use clicked id from this function in my function (as var would be the best).

Please post your code for `toggleCheckbox`. – PurkkaKoodari Sep 22 '13 at 10:12 — PurkkaKoodari, Sep 22 '13 at 10:12
Can you make a fiddle for what are you asking..? – Neha Choudhary Sep 22 '13 at 10:14 — Neha Choudhary, Sep 22 '13 at 10:14

score 1 · Accepted Answer · answered Sep 22 '13 at 10:27

1

Avoid inline javascript as muchj as you can, also instead of document.write you can use .innerHTML.
Try this to attach a onclick event listener to each label and get the clicked labels ID:

var all_labels = document.getElementsByName("skill");
for (var i = 0; i < all_labels.length; i++) {
    all_labels[i].onclick = function () {
        alert(this.getAttribute('id'));
    };
};

Demo here

answered Sep 22 '13 at 10:27

Sergio

28,539
11
85
132

It works but I can't get this id to work as global value - [LINK](http://jsfiddle.net/gLzPT/) or somehow use it as you can see on jsfiddle. – Hayaku Sep 22 '13 at 12:03
@Hayaku, you want to get the ID on click, then you can call a function from within the click handler. Check here: http://jsfiddle.net/raEap/1/ – Sergio Sep 22 '13 at 12:11
http://jsfiddle.net/gLzPT/1/ - here's my onCheckboxChanged function wrote in a way that works. I won't lie, it's not fully made by me, I know only a few things about js. So you say that I should get rid of onCheckboxChanged() in onchange event and call it from within your function? If so then I still don't get it how to do it. To be more accurate I want to make testbox.style... to run on clicked label (that's why I need to use clicked id). – Hayaku Sep 22 '13 at 14:36
@Hayaku, you can call your function like this: http://jsfiddle.net/raEap/2/ - If you want me to help more post a link to your page or add all your html in the fiddle. There are many elements in your function that I cannot see in your html. – Sergio Sep 22 '13 at 14:49
@Hayaku, do you know hot to use the console? – Sergio Sep 22 '13 at 20:40
Paste this code (http://jsfiddle.net/gLzPT/5/) on your console and click the checkboxes. I'm still not sure of what you want to do, but i think this will help you. Some part of the for loops is just to remove the inline code you have. – Sergio Sep 22 '13 at 20:43
No, I don't know how. Here's my code with explanation what it does and what it should - http://jsfiddle.net/gLzPT/6/. I've got some warning about too long conversations here so can we continue our talk on facebook (I see that you have a page)? – Hayaku Sep 22 '13 at 21:41
@Hayaku, what browser do you have? press F12 on it – Sergio Sep 22 '13 at 21:43
@Hayaku, I live in Sweden and its time to sleep here. Check youtube about console (you should really use it!!) and re-check my comment here. You can also read here http://stackoverflow.com/a/11663507/2256325 – Sergio Sep 22 '13 at 21:47
@Hayaku - `console` is a very important tool for any programmer. Please check it out. – Sergio Sep 22 '13 at 21:50

score 0 · Answer 2 · answered Sep 22 '13 at 10:34

I think your problem is that you want to code your logic only once and apply it to all your checkboxes etc, right?

If so, I think JQuery will help you alot in doing so.

I don't really know what you want to achieve but I can give you a quick example of how to make use of JQuery and the ability of JQuery to use a context to retrieve elements which logically belong to each other.

If you have a markup with tons of checkboxes and beside each box you have a text box for example like this:

<div class="Row">
    test <input name="choice" class="CheckBox" type="checkbox"/> <input type="text" class="TextBox"/>
</div>
<div class="Row">
    test <input name="choice" class="CheckBox" type="checkbox"/> <input type="text" class="TextBox"/>
</div>
<div class="Row">
    test <input name="choice" class="CheckBox" type="checkbox"/> <input type="text" class="TextBox"/>
</div>
<div class="Row">
    test <input name="choice" class="CheckBox" type="checkbox"/> <input type="text" class="TextBox"/>
</div>

You can use a simple JQuery technique to write an event when the checkbox changes and then query the related text box to do something with it:

$(".CheckBox").change(function(){
    var ctx = $(this).parent();
    var myTextBox = $(".TextBox", ctx);

    $(myTextBox).val("test");
});

I hope this is enough to help you get an idea of how this works. To play around with it, here is the example: http://jsfiddle.net/Elak/mcEQa/1/

Getting clicked id and using it in another function

2 Answers2