Fix example of output element to use ids instead of names

[frigus02]

Fixes #3312

The first example of the output element incorrectly referenced input elements in the for attribute by their names:

<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
 <input name=a type=number step=any> +
 <input name=b type=number step=any> =
 <output name=o for="a b"></output>
</form>

I added IDs to the input elements and used them in the for attribute. The example looks like this now:

<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
 <input id="number-a" name=a type=number step=any> +
 <input id="number-b" name=b type=number step=any> =
 <output name=o for="number-a number-b"></output>
</form>

Another option would be to only use IDs:

<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
 <input id=a type=number step=any> +
 <input id=b type=number step=any> =
 <output id=o for="a b"></output>
</form>

Personally I prefer the first example with separate names and IDs, though.

Please let me know if anything is missing or if this fix is wrong entirely.

---

/acknowledgements.html ( diff )
/form-elements.html ( diff )

[RusinovAnton]

Excuse me, maybe its rude to ask, but is Kühle is really your last name or there are two mistakes?

[frigus02]

It's ok to ask. Kühle is my last name. You can also see it on my GitHub profile.

[RusinovAnton]

oh Im noob. Never thought that this ü would be transpiled to ü. Thanks for your contribution though

[TimothyGu]

I think having just the ID is fine. If not for the current confusion in the example one probably wouldn’t have mistaken one for the other.

[frigus02]

I was mainly thinking about the oninput event handler. Currently it uses names, which are only available in the scope of the form. When using IDs it resolves these from the global scope. All other examples with IDs use document.getElementById to find the element.

I don't mind changing the example to only IDs, though. Should I convert the oninput handler to use document.getElementById, too? Or just use example as I wrote it above?

[domenic]

Sorry for the delay on getting back to you here. I think it's totally fine to use any style here: ids + names, ids only with global variable access, ids only with getElementById... The style of examples in the spec is varied, on purpose, to illustrate all the different ways you can write code.

So, I think in the end, the question is what you'd prefer, @frigus02 :). And in your OP you said you preferred separate, so let's do that.

[domenic]

Well, OK, I see after writing that that you switched to only ids. So, uh, just let me know if you want to merge it as-is, or if you want to revert to separate and I'll merge that. Either way!

[frigus02]

Hey @domenic. Don't worry about the delay. I didn't expect prompt feedback during the holidays. :-)

You can merge it as as, using only ids. That's fine for me.