Why Isn't My split() Delimiter Acknowledged?

Question

Just beginning learning JavaScript; writing some calculators with relatively basic functions. I found the need to put multiple variable values in an option tag of a drop-down menu, and after researching I figured it would be easiest to put them in one string, then split them with the split() function, but regardless of the delimiter I specify, it acts as if there is none, and splits each character individually. Why?

<select name="fuel" onChange="document.scalc.fuel.value=document.scalc.fuel.value.split(',')">
    <option value="199x1,50">cu/ft Natural Gas(Via Storage Tank Burner, 65% Efficient)</option>
</select>

The `value` property of form elements must be a string. The result of `split()` is an array. The `toString()` of an array is the array elements recombined into a string. — Cᴏʀʏ, Feb 24 '15 at 18:51
@Cᴏʀʏ I said it 5 seconds ago. But I noticed that the problem is that every character is being splitted. Quoting: "`acts as if there is none, and splits each character individually`" (acts as if you passed an empty string). — Ismael Miguel, Feb 24 '15 at 18:52
Why are you assigning back to itself, which causes a change, which then triggers that function again? This is in dire need of, at the very least, some [jQuery](http://jquery.com/). — tadman, Feb 24 '15 at 18:53
@IsmaelMiguel: I think the problem isn't being described exactly as it's happening. There's just no way the `split()` function is broken in the browser. — Cᴏʀʏ, Feb 24 '15 at 18:53
@Cᴏʀʏ Well, if the problem is what we believe it is (not what is described) adding `[0]` to the end will solve. — Ismael Miguel, Feb 24 '15 at 18:54
What are you trying to achieve? Are you trying to change the option as the user selects it? *That's not going to annoy or confuse the user at all* — Musa, Feb 24 '15 at 18:55
@IsmaelMiguel: There's more than one bad practice happening here: that's a lot of code to have in an inline onchange attribute and should be moved out into its own function (and attached unobtrusively). Then there's the infinite change triggering, and finally, the fact that the value property is going to be assigned something that doesn't have a corresponding value in the ` — Cᴏʀʏ, Feb 24 '15 at 18:57
I'm trying to discern two values from a menu selection, so in this case, when the user selects option 1, value becomes an array, value[0]=199x1, value[1]=50. It all works fine, except that value[0]=1, value[1]=9, value[2]=9, etc, it's ignoring the delimiter and separating all characters. This is my second day using javascript so I know the work is shoddy, I'm just messing around trying to grasp concepts. — Ben Pedtke, Feb 24 '15 at 19:04
The split() can be put in an onClick() later in the code, but it has the same results. All I'm trying to do is write a variable from an HTML dropdown without my values being cut into individual characters. — Ben Pedtke, Feb 24 '15 at 19:06

score 0 · Answer 1 · edited May 23 '17 at 11:56

Cᴏʀʏ has made some good points. Additionally, you will find it helpful to have your browser's JavaScript console open while you are testing your JavaScript so that it can show you any errors it encounters.

I could not get your example code to do anything at all - perhaps you have shortened it a little bit too much.

Your page could perhaps look something along the lines of

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example</title>
<script>
/* TODO: Give this function a meaningful name. */
function x(srcId, targetId) {
    // Get reference to the source element
    var src = document.getElementById(srcId);
    // Make sure it is a select element
    if (src.nodeName.toLowerCase() === "select") {
        var target = document.getElementById(targetId);
        // Put the first part of the source's value in the target
        target.value = src.value.split(",")[0];
    }
}
</script>
</head>
<body>
<form id="scalc">
    <select id="fuel" onChange="x('fuel', 'result')">
        <option value="199x1,50">cu/ft Natural Gas(Via Storage Tank Burner, 65% Efficient)</option>
        <option value="50x2,60">cu/ft Natural Gas(Via Super Burner, 70% Efficient)</option>
    </select>
    <input id="result" type="text" readonly="readonly" />
</form>
</body>
</html>

References:
<meta charset='utf-8'> vs <meta http-equiv='Content-Type'>
Best Practice: Access form elements by HTML id or name attribute?
How can javascript determine the type of an html element?
Also useful: W3C Markup Validation Service

Why Isn't My split() Delimiter Acknowledged?

1 Answers1