Javascript: Changing DOM elements based on form values

Question

I'm still pretty new to JavaScript programming and I'm having an issue.

HTML:

<form id="practiceForm" style="display:inline">
    <select id="practiceList" size="1">
        <option value="sampleA" selected="selected">Sample A</option>
        <option value="sampleB">Sample B</option>
        <option value="sampleC">Sample C</option>
    </select>
</form>
<button onclick="changeSelection();">Select</button><br />

<span id="currentSelected">Nothing selected</span><br /><br />
Name: <span id="name"></span><br />
Size: <span id="size"></span><br />
Shape: <span id="shape"></span><br />
Value: <span id="value"></span>

JavaScript:

/* var stats = {
    sampleA: { name: "Alpha", size: 3, shape: square, value: 1 },
    sampleB: { name: "Delta", size: 1, shape: circle, value: 10 },
    sampleC: { name: "Gamma", size: 25, shape, triangle, value: 200 }
}; */

function changeSelection() {
    document.getElementById("currentSelected").innerHTML = practiceForm.practiceList.options[practiceForm.practiceList.selectedIndex].value;
    document.getElementById("name").innerHTML = currentSelected.name;
    document.getElementById("size").innerHTML = currentSelected.size;
    document.getElementById("shape").innerHTML = currentSelected.shape;
    document.getElementById("value").innerHTML = currentSelected.value;
}

What I'm trying to do is, have a combobox list of items with a button. When you click the button, I need to change parts of the HTML to values that I've set in variables at the start.

The code, as it stands, works in JSFiddle. But, as soon as I un-comment the variable declaration, 'stats', it messes up, which really confuses me. Also, please excuse all the undisciplined stuff, like inline styles :) This was just for debugging test.

One more thing while I'm here- is there a way to shorthand the first line in the changeSelection() function? I've seen many examples, but they are all different.

Novalis · Accepted Answer · 2014-04-03 12:33:30Z

1

It wont work like this. you need to access the stats through the selected value.

var stats = {
    'sampleA': { name: "Alpha", size: 3, shape: 'square', value: 1 },
    'sampleB': { name: "Delta", size: 1, shape: 'circle', value: 10 },
    'sampleC': { name: "Gamma", size: 25, shape: 'triangle', value: 200 }
};

function changeSelection() {
    document.getElementById("currentSelected").innerHTML = practiceForm.practiceList.options[practiceForm.practiceList.selectedIndex].value;    
    document.getElementById("name").innerHTML = stats[practiceList.value].name;
    document.getElementById("size").innerHTML = stats[practiceList.value].size;
    document.getElementById("shape").innerHTML = stats[practiceList.value].shape;
    document.getElementById("value").innerHTML = stats[practiceList.value].value;
}

look at this fiddle. http://jsfiddle.net/9QXc4/

edited Apr 3, 2014 at 12:33

answered Apr 3, 2014 at 12:22

Novalis

816 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dinklebeeeerg Over a year ago

That's perfect, thank you. Still trying to absorb the why's, but that works when I apply it to my main project. I've also noticed that you put quotes on the objects themselves. Is there a difference? The code seemed to work without it, but I want to make sure.

Novalis Over a year ago

If you don't put quotes, JS is expecting a object, not a value. It should not work without actually. But maybe is miss something. Anyway, with quotes you are on the save side.

tymeJV · Accepted Answer · 2014-04-03 12:20:30Z

0

It's throwing a syntax error in the console due to your object.

var stats = {
    sampleA: { name: "Alpha", size: 3, shape: "square", value: 1 },
    sampleB: { name: "Delta", size: 1, shape: "circle", value: 10 },
    sampleC: { name: "Gamma", size: 25, shape: "triangle", value: 200 }
};

The above is the correct syntax. Things needed fixing:

-Quote property values! square, circle, and triangle were unquoted. -The "shape" property had a comma rather than a colon to declare the value

Use the console when programming, you'll see this error right away:

Uncaught SyntaxError: Unexpected token ,

Which was caused by:

sampleC: { name: "Gamma", size: 25, shape, "triangle", value: 200 }
                                        ^^

answered Apr 3, 2014 at 12:20

tymeJV

105k14 gold badges165 silver badges158 bronze badges

1 Comment

Dinklebeeeerg Over a year ago

Those damn noob mistakes... I do actually use the console, and it did catch some errors in the main project, but got lazy when I re-created for testing in JSFiddle :\

Karim AG · Accepted Answer · 2014-04-03 12:21:36Z

0

Just replace sampleC: { name: "Gamma", size: 25, shape, triangle, value: 200 } with this sampleC: { name: "Gamma", size: 25, shape: triangle, value: 200 }

You put a comma instead of a colon

answered Apr 3, 2014 at 12:21

Karim AG

2,19315 silver badges30 bronze badges

1 Comment

xjedam Over a year ago

also add quote around shape values like so: shape: "triangle"

Collectives™ on Stack Overflow

Javascript: Changing DOM elements based on form values

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related