CODEWITHSUNDEEP
javascripthtml
Mike
Mike

Reputation: 59

InnerHTML Output for Selected Values

My script works with the <select> to update a hidden paragraph on the template based on the values selected. This is working fine but my request here is to set conditionals for 2 select values for each car. For example, if I select Audi + Red I want to show, say: "Beautiful Car". For BMW + Black: "Black BMW for sale".

Basically I want to create an output based on the values selected from both <select> fields and I want to create 8 unique values for each car brand and color.

    <!DOCTYPE html>
<html>
<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">
 <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>
<script>

function myFunction() {
    let messages = {
        Audi: 'RandomData1',
        BMW: 'RandomData2',
        Mercedes: 'RandomData3',
        Volvo: 'RAndomData4'
    }
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = `${messages[x]}`;
}
</script>
</body>
</html>

Upvotes: 1

Views: 83

Answers (2)

Levi
Levi

Reputation: 859

function myFunction() {
  let messages = {
    black0: 'Black Audi',
    red0: 'Red Audi',   
    black1: 'Black BMW',
    red1: 'Red BMW',
    black2: 'Black Mercedes',
    red2: 'Red  Mercedes',
    black3: 'Black Volvo',
    red3: 'Red Volvo'
  };
    var car = document.getElementById("mySelect").value;
    var color = document.getElementById("Variants").value;
    document.getElementById("demo").innerHTML = `${messages[color+car]}`;
}
<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>

Upvotes: 0

user2818985
user2818985

Reputation: 390

I think this is what you are trying to achieve. The solution was to generate objects matching the drop-down values for the color and manufacturer.

    <!DOCTYPE html>
<html>
<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>
<script>

function myFunction() {
   let messages = {
            "Audi":{"Black":"audi color black","Red":"audi color red"},
            "BMW":{"Black":"BMW color black","Red":"BMW color red"},
            "Mercedes":{"Black":"Mercedes color black","Red":"Mercedes color red"},
            "Volvo":{"Black":"Volvo color black","Red":"Volvo color red"}};

    var x = document.getElementById("mySelect").value;
    
    var y = document.getElementById("Variants").value;
    
    document.getElementById("demo").innerHTML = messages[x][y];
}
</script>
</body>
</html>

Upvotes: 1

Related Questions