CODEWITHSUNDEEP
javascriptjquery
Hayaku
Hayaku

Reputation: 45

Getting clicked id and using it in another function

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).

Upvotes: 1

Views: 226

Answers (2)

MichaC
MichaC

Reputation: 13380

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/

Upvotes: 0

Sergio
Sergio

Reputation: 28837

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

Upvotes: 1

Related Questions