Executing two actions simultaneously in 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!!

What's the point of `if (typeof clicks[i] !== 'undefined')`? `getElementsByTagName` never returns any undefined elements. The only undefined element you'll get is the last one, because you have the wrong loop condition. It should be `i < clicksCount` instead of `i <= clicksCount`. — Barmar, Jan 12 '19 at 20:49
@Barmar You want to remove if `(typeof clicks[i] !== 'undefined')` and look in the console? i < clicksCount does not affect the outcome one way or the other. — Mark Lee, Jan 13 '19 at 04:01
If you use the correct comparison you don't go outside the array, so you never get `undefined`, and you don't need to check for it. — Barmar, Jan 13 '19 at 04:13
I just tried `for (var i = 0; i < clicksCount; i++) { if (typeof clicks[i] === "undefined") {console.log(i);}}` in the console, it didn't log anything. — Barmar, Jan 13 '19 at 04:16
But if I change to `<=` it prints the last value of `i` because it's too high. — Barmar, Jan 13 '19 at 04:17
Not on my machine (Firefox on Ubuntu). Change var `x = this.id;` to `alert(this.id);`, remove the document.get.. lines then click on any li and see what happens. And look in the console. — Mark Lee, Jan 13 '19 at 04:46
What does that have to do with whether `clicks[i]` is defined? The error you're trying to protect from happens when you do `clicks[i].onclick = ...` — Barmar, Jan 13 '19 at 04:56
But I misread the code when I closed it as a duplicate. You're not using `i` in the callback function. — Barmar, Jan 13 '19 at 04:57
I see another problem. You have multiple elements with `id="type"`. IDs are supposed to be unique. — Barmar, Jan 13 '19 at 04:59

score 0 · Answer 1 · answered Jan 12 '19 at 20:43

0

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

answered Jan 12 '19 at 20:43

Tommi Tuura

189
9

Executing two actions simultaneously in JavaScript

1 Answers1