CODEWITHSUNDEEP
javascripthtml
Mark Biwojno
Mark Biwojno

Reputation: 75

Outputting browser text depending on dropdown selected

<script type="text/javascript">
Running = "For beginner to professional marathon runners";
Paragliding = "For all those interested in the extreme sport of paragliding";
Swimming = "For all levels of swimming enthusiasts";
function dropdownTip(value){  
document.getElementById("result").innerHTML = value;
}</script>

I'm trying to output text from a variable depending on the the category the user selects. How do I change "value" to be a variable string named that instead? Or is there a better method?

<form action="submit.php" method="post">
<select onChange="dropdownTip(this.value)" select name="input"> 
<option value="Athletics:">Athletics:</option>
<option value="Running">Running</option>
<option value="Paragliding">Paragliding</option>
<option value="Swimming">Swimming</option>
</select> 
<input type="Submit" value="Next">
</form>
<!-- Text output here !-->
<div id="result"></div>

Insights appreciated.

Upvotes: 0

Views: 40

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

If we regard the HTML markup as fixed, then the JavaScript code needs to map strings (like “Running”) to other strings (like “For beginner to professional marathon runners"). This is best done using an object that has strings of the first kind as properties and strings of the second kind as values of properties:

var explanation = {
  Athletics: "For atheletes",
  Running: "For beginner to professional marathon runners",
  Paragliding: "For all those interested in the extreme sport of paragliding",
  Swimming: "For all levels of swimming enthusiasts"
}
function dropdownTip(value){  
  document.getElementById("result").innerHTML = explanation[value];
}

Upvotes: 1

Related Questions