Question

I’m stuck at another problem with javascript,
my code consists of two parts

First a simple dropdown menu:

<select>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>

Secound a simple div:

<div onClick="doThis('1');">Execute 1</div>

My script currently changes the innerHTML of the div when a certain option is selected, but now I need it also to change the onClick functions value.

Meaning, if I select option 3, the javascript should look onClick=”doThis(‘3’);.

I know how to change most of the attributes with javascript, but no idea how I can change a javascript onClick attribute with another javascript function. I googled it, but nothink came up.

So, how can this be done?

All help is apprecianted,
thank you already.

Answer 1

Do not use inline javascript events. You’re mixing functional code (javascript) and presentation code (HTML) which is an antipattern. If you seperate these concerns properly, the answer becomes somewhat trivial:

HTML:

<select id="someSelect">
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>

<div id="someDiv">Execute</div>

JavaScript:

document.getElementById('someDiv').onclick = function () {
    var select = document.getElementById('someSelect');
    var number = select.value;

    doThis(number);
};

http://jsfiddle.net/jbabey/HzVd7/