innerHTML & accessing object property

Question

I want to get the value of the list id. Then access the object property. For example, if egg is chosen: I want to get egg.cost ( which is 9)

However, it is coming up as undefined.

HTML portion :

<select id = "list">
<option value = "egg">Eggs</option>
<option value ="banana">Banana</option>
</select>

</select>
<button onclick ="getSelectValue()"></button>
<div id ="example">testing</div>

javascript:

function getSelectValue(){
    var selectedValue = document.getElementById("list").value;
    document.getElementById("example").innerHTML=selectedValue["cost"];
}

var banana = {
              cost:1.39,
              servings:6,
              servingSize:1,
              costPerServing:.23
              };

var egg = {
            cost:9,
            servings:24,
            servingSize:1,
            costPerServing:.38

          };

So, the below answer by Ori Drori works if I use script text/javascript But is not working when put the javascript in a seperate file. I get the error code on line " var selectedValue = list.value;", which states : Cannot read property "value" of null" — born2gamble
– born2gamble, Commented Nov 6, 2017 at 23:24
The solution to this part of the issue was the fact that I had the script src to my js file in the header. When moved outside of that, at the end of the html content, it fixed it thanks to @Ori Drori — born2gamble
– born2gamble, Commented Nov 6, 2017 at 23:30

Ori Drori · Accepted Answer · 2017-11-06 22:09:37Z

2

Create a dictionary of objects(items), and get the relevant object using the value of the <select>:

var list = document.getElementById("list");
var example = document.getElementById("example");
var items = {
  banana: {
    cost: 1.39,
    servings: 6,
    servingSize: 1,
    costPerServing: .23
  },

  egg: {
    cost: 9,
    servings: 24,
    servingSize: 1,
    costPerServing: .38

  }
};

function getSelectValue() {
  var selectedValue = list.value;
  example.innerHTML = items[selectedValue].cost;
}

<select id="list">
<option value = "egg">Eggs</option>
<option value ="banana">Banana</option>
</select>

<button onclick="getSelectValue()">Get cost</button>
<div id="example">testing</div>

edited Nov 6, 2017 at 22:09

answered Nov 6, 2017 at 22:06

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

5 Comments

born2gamble Over a year ago

@OriDrori Thank You..this works with <script type="text/javascript"> inside the html file. However when i try to apply it using a seperate js file, the button does nothing, the error code in the console is for the var selectedValue = list.value; .. it says Uncaught typeError: cannot read property 'value' of null

Ori Drori Over a year ago

Move this two lines into your script file as well: var list = document.getElementById("list"); var example = document.getElementById("example");

born2gamble Over a year ago

Yes, I copied exactly what is posted above. The Js file consist of : var list = up to and including the function getSelectValue. And the HTML , i linked my js file properly,( i tested it already with something basic).. is there another library i need to import or something?

Ori Drori Over a year ago

Nope. You're probably loading the JS file in the header. Move the script tag to the end of the body.

born2gamble Over a year ago

That worked !...geez I was tinkering on this for quite a while..Thanks

Sebastian Simon · Accepted Answer · 2017-11-06 22:08:18Z

0

That’s because selectedValue is the string "egg", not the variable egg. You’ll need to group both of your objects in another object (let’s call it foods), like so:

var foods = {
  egg: {
    // …
  },
  banana: {
    // …
  }
}

Then you can extract the values by foods[selectedValue].cost.

answered Nov 6, 2017 at 22:08

Sebastian Simon

19.8k8 gold badges61 silver badges88 bronze badges

Collectives™ on Stack Overflow

innerHTML & accessing object property

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related