Basic JS + WebDev help

Question

Hello,

I have a little Problem. I have seven <select>'s. The go from left to right counting up.

<select id="sel_1" onchange="evalonsubmit('sel_1',1);">
<select id="sel_2" onchange="evalonsubmit('sel_2',2);">

That goes from 1 to 7 in this way.

The logic is easy. On click check if the value is -1 if it is disable everything on the right and set it to -1. if it is not -1 then enable the the right of the clicked one (+1 so to say)

And that's the code:

function evalonsubmit(ID, n)
{
    var ElementID = document.getElementById(ID);
    if(ElementID.value = -1) {
        for (var i = n + 1; i <= 7; i++){
            var newID = "sel_" + i;
            var newValue = document.getElementById();
            newValue.disable = true;
            newValue.value = -1
        }
    } else {
        var newID = "sel_"+(n+1)
        var newValue = document.getElementById();
        newValue.disable = false;
    }
}

Can somebody kind JS hacker help me?

Answer 1

Not quite sure what you want, but it probably should be:

if (ElementID.value == -1){
//                   ^---  two = , otherwise you assign the value

and

var newID = "sel_" + i;
var newValue = document.getElementById(newID);
//                     pass parameter ---^

Same in the else branch.

---

Besides that, I would give your variables more meaningful names. E.g. ElementID lets you assume that the value is an ID. But it is not. It is a DOM element. Same for newValue.

Answer 2

I just fixed some simple mistakes in your code ..

function evalonsubmit(ID, n)
{
    var ElementID = document.getElementById(ID);
    if (ElementID.value == -1){
        for (var i=n+1; i <= 7; i++){
            var newID = "sel_" + i;
            var newValue = document.getElementById(newID);
            newValue.disable = true;
            newValue.value = -1
        }
    } else {
        var newID = "sel_"+(n+1)
        var newValue = document.getElementById(newID);
        newValue.disable = false;
    }
}

Answer 3

You're missing the parameter in a couple of your calls to document.getElementById, and the property for disabling a <select> is disabled, not disable. You also have = where you need ==.

function evalonsubmit(ID, n)
{
    var ElementID = document.getElementById(ID);
    if (ElementID.value == -1){
        for (var i=n+1; i <= 7; i++){
            var newID = "sel_" + i;
            var newValue = document.getElementById(newID);
            newValue.disabled = true;
            newValue.value = -1;
        }
    } else {
        var newID = "sel_"+(n+1);
        var newValue = document.getElementById(newID);
        newValue.disabled = false;
    }
}

Answer 4

Why not do this:

HTML:

<div class="wrapper">
    <select onchange="evalonsubmit(this);" />

    <select onchange="evalonsubmit(this);" />
    <select onchange="evalonsubmit(this);" />
</div>

JS:

function nextElement(current)
{
    do
        current = current.nextSibling;
    while (current && current.nodeType != 1);

    return current;
}

function evalonsubmit(elem)
{
    if(elem.value == -1)
        while(elem = nextElement(elem)) {
            elem.disabled = true;
            elem.value = -1
        }
    else if(elem = nextElement(elem))
        elem.disabled = false;
}

That removes the need for ids on the <select> elements, as following elements can be grabbed with .nextSibling. The nextElement() function is to avoid grabbing text nodes.