在JavaScript中同时执行两个动作

Question

I am having an issue with displaying a modal box containing a Select Options list with an option enabled based on the referring click from a list item. The problem is that the box opens only on the second click rather than with one. The following is what I'm using to get the element of the referring click and enabling the disabled option (I'm not using event.target because I want the specific element and not just any list tag on the document):

function getli() {
    var clicks = document.getElementsByTagName("li");
    var clicksCount = clicks.length;
    for (var i = 0; i <= clicksCount; i += 1) {
        if (typeof clicks[i] !== 'undefined') {
            clicks[i].onclick = function(e) {
                var x = this.id;
                document.getElementById("id01").style.display="block";
                document.getElementById("type").options[x].disabled = false;
            };
        }
    }
}

The HTML:

<ul>
<li id="Choose an Option</li>
<li id="text" onclick="getli();">Text</li>
<li id="textarea" onclick="getli();">Text Area</li>
<li id="hidden" onclick="getli();">Hidden</li>
</ul>

The disabled options:

  <select name="type" id="type">
    <option>Choose</option>
    <option id="text" disabled value="text">Text</option>
    <option id="textarea" disabled value="textarea">Text Area</option>
    <option id="hidden" disabled value="hidden">Hidden</option>
    </select>

I've tried:

function modal() {
    document.getElementById("id01").style.display="block";
    getli();
}

and

function twobirds() {
    modal();
    getli();
}

but while both open the modal there doesn't seem to be any operation on the list as all items remain disabled.

Please help to set me straight. No jQuery please!!

Answer 1

It seems like the function you have set as onclick handler in html only sets another handler which sets the option as displayed and not-disabled.

Sorry, for not writing code here, on phone right now. Will return here later...