Javascript InnerHtml from <select>

Question

need some help here please ,

Basically what I've at this point is a script a user here shared with me , what it does is that it has created a hidden paragraph and the content displayed on this paragraph is conditioned by the values of 2 dropdowns , it works absolutely fine , there is only one thing though :

for the first < select > I want to use numbers as values : 0 for Audi , 1 for BMW , 2 for Mercedes and so on , but once I replace those values with numbers it doesnt seem to work ,

Please check the code , any help is more than appreciated , really :)

function myFunction() {
  let messages = {
    AudiBlack: 'Black Audi',
    AudiRed: 'Red Audi',   
    BMWBlack: 'Black BMW',
    BMWRed: 'Red BMW',
    MercedesBlack: 'Black Mercedes',
    MercedesRed: 'Red  Mercedes',
    VolvoBalck: 'Black Volvo',
    VolvoRed: 'Red Volvo'
  };
    var car = document.getElementById("mySelect").value;
    var color = document.getElementById("Variants").value;
    document.getElementById("demo").innerHTML = `${messages[car+color]}`;
}

<body>
	<p>Select a new car from the list.</p>
	<select id="mySelect" onchange="myFunction()">
	  	<option value="Audi">Audi
	  	<option value="BMW">BMW
	  	<option value="Mercedes">Mercedes
	  	<option value="Volvo">Volvo
	</select>
	<select id="Variants" onchange="myFunction()">
	 	<option value="Black"> Black
	  	<option value="Red">Red
	</select>
	<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
	<p id="demo"></p>
</body>

jeprubio · Accepted Answer · 2020-03-31 17:57:07Z

3

You have to redeclare your keys in myFunction() so that it works:

function myFunction() {
  let messages = {
    '0Black': 'Black Audi',
    '0Red': 'Red Audi',   
    '1Black': 'Black BMW',
    '1Red': 'Red BMW',
    '2Black': 'Black Mercedes',
    '2Red': 'Red  Mercedes',
    '3Black': 'Black Volvo',
    '3Red': 'Red Volvo'
  };
    var car = document.getElementById("mySelect").value;
    var color = document.getElementById("Variants").value;
    document.getElementById("demo").innerHTML = `${messages[car+color]}`;
}

<body>
	<p>Select a new car from the list.</p>
	<select id="mySelect" onchange="myFunction()">
	  	<option value="0">Audi
	  	<option value="1">BMW
	  	<option value="2">Mercedes
	  	<option value="3">Volvo
	</select>
	<select id="Variants" onchange="myFunction()">
	 	<option value="Black"> Black
	  	<option value="Red">Red
	</select>
	<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
	<p id="demo"></p>
</body>

And be careful you have a VolvoBalck instead of VolvoBlack in your code.

answered Mar 31, 2020 at 17:57

jeprubio

18.1k5 gold badges51 silver badges62 bronze badges

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

2 Comments

Mike Over a year ago

man thank you so much , apparently forgot to put brackets around : 0Black and so on , that's why it didnt work , its working just fine now , thanks a million !

jeprubio Over a year ago

I'm glad I could help. You could mark the answer as correct if you consider it is.

J. Pichardo · Accepted Answer · 2020-03-31 18:00:36Z

the easiest way of having the values in your select as numbers is using an array, very similar to what you are doing, however, I would change the nature of the array to contain objects. Like this

function myFunction() {

  let messages = [{
      red: 'Red Audi',
      black: 'Black Audi'
    },
    {
      red: 'Red BMW',
      black: 'Black BMW'
    }
  ];
  
  var carIdx = document.getElementById("mySelect").value;
  var color = document.getElementById("Variants").value;
  
  document.getElementById("demo").innerHTML = `${messages[carIdx][color]}`;
}

<body>
  <p>Select a new car from the list.</p>
  <select id="mySelect" onchange="myFunction()">
    <option value="0">Audi
      <option value="1">BMW
  </select>
  <select id="Variants" onchange="myFunction()">
    <option value="black"> Black
      <option value="red">Red
  </select>
  <p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
  <p id="demo"></p>
</body>

The reason I'd change it to be that way is in case you have different colors for different cars and is also easier to read and understand.

Collectives™ on Stack Overflow

Javascript InnerHtml from <select>

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related