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, Jun 04 '15 at 20:58
What specifically are you having problems with? Any of the subproblems have been asked about repeatedly already. Getting the selected value: http://stackoverflow.com/q/1085801/218196. Using a string as key into a nested object: http://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, Jun 04 '15 at 20:58

Cyrbil · Accepted Answer · 2015-06-04T21:42:03.123

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 04 '15 at 21:42

answered Jun 04 '15 at 21:01

Cyrbil

6,341
1
24
40

Is there any way that I can call a function from the value tag? Like value="getSelectedValue(i, element)" – Rygh2014 Jun 04 '15 at 21:15
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. `
....` Notice that electroSeries need to be defined **before** `li`.

Cyrbil

Jun 04 '15 at 21:18

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. – Rygh2014 Jun 04 '15 at 21:28

You can iterate through your values with a standard loop, and creating all the `li` elements. See my edit – Cyrbil Jun 04 '15 at 21:42

How to get an HTML value using a JavaScript function

1 Answers1