How to get an HTML value using a JavaScript function

Question

I would like to set the value of a select-menu option to a value of a JavaScript object.

HTML

<select id="eRedList">
    <option value=electroSeries.Li.potential>Li</option>
</select>

JS

var electroSeries = {
    Li: {name : "Li", charge : "1", potential : -3.05, redReaction : "Li+(aq) + e- >> Li(s)", oxReaction : "Li(s) >> Li+(aq) + e-"};
}

so here, I want to the value associated with the property 'potential' to the HTML value. However, when I try to display this in a text box just to see what I get, I end up getting 'electroSeries.Li.potential' written instead of the numerical value.

I'm relatively new to JS, so any help would be appreciated!

Would you like a script that automatically translates electroSeries.Li.potential into the numerical value? Would it need to update automatically when the variable changes? — Evan Kennedy
– Evan Kennedy, Commented Jun 4, 2015 at 20:58
What specifically are you having problems with? Any of the subproblems have been asked about repeatedly already. Getting the selected value: stackoverflow.com/q/1085801/218196. Using a string as key into a nested object: stackoverflow.com/q/6491463/218196. edit: Or it seems you want to set the value in the object as value of the option? In which case, how are you generating the markup? — Felix Kling
– Felix Kling, Commented Jun 4, 2015 at 20:58

Cyrbil · Accepted Answer · 2015-06-04 21:42:03Z

3

Html and js cannot interact like you expect without an external library (like angular). You need to access your option element from the javascript and apply the value:

var electroSeries = {
    Li: {name : "Li", charge : "1", potential : -3.05, 
         redReaction : "Li+(aq) + e- >> Li(s)", 
         oxReaction : "Li(s) >> Li+(aq) + e-"};
}
var select = document.getElementById('eRedList');
select.options[0].value = electroSeries.Li.potential;

Edit: Solution based on comments

var electroSeries = {
    Li: { potential : -3.05 },
    K: { potential : -2.92 },
    Ca: { potential : -2.76 },
};

var select = document.getElementById('eRedList');
for(var i in electroSeries) {
    var option = document.createElement('option');
    option.innerHTML = i;
    option.name = i;
    option.value = electroSeries[i].potential;
    select.appendChild(option);    
}

Element: <select id="eRedList"></select>

edited Jun 4, 2015 at 21:42

answered Jun 4, 2015 at 21:01

Cyrbil

6,5081 gold badge27 silver badges42 bronze badges

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

4 Comments

Rygh2014 Over a year ago

Is there any way that I can call a function from the value tag? Like value="getSelectedValue(i, element)"

Cyrbil Over a year ago

You can bind an event at the onload property of li element. It will get triggered once the browser have read and loaded your li tag. <li onload="function_name(this)">.... Notice that electroSeries need to be defined before li.

Rygh2014 Over a year ago

Alright, thank you, I'll mess around and see what I can come up with. My problem is that i might have 50 different chemicals there, Li is only the first, so I was trying to pass values in a function rather than having to explicitly say: select.options[0].value = electroSeries.Li.potential if the first option is chose, or: select.options[1].value = electroSeries.Cu.potential if the second is chosen etc.

Cyrbil Over a year ago

You can iterate through your values with a standard loop, and creating all the li elements. See my edit

Collectives™ on Stack Overflow

How to get an HTML value using a JavaScript function

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related